reckdan Posted November 15, 2007 Share Posted November 15, 2007 Hello I have a web form with the following fields Class, Students and a search buttom. Now what i want to do is that, any time i change the value in the class field the students field should be populated with only students in that class and also any time i click on search it should search, it should search the database based on the value in the class and students fields. Now I tried to use the post method to do it, but its just not working. Now can any one give me a sample code using javascript and PHP to handle this problem. Thank you Quote Link to comment Share on other sites More sharing options...
axiom82 Posted November 15, 2007 Share Posted November 15, 2007 function get_xml_http_object (){ var xml_http = null; try { xml_http = new XMLHttpRequest (); } catch (e){ try { xml_http = new ActiveXObject ('Msxml2.XMLHTTP') } catch (e){ xml_http = new ActiveXObject ('Microsoft.XMLHTTP'); } } return xml_http; } function get_students(class){ xml_http = get_xml_http_object(); xml_http.onreadystatechange = get_students_state_changed; xml_http.open ('GET', 'search.php?class=' + class, true); xml_http.send (null); } function get_students_state_changed(){ if (xml_http.readyState == 4 || xml_http.readyState == 'complete'){ document.getElementById('students').innerHTML = xml_http.responseText } } <html> <body> <input type="text" name="class" onkeyup="get_students(this.value);"> <div id="students"></div> </body> </html> You just need to create a php page called search.php that will use $_GET['class'] as it's search paramter. Quote Link to comment Share on other sites More sharing options...
reckdan Posted November 15, 2007 Author Share Posted November 15, 2007 Thank you Axiom82 for your prompt reply but i think i need to make some clarification here, the class is the dropdown or combo box and the students is also a dropdown or combo box, and the search is a button. Now what i want exactly is that when i choose a class from the class combo box i want the students in that class to automatically populate the students combo box, so that i can choose a student name from the list in the student combo box. Also when i click on the search buttom then the search.php will then load with details based on what i chose from the class and student combo box. thank you. Hope i'm clear now Quote Link to comment Share on other sites More sharing options...
axiom82 Posted November 15, 2007 Share Posted November 15, 2007 <html> <body> <select name="class" onchange="get_students(this.value);"> <div id="students"></div> </body> </html> When the onchange javascript event handler is called, it will call the get_students function with the class dropdown menu's current value. This value is sent to a php script as a process in the background. The php script looks for a value (i.e. $_GET['class']) to search the database for students in the class that is selected. The second dropdown, the student dropdown, is actually dynamically generated in the php script called by the AJAX function get_students(). It is generated based on the result of a database search using $_GET['class'] because when get_students() is called, it passed a query string on the end of it's URL with the class value. Echo the code for the generated student dropdown. The echo will be sent back to JavaScript as xml_http.responseText and in the get_students_state_changed function, you will see I am assigned the responseText value as the innerHTML of a students <div> tag. Quote Link to comment Share on other sites More sharing options...
reckdan Posted November 15, 2007 Author Share Posted November 15, 2007 Thanks alot Axiom82 for the perfect explanation given. I will Try it and give you response on any outcome Thanks ones again. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.