Using Javascript to change the value of field in form with a list of items

ptcruiser · 02-05-2013, 01:44 AM

I have the following form that produces a list of about 25 pairs of values.

Code:

<?php
$records = $record->getRelatedSet("Value_List");

?>


<form data-ajax="false" action="none.php" method="post" name="values" id="values">


<?php $i=1;?>


<table border="1">
	<tr>
		<th>ValueA</th>
		<th>ValueB</th>
	</tr>



<?php foreach ($records as $related_record) 
{ ?>
	<tr>
		<td> 
        	<input   name="ValueA.<?php echo $i;?>" id="ValueA.<?php echo $i;?>" value=""/>     
	
 		</td>
	
		<td> 
    		<input   name="ValueB.<?php echo $i;?>" id="ValueB.<?php echo $i;?>" value=""/>     
	
 		</td>	
    
	</tr>

<?php $i=$i+1;
} ?>
<tr>	
<td><input type="submit" value="submit"/>	</td>
</tr>
</table>
	
	
	

		</form>

I would like to use javascript to change the value of ValueB based on the value of ValueA. I know how to do this if the form has one set of values but I don't know how to do it if you have an unknown number of value pairs in the list.

Thanks for your consideration.

Paul

Old Pedant · 02-05-2013, 02:16 AM

Look at the page as HTML, not as PHP, for starters.

Bring up the page in your browser, select the VIEW menu, select SOURCE or PAGE SOURCE. Now see the HTML as the browser sees it.

Assuming you see something like this:

Code:

<table border="1">
	<tr>
		<th>ValueA</th>
		<th>ValueB</th>
	</tr>
        <tr>
		<td><input   name="ValueA.1>" id="ValueA.1>" value=""/></td>
		<td><input   name="ValueB.1>" id="ValueB.1>" value=""/></td>
        </tr>
        <tr>
		<td><input   name="ValueA.2>" id="ValueA.2>" value=""/></td>
		<td><input   name="ValueB.2>" id="ValueB.2>" value=""/></td>
        </tr>
        ... etc ...
</table>

Then I would first suggest:
(a) There is NO REASON to give both an ID and NAME to an <form> field.
Since you need the NAME to submit the <form> to PHP, drop the ID.
(b) It's a good idea to replace the period in those names with an underline.
Not terribly important, but in some cases it can simplify the JS code.

SO... Let's change all that to:

Code:

        <tr>
		<td><input   name="ValueA_1>" value=""/></td>
		<td><input   name="ValueB_1>" value=""/></td>
        </tr>
        <tr>
		<td><input   name="ValueA_2>" value=""/></td>
		<td><input   name="ValueB_2>" value=""/></td>
        </tr>
        ... etc ...

And then we can add JS code to easily work with those.

The best place to put the JS is *JUST BEFORE* the </body> tag, *not* in the <head>.

If you do so, you could have code such as this:

Code:

<script type="text/javascript">
(
  function( ) /* master anonymous function */
  {
      var form = document.getElementById("values");
      var inputs = form.getElementsByTagName("input");
      for( var i = 0; i < inputs.length; ++i )
      {
          var inp = inputs[i];
          if ( inp.name.substring(0,7) == "ValueA_" ) 
          {
              inp.onchange = valueAchange;
          }
      }

      function valueAchange( )
      {
          var fieldAName = this.name;  // get name of changed ValueA_xxx field
          var valA = this.value; // get the value of the given valueA_xx field 
          var fieldBName = fieldAName.replace("ValueA", "ValueB" ); // corresponding name!!  
          var valB = ... you supply the code to determine ValueB based on ValueA
          form[fieldBName].value = valB;
      }
  } // end of master anonymous function
)(); // self-invoke the master function
</script>
</body>
</html>

ptcruiser · 02-05-2013, 01:23 PM

That is perfect. Thank you.