Well im trying to get my form to post data to a php file and get back the result. For some reason its not calling mail.php, but instead it just puts all the post data in the current url like

somesite.com/index.php?id=value&id=value..etc

instead of

somesite.com/[B]mail.php[/B]?id=value&id=value..etc

here is the ajax code

var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}
 
var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
 
function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var towho = document.getElementById("towho");
	var name = document.getElementById("name");
	var email = document.getElementById("email");
	var comment = document.getElementById("comment");
	var subj = document.getElementById("subj");
	var submitToDb = document.getElementById("submitToDb");
	
    xmlhttp.open("POST","mail.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("towho=" + towho.value + "name=" + name.value + "email=" + email.value + "comment=" + comment.value + "subj=" + subj.value + "submitToDb=" + submitToDb.value); //Posting txtname to PHP File
  }
}
 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("result").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

Any idea what is wrong?

Blindkilla,

Whilst I've not checked every line, your javascript looks ok, so I'm going to make a wild guess here.

Do you call ajaxFuntion() from a form's submit button or its onsubmit action? If so, then you need to inhibit the natural submit action of the form, which has (typically but not guaranteed) a default action of the current page - ie the action you are seeing.

I suggest you call your function as follows:

<form action="" method="" onsubmit="ajaxFunction(); return false">

Then all you need is a simple <input type="submit" value="Submit"> button in the form to trigger a call to ajaxFunction().

If I'm right, then that should fix it.

Airshow

Thanks for posting, I just tried what you suggested, it still isnt working and just adding the parameters onto the current pages url. :(

I dont understand why this isnt working.

Here is pastebin as well incase its easier to look at: http://pastebin.com/m67a0c333

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Pranker Mail - Free prank email tool!</title>
<meta name="keywords" content="prank, fake, email, spoof, pranks, anonymouse, joke, practical, funny" />
<meta name="description" content="Pranker mail is a free prank email tool that allows you to send fake emails to whoever you want, from an email you can make up! Makes for a funny joke." />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style2.css" />
<![endif]-->


<script type="text/javascript">
var time_variable;
 
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}
 
var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
 
function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var towho = document.getElementById("towho");
	var name = document.getElementById("name");
	var email = document.getElementById("email");
	var comment = document.getElementById("comment");
	var subj = document.getElementById("subj");
	var submitToDb = document.getElementById("submitToDb");
	
    xmlhttp.open("POST","mail.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("towho=" + towho.value + "name=" + name.value + "email=" + email.value + "comment=" + comment.value + "subj=" + subj.value + "submitToDb=" + submitToDb.value); //Posting txtname to PHP File
  }
}
 
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("result").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}

function checkform(){
	
	if(document.emailform.towho.value == ""){
		alert ( "Please fill in who you are sending the email to." );
		return false;
	}
	else if(document.emailform.name.value == ""){
		alert ( "Please fill in who the email is from." );
		return false;
	}
	else if(document.emailform.email.value == ""){
		alert ( "Please fill in the email the message is from." );
		return false;
	}
	else if(document.emailform.subj.value == ""){
		alert ( "Please fill in the subject." );
		return false;
	}
	else if(document.emailform.comment.value == ""){
		alert ( "Please fill in the message box." );
		return false;
	}
	return true;
}

