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?

Recommended Answers

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 …

Jump to Post

Blindkilla, post your HTML. I'll have a look at it.

Jump to Post

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.

Jump to Post

All 10 Replies

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.

Blindkilla, post your HTML. I'll have a look at it.

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.