Using AJAX to get response - but page is still refreshing

I am having issues with filling in a form and pressing submit to send my information to a database. The problem is that my page refreshes even though I am using AJAX to stay on the same page and receive a reply in "show_label".

I have tested to see if addCustomerFunc gets called by changing the show_label, and it does change! But still refreshes and I lose the message after it refreshes. I was hoping if someone could catch my mistake(s).

This is in my customer.php

<script type="text/javascript">

function addCustomerFunc(add_LN,add_FN,add_PN,add_DOB)
{
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("show_label").innerHTML=xmlhttp.responseText;
    }
  }

xmlhttp.open("POST","addCustomer.php",true);
xmlhttp.send("add_LN="+add_LN+"&add_FN="+add_FN+"&add_PN="+add_PN+"&add_DOB="+add_DOB);
}
</script>

    <p>Add New Customer:</p>
    <div align="center">
      <table width="337" border="1">
        <tr>
          <td width="154"><p>Last Name:</p>
          <p>First Name:</p>
          <p>Phone Number:</p>
          <p>Date of Birth:</p>
          <p>&nbsp;</p></td>
          <td width="167"><p align="center">
            <form>
                <input type="text" name="add_LN" id="add_LN" />
                <br/开发者_开发百科><br/>
                <input type="text" name="add_FN" id="add_FN" />
                <br /><br />
                <input type="text" name="add_PN" id="add_PN" />
                <br /><br />
                <input type="text" name="add_DOB" id="add_DOB" />
                <br /><br />
                <input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>
            </form>
            <div id="show_label"/>
          </p>
          </td>
        </tr>
      </table>
      </div>

addCustomer.php

<?php
$username="****";
$password="****";
$database="****";

$lastName=$_POST['add_LN'];
$firstName=$_POST['add_FN'];
$phone=$_POST['add_PN'];
$dob=$_POST['add_DOB'];
//$membership==$_POST['membership'];

mysql_connect("******",$username,$password);

@mysql_select_db($database) or die( "Unable to select database");


$query = "INSERT INTO customer (last_name, first_name, phone_no, date_of_birth, membership) VALUES ('$lastName', '$firstName', '$phone', '$dob', 'T')";

if (mysql_query($query)){
    echo "Thanks";
} else 
{
    echo "Failed to insert customer into database";
}

mysql_close();

?>

Also, am I passing the variables correctly in addCustomerFunc? Am I using "Post" correctly?

Thanks!

Edit: I am now having issues with passing the variables because it says: Undefined index: add_LN in C:\Users\ej\Desktop\cpsc471\presentation\addCustomer.php It adds blanks to my database though.

Since you are using a form, you need to make sure that you capture the submit event before it is allowed to proceed and refresh the page.

This should do the trick. (notice the return false)

<input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB); return false;"/>

Change the type of your button from:

submit to button

That way you stay on 1 page and the refresh will be gone :-)

why not to use jQuery $.post() or $.get()?

btw, use:

<input type="button" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>

instead of :

<input type="submit" name="add_Customer" id="New_Customer_Form" value="Add Customer" onClick="addCustomerFunc(add_LN, add_FN, add_PN, add_DOB)"/>