How to set variable value from widget

[ericgilmore]

I am attempting to pass a value from a widget I added to a Macro with label field to another Single line text field on a request form.  The widget is attached to the Macro with label field using the Widget field on the Default Value tab of the Macro with label variable. The code for the widget is below.

// Select Start Time widget

//HTML
<div id="selectStartTime">
<!-- just a simple time select box -->
<!-- 	<legend>Hour/Minute</legend> -->
<label for="startHour">Hour: </label>
<select name="startHour" id="startHour">
	<option>08</option>
	<option>09</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	<option>13</option>
	<option>14</option>
	<option>15</option>
	<option>16</option>
	<option>17</option>
	<option>18</option>
	<option>19</option>
	<option>20</option>
	<option>21</option>
	<option>22</option>
</select>
<label for="startMinute"> Minute: </label>
<select name="startMinute" id="startMinute">
	<option>00</option>
	<option>05</option>
	<option>10</option>
	<option>15</option>
	<option>20</option>
	<option>25</option>
	<option>30</option>
	<option>35</option>
	<option>40</option>
	<option>45</option>
	<option>50</option>
	<option>55</option>
</select>
<span id="peopleStartTime"></span>
</div>

// Client Script

function($scope) {
/* widget controller */
	var c = this;
	var h = document.getElementById("startHour");
	var m = document.getElementById("startMinute");
	var pplTime = document.getElementById("peopleStartTime");
	var mer;
	var ph;
	var timeOutput;

	// time for normal people
	pplTime.onLoad = getPplTime();

	// hey if you change, update things
	h.oninput = getPplTime;
	m.oninput = getPplTime;

	function getPplTime() {
		if (h.value >= 12) {
			mer = "pm";
		} else { mer = "am"; }

		if (h.value > 12) {
			ph = h.value - 12;
		} else { ph = h.value; }

		// people can understand this better
		timeOutput = ph + ":" + m.value + " " + mer;
		
		// put it here
		pplTime.innerHTML = timeOutput;
		
	}

	// just testing here, don't think this is right
	$scope.change = function(){
		var hours = h.value;
		var minutes = m.value;
		var someTime = hours + ":" + minutes;
		
		// just trying to set another field's value
		$scope.page.g_form.setValue('military_start',someTime);
	}

}

Previous insight was gotten from How to set custom variable value from widget but unfortunately, the answers didn't work. I'm only reposting b/c I was unsure if my comment there would ever be seen.

Any further insight is appreciated.

[ericgilmore]

OK, figured it out. Just placed the setValue call in the appropriate place, and voilá! Zee value, she is there!

function($scope) {
  /* widget controller */
  var c = this;
	var h = document.getElementById("startHour");
	var m = document.getElementById("startMinute");
	var pplTime = document.getElementById("peopleStartTime");
	var mer;
	var ph;
	var militaryTime;
	var timeOutput;
	
	
	// time for normal people
	pplTime.onLoad = getPplTime();
	
	// hey if you change, update things
	h.oninput = getPplTime;
	m.oninput = getPplTime;
	
	function getPplTime() {
		if (h.value >= 12) {
			mer = "pm";
		} else { mer = "am"; }
	
		if (h.value > 12) {
			ph = h.value - 12;
		} else { ph = h.value; }

		// military time
		militaryTime = h.value + ":" + m.value;
		
		// people can understand this better
		timeOutput = ph + ":" + m.value + " " + mer;
		
		// put it here
		pplTime.innerHTML = timeOutput;
		
		// set our hidden time field
		$scope.page.g_form.setValue('military_start',militaryTime);
			
	}

}

With the $scope var passed in to the initial function call, then used to set our read only + hidden field that pushes our value to the request item.

It works.

[ericgilmore · Accepted solution]

OK, figured it out. Just placed the setValue call in the appropriate place, and voilá! Zee value, she is there!

function($scope) {
  /* widget controller */
  var c = this;
	var h = document.getElementById("startHour");
	var m = document.getElementById("startMinute");
	var pplTime = document.getElementById("peopleStartTime");
	var mer;
	var ph;
	var militaryTime;
	var timeOutput;
	
	
	// time for normal people
	pplTime.onLoad = getPplTime();
	
	// hey if you change, update things
	h.oninput = getPplTime;
	m.oninput = getPplTime;
	
	function getPplTime() {
		if (h.value >= 12) {
			mer = "pm";
		} else { mer = "am"; }
	
		if (h.value > 12) {
			ph = h.value - 12;
		} else { ph = h.value; }

		// military time
		militaryTime = h.value + ":" + m.value;
		
		// people can understand this better
		timeOutput = ph + ":" + m.value + " " + mer;
		
		// put it here
		pplTime.innerHTML = timeOutput;
		
		// set our hidden time field
		$scope.page.g_form.setValue('military_start',militaryTime);
			
	}

}

With the $scope var passed in to the initial function call, then used to set our read only + hidden field that pushes our value to the request item.

It works