Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,548
    Thanks
    77
    Thanked 4,382 Times in 4,347 Posts
    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>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    ptcruiser (02-05-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That is perfect. Thank you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •