Reputation: 794
i was supposed to make a dynamic select box where the choices of the doctors name depends on which is selected in another select box namely specialty.
heres the html
<select name="docSpec" id="docSpec" onChange="getSpecialty('getSpec.php?spec='+this.value)">
<option>pick a specialization</option>
<option value="General">General</option>
<option value="pediatrics">pediatrics</option>
<option value="Physician">Physician</option>
<option value="Cardiologist">Cardiologist</option>
<option value="Pulmonary">Pulmonary</option>
</select>
<div id="getDoc"> <!-- the contents from getSpec.php are displayed in this div! -->
<select>
<option>select doctor</option>
</select>
</div>
still in the same file, heres my javascript..
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSpecialty(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('getDoc').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
i have a separate file for the request which contains this named getSpec.php
<?php $spec=$_REQUEST['spec']; // i converted javascript variable to php by passing it to url
require_once('dbcon.php');
$query="select doctorName from doctors where specialty= '$spec'"; // this is why i passed it with jquery
$result=mysqli_query($conn,$query);
?>
<select name="doctor">
<option>Select doctor</option>
<?php
while( $row = mysqli_fetch_row($result)) {
echo "<option value='$row[0]'>$row[0]</option>"; // for contents of the dropdown
} ?>
i passed the javascript variable and converted it to php in another page getSpec.php with this code but the problem now is i cant get the value from the selected of
<select name="docName>
. its in another page name getSpec.php is there a way i can get it?
Upvotes: 0
Views: 1980
Reputation: 235
What is your browser? you can't rely on innerHtml when manipulating DOM. it works differently on each browser, also IE handles XMLHTTPRESPONSE differently than webkit based browsers. I think it is "complete" or "completed" instead of 4.
you tagged your question with jquery, why not use this library for your problem. success handler of $.get and $.ajax and $("some css selector").html('your new html') are good tools.
Edit: I'm adding more details as were requested.
As you asked you can use code below to get innerHtml of select & getDoc: ('#' id for id and '[sth=?]' for equality of attributes)
var old_get_doc_innerHtml = $('#getDoc').html();
var old_select_innerHtml = $('select[name="doctor"]').html();
specifically for your getSpecialty(strURL) code use:
function getSpecialty(strURL) {
var jqxhr = $.get(strURL, function (data) {
// runs only if http fetch has succeeded.
$("#getDoc").html(data);
alert("Load was performed.");
})
.done(function () {
// another success implementation type
})
.fail(function () {
// runs only if http fetch has failed.
})
.always(function () {
// runs always both in fail and success.
});
}
Ok, a little code brief:
$ is the jQuery's operator, you can use static functions using $.someFunction()
.
jQuery's element selector uses a 'CSS Selector' String and the syntax is: $('CSS_SELECTOR')
.
By using it you can select all 'label' tags of your page: $('label')
or 'input' tags having type='text' $('input[type="text"]')
or more. see API Doc selector Page
After selecting your element(s) with css_selector, you can run element specific functions like html()
.
jQuery never returns void instead it returns element Object so we can use every manipulation function on our variables / DOM elements without using ';'. I used this concept for the jqxhr
variable (inside: getSpecialty(strURL), jqxhr was return object of method $.get), where I called .done(...)
, .fail(...)
, .always(...)
of jqxhr
.
Upvotes: 1