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

**rwtrwt2003** · 01-26-2011 08:37 AM

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>

**apeg** · 01-26-2011 10:45 AM

jQuery makes JS soooo easy:

Code:

    $(document).ready(function () {
        $('#Switch').change(function () {
            $('#Vendor').val($(this).val());
        });
    });

**rwtrwt2003** · 01-26-2011 11:11 AM

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

**apeg** · 01-26-2011 11:27 AM

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

**rwtrwt2003** · 01-26-2011 11:36 AM

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>

**apeg** · 01-26-2011 12:40 PM

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

**thraddash** · 01-26-2011 02:47 PM

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;
	};
};

**rwtrwt2003** · 01-26-2011 02:51 PM

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

**thraddash** · 01-26-2011 02:54 PM

Code:

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

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions