AJAX - sending data to php file does not work

Question

I am still new to jQuery, AJAX and PHP.

I was wondering what I can do wrong here. I take information about the client and try to return a confirmation message on the same page.

So, the problems that I have are: 1) Pressing the submit button refreshes my page? Why?

2) I have a submit button. How can I change the text of this with addCustomer.php results?

3) Is it good to have javascript and php code in the same file in the customer.php file?

Edit: I also use Firefox Tamper Data Addon - when I click the "Submit" button, for some reason the data is not sent.

Customer.php

<script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function() { $.ajax({ type : 'POST', url : 'addCustomer.php', dataType : 'json', data:{ add_LN : $('#add_LN').val(), add_FN : $('#add_FN').val(), add_PN : $('#add_PN').val(), add_DOB : $('#add_DOB').val() }, success : function(data){ //I want to change the "confirmMsg" to the string given back from addCustomer.php } } } } </script> <p>&nbsp;</p> <p>Add New Customer:</p> <div align="center"> <form> <table width="396" border="1"> <tr> <td width="133"><p>Last Name:</p> <p>First Name:</p> <p>Phone Number:</p> <p>Date of Birth:</p></td> <td width="144"><p> <input type="text" name="add_LN" id="add_LN" /> </p> <p> <input type="text" name="add_FN" id="add_FN" /> </p> <p> <input type="text" name="add_PN" id="add_PN" /> </p> <p> <input type="text" name="add_DOB" id="add_DOB" /> </p> </td> <td width="97"><input type="submit" name="submit" id="submit" value="Add Customer" /></td> <div id="confirmMsg"/> </tr> </table> </form> </div> <p>&nbsp;</p> </div> </div> 

addCustomer.php

 <?php $username="******"; $password="******"; $database="******"; if (isset ($_POST['add_LN'])) $lastName=$_POST['add_LN']; else die("Last Name not passed in POST"); if (isset ($_POST['add_FN'])) $firstName=$_POST['add_FN']; else die ("First Name not passed in POST"); if (isset ( $_POST['add_PN'])) $phone=$_POST['add_PN']; else die("Phone Number not passed in POST"); if (isset ($_POST['add_DOB'])) $dob=$_POST['add_DOB']; else die("Date of Birth not passed in Post"); //$membership==$_POST['membership']; mysql_connect("dbs4.cpsc.u.ca",$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(); ?> 

Many thanks for the help!

Answer 1

Good to answer your questions in order:

• You can check Firebug (you use Firebug, right?) In the Console tab to see that addCustomer.php is the endpoint called by your Ajax request. Otherwise, you can add the following code to your scripts:

   $('#confirmMsg').ajaxComplete(function(e, xhr, settings) { $(this).text('The response from your page is ' + xhr.responseHTML); }); 

• I assume your question here is: "I have a div under my submit button ...". Try the following command (which is an abridged version of the full Ajax method):

   $.post('addCustomer.php', { add_LN : $('#add_LN').val(), add_FN : $('#add_FN').val(), add_PN : $('#add_PN').val(), add_DOB : $('#add_DOB').val() }, function(data){ $('#confirmMsg').text(data); }); 

• Finally, yes - it is normal that your script and PHP code is on the same page. PHP code is executed on the server before it is displayed in your browser, and JavaScript runs on the client side, executing it after the page is delivered.

Answer 2

I suggest you change dataType: 'json' to dataType: 'text' , this may be what jQuery disables.

And change your success handler to

 success: function(data){ $("#confirmMsg").html(data); } 

Answer 3

1) you can use the "preventDefault" function for the click function. 2) you can add a success message by simply displaying the div "confirmMsg" (first hide it with css) 3) if this works for you, this is oz. but I myself try to store all the code in only one place, for example. "main.js"

See code: ^ my changes ^ "just delete ^ to make it work :)"

 <script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function(^e^) { ^e.preventDefault();^ $.ajax({ type : 'POST', url : 'addCustomer.php', ^data: $('form').serializeArray(),^ success : function(data){ ^$('#confirmMsg').show();^ } } } } </script> 

I think this should do the trick :) I added the serializeArray function to make it more dynamic, because if you have more input fields, you no longer need to change the js code. http://api.jquery.com/serializeArray/

You can see what the form submits to open firebug first and reload the page, then put the fields and then submit them. You will see some change on the console tab;)

Hope this helps you.

Answer 4

The problem was not in the head of this file. He fixed all my problems, but not sure why. Thanks to everyone who contributed.

 <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#submit').click(function(e) { $.ajax({ type : 'POST', url : 'addCustomer.php', dataType : 'json', data:{ lastName : $('#add_LN').val(), firstName : $('#add_FN').val(), phone : $('#add_PN').val(), dob : $('#add_DOB').val() }, success : function(data){ if (data.error === true){ alert("there was an error in the post layer"); } else { $('#confirmMsg').html(data); } }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); return false; }); }); </script>