function roll(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
</script>

</head>

<body>
 <div id="buy"><a href="buy.php" ><img src="images/buy.png" border="0"/></a></div>
 <!--  -->
  <div id="container">
     <center>
  <div id="navigation">
  <img id="logo" src="images/logo.png" />
  	<ul>
       	<li><a href="index.php" ><img src="images/homebut(a).png" border="0" /></a></li>
     	<li><a href="pranks.php" 
        onmouseover="roll('prank', 'images/pranksbut(a).png')" 
        onmouseout="roll('prank', 'images/pranksbut(u).png')" >
        <img name="prank" src="images/pranksbut(u).png" border="0"  />
        
        </a></li>
        <li><a href="top.php"
        onmouseover="roll('top', 'images/toppranksbut(a).png')" 
        onmouseout="roll('top', 'images/toppranksbut(u).png')" >
         <img name="top" src="images/toppranksbut(u).png" border="0" /></a></li>
     </ul>
  </div></center>
  
  <div id="c1"></div>
         <div id="c2"><center>
         	<div id="text">
            
            <div style="color: #06F; font-size: 24px; font-family: 'Comic Sans MS'; padding-left: 20px;">» Fool your friends!</div>
            <div style="color: #000; font-size: 18px; font-family: 'Tahoma'; padding-left: 42px; padding-bottom: 20px;">Pranker mail is a FREE email tool that allows you to send emails to whoever you want, from an email you can make up! </div>
            <div style="color: #06F; font-size: 24px; font-family: 'Comic Sans MS'; padding-left: 20px;">» How to use?</div>
            <div style="color: #000; font-size: 18px; font-family: 'Tahoma'; padding-left: 42px;">Simply fill out the forms below, click send and your emails will be sent.</div>
            
            
               
      <form action="" method="" onsubmit="ajaxFunction(); return false">
	<table style="width: 100%; padding-left: 50px; padding-top: 25px;">
    <tr>
    <td>
    <div>To (email): </div>
	<input type="text" name="towho" id="textbox" />
    </td>
	<td>
    <div>From (name): </div>
	<input type="text" name="name" id="textbox" />
    </td>
    </tr>
    <tr>
    <td>
    <div>From (email): </div>
	<input type="text" name="email" id="textbox" value="fake@fake.com" />
    </td>
    <td> 
    <div>Subject: </div>
	<input type="text" name="subj" id="textbox" />
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <div>Message:</div>
        <textarea name="comment" id="comment" rows="10" cols="50" wrap="on"></textarea>
    </td>
    </tr>
    <td >
    <div><input type="checkbox" name="submitToDb" checked="checked" />Add prank to prank database</div>
      
    </td>
    <td><div>	<input type="image"  src="images/send.png"  width="102" height="29" value="Submit" alt="Submit" />
</div></td>
    </tr>
    </table>


	</form>
          
            <div id="result">result</div>
            </div></center>
         
         </div>
  <div id="c3"></div>
  
  </div>
  
  <div id="footer">
  Pranker mail is to be used as a joke.  Pranker mail does not take any resposibility for the actions of its users.<br />&copy; Pranker mail 2009
  </div>
  <div id="key">prank - fake - email - spoof - pranks - anonymouse - joke - practical - funny</div>
  
  
  
  
  
  
  
  
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8947187-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>

</html>

BK,

HTML looks OK and maybe was before you did my suggested changes, so that may have been a red herring.

Firstly, are you file browsing on your computer? Or serving from a proper server? If you are file browsing then that might in itself explain the problem.

If not, then try this slight variant of your code - note I have changed from "POST" to "GET" and built the querystring with a leading ? and &ampersands between variables (and handle the response in a way I'm nore familiar with). It works OK on The Terminator (my development machine) served by Apache:

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object
  if(xmlhttp) {
  	var towho = document.getElementById("towho");
	var name = document.getElementById("name");
	var email = document.getElementById("email");
	var comment = document.getElementById("comment");
	var subj = document.getElementById("subj");
	var submitToDb = document.getElementById("submitToDb");
	var queryString = "?towho=" + towho.value + "&name=" + name.value + "&email=" + email.value + "&comment=" + comment.value + "&subj=" + subj.value + "&submitToDb=" + submitToDb.value;
/*	
    xmlhttp.open("POST","mail.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("towho=" + towho.value + "name=" + name.value + "email=" + email.value + "comment=" + comment.value + "subj=" + subj.value + "submitToDb=" + submitToDb.value); //Posting txtname to PHP File
*/
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState == 4) { handleServerResponse(xmlhttp.responseText); }
	}
	var url = 'mail.php' + queryString;
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
  }
}
 
function handleServerResponse(response) {
       document.getElementById("result").innerHTML=response; //Update the HTML Form element 
}

Airshow

BK,

I've changed my mind about file browsing. I was testing with an unsaved file in an editor with a preview facility. I think that was doing it. I've tried again with the file saved to disk and it behaves OK - file browsed or properly served.

It must have been the something in the code.

Airshow

OK, where did you get that url from? Server log?

Airshow

I got it directly from my browser, when i hit submit thats what the url changed to.

BK, then I think the problem is not on the main page itself.

If you've made my suggested changes and they work for me then it's got to be elsewhere. Try creating a new page x.html with just "TESTING" in it - nothing else, not even doctype. Then call x.html in your ajax xmlhttp call. See if that returns OK. If so then take a look inside mail.php.

Airshow

This article has been dead for over six months. Start a new discussion instead.