Populate Text Input Via Dropdown Jquery

Question

I pull data from a MYSQL database to populate a Drop down

<td class="<?php print $Bank_ca_error;?>">Bank Name</td> <td> <select name="Bank" id="Bank" tabindex=24 style="color: <?php print $TextColour;?>"/> <option><?php print $_SESSION['Bank_ca'] ;?></option> <?php //Get Data to populate drop down $BankQuery = "SELECT BankName FROM tblbank ORDER BY BankName"; $BankResult = mysql_query ($BankQuery); While($nt=mysql_fetch_array($BankResult)) { print"<option $nt[BankName]>$nt[BankName]</option>"; } ?> </select> </td>

I would like based on the value selected populate a text input. So Basically Select the Bank from the List and have it autopopulate the Universal Branch Code in the text input.

I saw an example using Jquery, But I am a complete noob when it comes to this and I cannot get it to work properly

I added the following in the Head section

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#Bank').live('change', function(event) { $.ajax({ url : 'getData.php', type : 'POST', dataType: 'json', data : $('#myform').serialize(), success: function( data ) { for(var id in data) { $(id).val( data[id] ); } } }); }); }); </script>

I then Added this into the getData.php file

<?php include "../../../includes/dbinfo.inc"; //Connect to database     mysql_connect($db_host, $db_username, $db_password); @mysql_select_db($db_database) or     die("Unable to select database"); $BankName = $_POST['Bank']; // Selected Bank $query = "SELECT * FROM tblbank WHERE BankName ='{$BankName}'"; $result = mysql_query($query); $row = mysql_fetch_array($result) $BranchCode = $row['UniversalCode']; $arr = array(     'input#BranchCode' => $BranchCode ); echo json_encode( $arr ); ?>

and added the Following to around the inputs and dropdown concerned

<form id='myform'> </form>

I tried to use a solution elsewhere on this site but could not get it to work

Your assistance is greatly appreciated

@gdoron in the script in the Head section – jeffjenx May 21 '12 at 13:42 — jeffjenx, May 21 '12 at 13:42

score 0 · Accepted Answer · answered May 21 '12 at 14:47

If I understand correctly what you're trying to do, then you do not need ajax, try something like this

<?php
include "../../../includes/dbinfo.inc"; 
//Connect to database
mysql_connect($db_host, $db_username, $db_password); @mysql_select_db($db_database) or die("Unable to select database");

$res = mysql_query("SELECT UniversalCode, BankName FROM tblbank ORDER BY BankName");
while($row = mysql_fetch_assoc($res)) {
    // associative array of banks
    $banks[$row['UniversalCode']] = $row['BankName'];
}
?>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $('#Bank').change( function() {
        // enter in an empty field code of the selected bank
        $('#UniversalCode').val( $(this).val() );
    });
});
</script>
<td class="<?php print $Bank_ca_error;?>">Bank Name</td> 
<td> 
<select name="Bank" id="Bank" tabindex=24 style="color: <?php print $TextColour;?>"/> 
    <? foreach($banks as $code=>$name) { ?>
        <option value="<?=$code?>"><?=$name?></option> 
    <? } ?>
</select>
<input value="" id="UniversalCode">
</td>

Hi Many thanks for the input. I figured out why it wasnt working but I can't figure out the solution. I have a

for the whole page to submit the application, but the section

is inbetween that. so the getData.php was not being provided a value via POST. How do I get around this now still using the Ajax method? I would like to use this as it would be useful for other fields @ShaaD — Fabio, May 21 '12 at 15:13
i feel like there is some misunderstanding between us.. problems with
can be solwed like this: `

`. So you not need second form. — ShaaD, May 21 '12 at 16:17

Populate Text Input Via Dropdown Jquery

1 Answers1