I have a problem with my AJAX function which is not being triggered. It seems like I'm doing everything fine but for some reason it's not triggered when the select box is changed:
Here is my Ajax function:
<script type="text/javascript">
function showSections(id){
if (id=="")
{
document.getElementById("MyDiv").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("MyDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getRets.php?sem=" + id, true);
xmlhttp.send();
}
</script>
here is the select box:
<select name='sub' id="sub" onchange="showSections(this.value)">
<option value="1">Pending</option>
<option value="0">Performed</option>
</select>
<div id="MyDiv">
some data
</div>
This is the gerRets.php file:
<?php
$numbVal = $_GET['sem'];
echo $numbVal;
?>
Can anybody point out to me my mistake? Apparently I just don't see it.
Related
I am doing some work in PHP. I have two php page
index.php
<html>
<head>
<script>
function getVote(int)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+int,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Is this correct? </h3>
<div id="poll">
<form>
Yes:
<input type="radio" name="vote" value="0">
<br>No:
<input type="radio" name="vote" value="1">
<input type="submit" value="Forward" onclick="getVote(value);">
</form>
</div>
</body>
</html>
on click of submit button I need to get the value of selected radio button and pass it to the function.
Please help me
call just a function in youe onclick inline...
<input type="submit" value="Forward" onclick="getVote();"> //here
and get checked radio value in your function..
var radiovalue= $('input[name="vote"]:checked').val()
try this
JAVASCRIPT
function getVote()
{
var radiovalue= $('input[name="vote"]:checked').val()
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+radiovalue,true);
xmlhttp.send();
}
HTML
<input type="submit" value="Forward" onclick="getVote();">
Provide action and method attribute to form first
<form action="index.php" method="post">
And than only you can get the value like below:
$vote = $_POST['vote'];
I hope this is what you are looking for.
try:
function getVote()
{
var int=document.getElementById("vote").value;
....
EDIT: noticed it is a radio input... so this won't work. You need something like:
function getRadioCheckedValue(radio_name)
{
var oRadio = document.forms[0].elements[radio_name];
for(var i = 0; i < oRadio.length; i++)
{
if(oRadio[i].checked)
{
return oRadio[i].value;
}
}
return '';
}
And then do:
function getVote()
{
var int=getRadioCheckedValue(vote);
....
Via jquery you can get value of selected radio like this:
$('input[name=vote]:checked').val()
Try changing those 2:
<form name="myForm">
onclick="getValue(document.myForm);"
then the function:
function getValue(form){
var value = '';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'radio') {
if(form.elements[i].checked == true) {
value = form.elements[i].value;
}
}
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll-vote.php?vote="+value,true);
xmlhttp.send();
}
Call the function without any value and then read out the radiobutton inbetween your function like this:
var rval = document.getElementsByName('vote');
for (var i = 0, length = rval.length; i < length; i++) {
if (rval[i].checked) {
alert(rval[i].value); // your value
}
}
HTML code :
<form>
<tr><td align="center">
<p><select size="1" id="breed_list" name="D1" onChange="editBreed(this.value);">
<option>Select Cattle Breed</option>
<?php while(list($id, $breed)=mysql_fetch_row($result1)) {
echo "
<option value=\"".$id."\">".$breed."</option>";
} ?>
</select></p>
</td></tr>
</form>
Javascript code :
<script type="text/javascript">
function editBreed(str){
alert("Made it to Edit Breed"+ str);
if (str=="" || str=="Select Cattle Breed") {
document.getElementById("animal_data").innerHTML="";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("animal_data").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","editbreed.php?d="+str+,true);
xmlhttp.send();
}
</script>
If I modify the select to read onChange="alert(this.value);">, it displays the correct record, for some reason though it's not going to the function and showing me the alert that's there.
Thanks
On the second to last line in your function, there is a syntax error that is causing the function not to run at all.
xmlhttp.open("GET","editbreed.php?d="+str+,true);
remove the + after str
xmlhttp.open("GET","editbreed.php?d="+str,true);
Im new to this ajax and javascript thing. What I want is first to popup a confirm box, if true then perform xmlhttprequest. Afterwards I want to redirect the user to a new page. Here is what I've got.
<script type="text/javascript">
function showUser(str)
{
var r=confirm("Delete this customer?");
if (r==true) {
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sletkunde.php?q="+str,true);
xmlhttp.send();
}
}
</script>
<form onclick="showUser(id.value); return false;" >
<input type="hidden" value="<?echo $id;?>" name="id">
<input type="button" value="tryk" name="knap">
</form>
<br>
<div id="txtHint"><b>something here</b></div>
And here is the sletkunde.php
<?
$q=$_GET["q"];
$slet = mysql_query("DELETE FROM Kunder WHERE KundeID = '".$q."'");
echo "hey"; // Just to see if it works
?>
The confirm box works, the mysql_query works, the echo "hey"; works. But how can I get it to redirect to kunder.php right after all of this (automatically).
Use location.href = "http://www.mysite.com/kunder.php" in your onreadystatechange function.
<html>
<head>
<script>
function sentAjax()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
//alert(xmlhttp.readyState);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementsByName('content') = xmlhttp.responseText;
}
}
xmlhttp.open("GET","resultPage.php",true);
xmlhttp.send();
}
</script>
<script name="content">
//should be assigned here
</script>
</head>
<body>
</body>
</html>
Below is the result from "resultPage.php"
<script type="text/javascript">
objTreeMenu_1.drawMenu();
objTreeMenu_1.writeOutput();
objTreeMenu_1.resetBranches();
</script>
I would like to assign the above script to the inside <script name="content"></script>. However, I have tired the document.getElementsByName('content') = xmlhttp.responseText; which is wrong.
Is there anyone can help me? Many thanks!
document.getElementsByName('content') only returns the elements.
you should use
document.getElementsByName('content')[0].innerHTML = xmlhttp.responseText
This is my code:
<?php
$q=$_GET["q"];
require("../db.php");
$res_prop_name = mysql_query("select * from property where prop_short='$q'");
$row_prop_name = mysql_fetch_assoc($res_prop_name);
echo $row_prop_name['prop_name'];
?>
<script type="text/javascript">
function showProperty(str)
{
if (str=="")
{
document.getElementById("prop_name").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("prop_name").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax/get-property-name.php?q="+str,true);
xmlhttp.send();
}
</script>
<select id="prop_short" name="prop_short" onchange="showProperty(this.value)">
<option value="">Select a property</option>
<option value="Property2">Property1</option>
<option value="Property2">Property2</option>
</select>
<input type="text" id="prop_name" name="prop_name" onChange="showProperty(this.value)">
The answer to my question must be very simple however I just can't make it work.
I understand that in the ajax script the innerHTML feeds the text into a div that has the id prop_name for example. I tried it and it worked. But how can I feed the returned text into a input type="text" field? I've tried innerText instead of HTML but it doesnt work.
Putting the comment as an answer: For input elements it's document.getElementById("xxx").value instead of .innerHTML.