When the page is first loaded, the javascript works well. But after I make a ajax call(I think it should be ajax?), the javascript is not working. I see some post in stackoverflow having similar title but i think it is not similar to my problem actually.
Details of my work :
To make a new appointment of students. I need to select name(in dropdown) of the student, subject he/she wanted(fixed text and manual input in radio/ select and manual input in radio), corresponding tutor and fee. So after the user has set the student name, it should be change to the first choice subject and corresponding tutor and fee. After picking student, the user need to choose the subject (maybe from dropdown or radio).
- pick name of student in first dropdown select
- onchange -> ajax call -> parse response -> set entire
<p>
code of block of choosing subject (since it is a mixed of many things, i don't think it is good to set those input and select separately) - pick the subject
my javascript works for first loaded page, but not after changing the name of student. (i am now trying to alert only)
code :
html
<p id="desc">
<?php
if (empty($row['desc02'])){ // only got one subject : dropbown list
// mysql query here
echo "<input id=\"desc01\" type=\"radio\" name=\"description\" class=\"addtuteeradio\" checked/><label for=\"desc01\">";
echo "<select id=\"description\" name=\"description\" class=\"apptbigselect\" required>";
while ($row = mysql_fetch_assoc($result)){ // looping all matching
echo "<option value=\"".$row['description']."\"";
if (strcmp($row['description'], $pref_description) == 0) echo " selected";
echo ">".$row['description']."</option>";
}
echo "</select>";
echo "</label>";
echo "<input id=\"desc04\" type=\"radio\" value=\"manual\" name=\"description\" class=\"addtuteeradio\"/><label for=\"desc04\"><input id=\"desc04text\" type=\"text\" name=\"desc04\" placeholder=\"or manual input\" class=\"apptbiginput\" ></input></label>";
}
else { // more than one subject : radio button
// mysql query here
echo "<input id=\"desc01\" type=\"radio\" value=\"$desc01name\" name=\"description\" class=\"addtuteeradio\" checked/><label for=\"desc01\"><font size=\"5\">$desc01name</font></label>";
echo "<input id=\"desc02\" type=\"radio\" value=\"$desc02name\" name=\"description\" class=\"addtuteeradio\"/><label for=\"desc02\"><font size=\"5\">$desc02name</font></label>";
echo "<input id=\"desc04\" type=\"radio\" value=\"manual\" name=\"description\" class=\"addtuteeradio\"/><label for=\"desc04\"><input id=\"desc04text\" type=\"text\" name=\"desc04\" placeholder=\"or manual input\" class=\"apptbiginput\" ></input></label>";
}
?>
</p>
javascript (or ajax?)
<script type="text/javascript" >
$(document).ready(function() {
$("#tutee_select").bind("change", function() {
$.ajax({
// send request here
success: function(response){
// parse response here
// the following variable are set in the above area
$("#tutor_select").val(tutor_id);
document.getElementById("desc").innerHTML = descHTML; // just like the html as mentioned
$("#fee_input").val(fee);
}
});
});
$('input:radio').click(function() {
if (document.getElementById("desc01").checked) alert("checked 01");
else if (document.getElementById("desc02").checked) alert("checked 02");
else if (document.getElementById("desc03").checked) alert("checked 03");
});
});
</script>
I think I describe it a bit messy, hope you can understand..