www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Help with populating one field from another field selected

  1. #1
    Join Date
    Jan 2011
    Posts
    42

    resolved [RESOLVED] Help with populating one field from another field selected

    What am trying to do is when i select from Switch field I want Vendor to auto populate with $name. Below is the code that i am useing

    PHP Code:
    <label><strong>Switch:
        <select name="Switch" id="Switch" >
          <?php
                
    while ($row_getSwitches mysql_fetch_array($getSwitches))
                {
                    
    $id $row_getSwitches['Switch'];
                    
    $name $row_getSwitches['Vendor'];
                    print 
    "<option value=$id";
                         if (
    $var == $id)
                            print 
    " selected";
                            print 
    ">$id--$name\n";
                }
                
            
    ?>
           
        </select>
        </strong></label>
        <strong>
        <label>Person:
        <select name="Person" id="Person">
          <?php
             
    while ($row_getPerson mysql_fetch_assoc($getPerson))
             {
                 print 
    "<option value='".$row_getPerson['Person']."'>".$row_getPerson['Person']."</option>\n";
             }
            
    ?>
        </select>
        </label>
        </strong>
        <label>Vendor
        <input name="Vendor" id="Vendor"   >
        <?PHP
            
            
    print "$name\n";
        
    ?>
        </label>

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    jQuery makes JS soooo easy:
    Code:
        $(document).ready(function () {
            $('#Switch').change(function () {
                $('#Vendor').val($(this).val());
            });
        });

  3. #3
    Join Date
    Jan 2011
    Posts
    42
    so where do i put the code. Would it be where i have the Label Vendor at and do i need to at a onchange to the Switch so when i select the switch it will put the Vendor in the Vendor text field

  4. #4
    Join Date
    Sep 2009
    Posts
    146
    ok... first you need to include jQuery on your page, put this code in the head of your HTML document:
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    that will pull jQuery directly from the google API, its easy but if you want you can directly include the file

    second (right under the line you just added) put this:
    Code:
        <script type="text/javascript">
        $(document).ready(function () {
            $('#Switch').change(function () {
                $('#Vendor').val($(this).val());
            });
        });
        </script>
    and thats it! i don't want to overwhelm you, but jQuery applies the "onchange", "onclick", "onload"... automatically, so you don't have to worry about it

    i recommend trying trying to figure out how to do the exactly same thing without jQuery, that will show you the true advantages (magic) of jQuery.

    -aPeg

  5. #5
    Join Date
    Jan 2011
    Posts
    42
    Cool it works that is neat. The only thing is that it is given me the switch Name and not the Vendor. Here is what i have so far:
    PHP Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script type="text/javascript">
        $(document).ready(function () {
            $('#Switch').change(function () {
                $('#Vendor').val($(this).val());
            });
        });
        </script>

    <title>Night Work</title>
    </head>
    <script language="javascript" src="/JavaScripts/calendar.js"></script>

    <body>
    <div align="center">
      <h1>Cell Load Night Work </h1>
      <p>&nbsp;</p>
      <form action="<?php echo $editFormAction?>" name="form1" id="form1" method="POST" >
        <label><strong>Switch:
        <select name="Switch" id="Switch" >
          <?php
                
    while ($row_getSwitches mysql_fetch_array($getSwitches))
                {
                    
    $id $row_getSwitches['Switch'];
                    
    $name $row_getSwitches['Vendor'];
                    print 
    "<option value=$id";
                         if (
    $var == $id)
                            print 
    " selected";
                            print 
    ">$id\n";
                }
                
            
    ?>
           
        </select>
        </strong></label>
        <strong>
        <label>Person:
        <select name="Person" id="Person">
          <?php
             
    while ($row_getPerson mysql_fetch_assoc($getPerson))
             {
                 print 
    "<option value='".$row_getPerson['Person']."'>".$row_getPerson['Person']."</option>\n";
             }
            
    ?>
        </select>
        </label>
        </strong>
        <strong><label>Vendor
         <input name="Vendor" id="Vendor"   >
          </strong></label>

  6. #6
    Join Date
    Sep 2009
    Posts
    146
    didn't notice, you set the value of the <option> to the switch name and you set the Vendor name as the visual name of the option.

    its a little more complicated getting that, but here you go,
    replace:
    Code:
    $('#Vendor').val($(this).val());
    with:
    Code:
    $('#Vendor').val($(this).children('option:selected').html());
    that shows you a little more of the advantages of jQuery, wouldn't know how to even begin getting that with javascipt only

    -aPeg

  7. #7
    Join Date
    Aug 2009
    Posts
    593
    Here is the equivalent without using JQuery, you can save 24k.

    Code:
    window.onload = function()
    {
    	document.getElementById('Switch').onchange = function()
    	{
    		document.getElementById('Vendor').value = this.options[this.selectedIndex].innerHTML;
    	};
    };

  8. #8
    Join Date
    Jan 2011
    Posts
    42
    ok so know i have the whole thing. but i only need the $name to be put into Vendor. Here is part of the view source
    Code:
     <select name="Switch" id="Switch" >
    <option value=AALTEST2>AALTEST2 LUCENT</option>
    <option value=test3>test3 MOTO</option>
    <option value=AAANT>AAANT NORTEL</option>
    So what it am trying to do is put the LUCENT in Vendor
    right know i get AALTEST2 LUCENT going to Vendor

    Thank you for your help on this

  9. #9
    Join Date
    Aug 2009
    Posts
    593
    Code:
    window.onload = function()
    {
    	document.getElementById('Switch').onchange = function()
    	{
    		document.getElementById('Vendor').value = this.options[this.selectedIndex].innerHTML.split(' ')[1];
    	};
    };

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles