Ajax form sending request on page load

I am new to ajax and am having what i think is a small problem. I was wondering if any one would be able to help me?

The Problem:

In my index.php file within the HEAD tag i have the following:

<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 name = document.getElementById("name");

    var date1 = document.getElementById("date1");

    var date2 = document.getElementById("date2");


    xmlhttp.open("POST","http://heathrowsafeparking.co.uk/modules/mod_hspbooking/calc_days.php",true); //calling testing.php using POST method

    xmlhttp.onreadystatechange  = handleServerResponse;

    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');开发者_运维知识库

    xmlhttp.send("name=" + name.value + "&date1=" + date1.value + "&date2=" + date2.value);



  }

}



function handleServerResponse() {

   if (xmlhttp.readyState == 4) {

     if(xmlhttp.status == 200) {

       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 

     }

     else {

        alert("Error during AJAX call. Please try again"); 

     }

   }

}

</script>

In the BODY i have the following; the submit button calls the function onclick:

<form id="hspcalc">

<table width="162" border="0" align="center" cellpadding="2" cellspacing="2" id="quoter" style="width:162px; margin:auto; font-family:verdana; font-size: 12px; background-color:#293a4b; color:#fff;"

>



<tr>

  <td  height="" align="center" valign="top" style="padding-left:;">

    <p style="margin-top:;">

    <img src="http://heathrowsafeparking.co.uk/images/stories/getquote_but.png" border="0"  /><br />

    <div id="message" name="message"></div> 

    Your Name:<br />

      <input name="name" type="text" class="rounded" id="name" />

      <br />

      <br />    Date of Departure:<br />

      <input name="date1" type="text" class="rounded" id="date1" onfocus="showCalendar('',this,this,'','holder1',0,30,1)" value="" />

      <br />

      <br />

      Date of Arrival (Return):<br />

      <input name="date2" type="text" class="rounded" id="date2" onfocus="showCalendar('',this,this,'','holder2',0,30,1)" value="" />    

      <br />

        <input type="button" value="Submit" onClick="ajaxFunction();" />

    </p>

    </td>

</tr>

</table>

</form>

This works well, however, when i call the index.php file via an inclusion, eg:

<?php include("modules/mod_hspbooking/index.php"); ?>

... i find what seems to be the page submitting (calling the function) onload, instead of waiting for the user to click the submit button.

I cant seem to find a solution and would appreciate if anyone could lend a hand by having a quick look and providing any recommendations. Please visit this URL for the problem in action (right hand side reading "unfortunately, we are...").This should display the form, waiting for the user input and click of the submit button.

http://heathrowsafeparking.co.uk

To see the form running stand alone and working well (i.e. without calling via an include) please visit here:

http://heathrowsafeparking.co.uk/modules/mod_hspbooking/index.php

For reference the closing line of my "calc_days.php" file echos a message for the user which is displayed in a div called "message":

Thanks in advance for any help and support.

Regards

Tom

This doesn't appear to be an ajax issue, no request occurs after loading the page from the first link, so your assumption that it is automatically submitting is a mistake. You should review your php code to check how the module determines whether the form has been submitted, as it appears to always be following that code path when embedded.

You should also tag your question for php.

Update: Having seen some more of the code, the problem turned out to be the configuration of a Joomla module, and was indeed server side.

Use jQuery to attach the event on the object like:

$(document).ready(function() {

$('#ElementName').click(function(){.... You AJAX CALL HERE...});

});