Welcome to WebmasterWorld Guest from 107.22.87.205

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Input Box Onchange Execute SQL

     
8:58 am on Apr 24, 2012 (gmt 0)



Hi everyone,

Here's what I'm trying to achieve. I have an input box that dynamically looks up values from a mysql database on each key press and displays them in a dropdown list, this works great. Upon selecting from the drop down that input box is populated along with another input box, the second input box is populated with an ID from the database based on the selected value.

I would like to execute another SQL based on the ID from the second input box using the onchange event of the first.

I'll post some code so hopefully my problem is explained better.

<td><label>Registration</label></td>
<td><div class="ausu-suggest"><input type="text" class="w100" name="registration" id="registration" value="" /><input type="text" class="w50" id="tv_id" disabled="disabled" /></div></td>
<td><label>Company</label></td>
<td><input type="text" class="w100" name="company" id="company" value="" /></td>


So searching ABC123 returns an ID of 1 which goes in "tv_id". Then I need to select from a different table x fields where id = 1 and display x results in the Company input box.

I'm hoping someone can point me in the right direction as I'm sure it's possible.

Thanks in advance
9:16 am on Apr 25, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



If you use ajax you could display the first input box only, then with the onchange event you could send a request to the server to pull in the values for the second input box and display it and so forth. If always going to have 2 levels of hierarchy set something like this on the initial screen:

<td><label>Registration</label></td>
<td><div class="ausu-suggest"><input type="text" class="w100" name="registration" id="registration" value="" /><input type="text" class="w50" id="tv_id" disabled="disabled" /></div></td>
<td><label>Company</label></td>
<td>Please Select Registration first</td>
7:58 pm on Apr 25, 2012 (gmt 0)



You've got the idea, I wasn't sure I'd explained it properly. I don't need to hide/limit the company input really.

Could you guide me in the right direction of how to send a request to the server to execute more code based on the results of the registration input.
8:58 am on Apr 26, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Ok it you could setup the company input like you do with the tv_id ie: disabled.

Here is some jQuery code that can help it hooks the input fields of a form and sends requests to the server when the enter key is pressed. When the server responds the server_output var contains the response. You can use that to decide whether or not to activate the other input boxes or set their values, or perhaps just override the html form with what was returned from the server etc.

html:
<div><form name="registration" action="http://www.example.com" id="reg_form"><table id="validate_input">
<td><label>Registration</label></td>
<td><div class="ausu-suggest"><input type="text" class="w100" name="registration" id="registration" value="" /><input type="text" class="w50" id="tv_id" disabled="disabled" /></div></td>
<td><label>Company</label></td>
<td><input type="text" class="w100" name="company" id="company" value="" /></td>
</tr>
</table></form></div>

js:
$(':input', $('#validate_input')).live("keypress", function(e) {
// Check if enter was clicked
if (e.keyCode == 13) {
$args = $("#reg_form").serialize();
alert($args);
$.post("script_to_handle_input.php", $args, function(server_output) {
// Handle server output here
alert(server_output);
});
}
});
2:25 pm on Apr 30, 2012 (gmt 0)



I can't get this to work, possibly because the registration input box is populated via an autocomplete script.

Maybe I need a completely new approach on how to achieve what I want to do.

Would an AJAX request be another way?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month