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.
Related
I have an AJAX script that used to replace an entire div with new html including the <input> markup:
<script>
function show_locations(str) {
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) {
var a = xmlhttp.responseText;
a = JSON.parse(a);
document.getElementById('locations_dropdown').innerHTML=a.location;
document.getElementById('dm').innerHTML=a.dm;
document.getElementById('dm_email').innerHTML=a.dm_email;
}
}
xmlhttp.open('GET','includes/get_locations.php?d='+str,true);
xmlhttp.send();
}
</script>
The document.getElementById('dm_email').innerHTML=a.dm_email;').innerHTML=a.dm_email; would replace the <div id=dm_email></div> contents with a new <input> markup which would include the new email value in value="" here:
<div id="dm_email">
<input type="email" value="">
</div>
But, now I know that sending html markup through json is a bad practice, so how can I change my AJAX script above to replace just the value of the input?
I tried this:
document.getElementById('dm_email').value=a.dm_email;
But it doesn't work. Any ideas?
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.
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);
I want to post the field values entered in this code to the page ajaxpost.php using Ajax and then do some operations there. What would be code required to be written in ajaxpost.php. Also woithout using any js file/jquery
Here is the code of page in which fields are entered, I would like to know what would be the code to be written in ajaxpost.php
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
var zz=document.f1.dd.value; //alert(zz);
var qq= document.f1.cc.value;
xmlhttp.open("POST","ajaxpost.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("dd=zz&cc=qq");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<form name="f1">
<input type="text" name="dd">
<input type="text" name="cc">
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</form>
</body>
</html>
I think you are looking for bare bones php and ajax for which there are tons of tutorials such as this one, which is quite close to what you are looking for.