5 Replies - 4011 Views - Last Post: 29 January 2012 - 04:07 AM

#1 jibes  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-January 12

Simple jquery/ajax/php form post

Posted 25 January 2012 - 10:08 PM

I have a simple email signup form that posts back to the same page to process with PHP, Jquery, Ajax and HTML all on the same page. Upon submit, I verified the ajax request is posted with the email value in firebug, but the email is not updating in my database. I've verified all database credentials and made sure the PHP processing works even without jquery/ajax.

Could someone please give me some pointers? One thing I'm not sure about is if the data: "email=" + email part of my jquery ajax call is correct or not.

Thank you so much for any help!

<!----PHP PROCESSING---->
<?php
if(isset($_POST['submit'])){
	$email = $_POST['email'];
	if(empty($email)){
		echo "you must write your email!";
	}else{
		mysql_query("INSERT INTO tableSET email='$email'") or die(mysql_error());
		exit();		
	}
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
///////////Javascript
    $(document).ready(function() {

        //if submit button is clicked
        $('#submit').click(function(e) {
            e.preventDefault();
            var email = $('#email').val();

            $.ajax({
                url: location.href,
                type: "post",
                data: "email=" + email,
                success: function() {
                    $('#contact').html("<p>PASS</p>");
                }
            });
        });
    });
</script>
</head>
<body>
<!----HTML FORM---->
  	<div id = "contact" align="center">
	  <p>Signup</p>
	  <br />
	  	<form id="frm" name="frm" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
			<input name="email" id="email" type="text" />					
			<input type="submit" id="submit" value="Signup!" name = "submit" />
		</form>
	</div>
</body>			
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Simple jquery/ajax/php form post

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Simple jquery/ajax/php form post

Posted 25 January 2012 - 10:29 PM

Your AJAX query is not submitting any data with the name "submit", but your PHP code seems to be expecting it. If you are sending your PHP code an email, then check to see if the email is there, not a submit button.

It is in fact never a good idea to depend on the button being sent with the data, even in old-school form processing, because it may well not be sent with the data. Instead, always check to see if the data is there. That's the important part, not the button.

Also, it's not really a good idea to set your scripts up so that your AJAX calls are made to the same script you are on. It's an unnecessary maintenance headache. - In your case, if the email and submit buttons don't validate, the whole page is sent back through the AJAX request, because the only exit call in there is after the query.
Was This Post Helpful? 1
  • +
  • -

#3 jibes  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 25-January 12

Re: Simple jquery/ajax/php form post

Posted 25 January 2012 - 10:43 PM

View PostAtli, on 25 January 2012 - 10:29 PM, said:

If you are sending your PHP code an email, then check to see if the email is there, not a submit button.


Thank you for the response!

The email value is being stored in
var email = $('#email').val();
which I verified has a value on submit with an alert().

Could you elaborate further what specifically I should modify? I'm still a little confused, thank you!!!
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3718
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: Simple jquery/ajax/php form post

Posted 26 January 2012 - 12:18 PM

The "data" property in your $.ajax call defines what data is sent in the AJAX request. It doesn't matter what is in your HTML, or how exactly your Javascript reached the point where the AJAX call is made: if you do not specify in the "data" parameter that a "submit" value is to be sent, it won't be sent.

Your PHP code is written like some people like to write PHP code meant to receive data from an old-fashion HTML form. That is, it checks to see if the submit button is set - the one that old-fasion forms use to submit forms - before it tries to validate the actual data. -- However, your code is NOT using an old-fashion HTML form. It's using an AJAX request, where you MANUALLY set the data being sent. And nobody really bothers adding the submit button to that. It's a redundancy that you are better of without.


So, to fix this: rewrite your PHP code so that it ONLY checks the fields that YOU SET in the AJAX request. In that code, that would only be "email". - I would also advice you to put it in another file. Unlike with old-fashion forms, where processing things on the page where the form is could have certain advantages, when using AJAX those advantages don't exist, and doing it all on one page is just messy.
Was This Post Helpful? 1
  • +
  • -

#5 Jstall  Icon User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Simple jquery/ajax/php form post

Posted 28 January 2012 - 07:49 AM

Hi,

Instead of binding your form processing to the click event of the submit button you should use the submit event of the form. You should also use .serialize() to send your form data as it is much easier than manually assigning variables for each for input and it encodes the data for you.

Something like this:
        //when form submits
        $('#frm').submit(function(e) {
            e.preventDefault();
			//serialize the form 
            var data = $(this).serialize();

            $.ajax({
                url: location.href,
                type: "post",
                data: data,
                success: function() {
                    $('#contact').html("<p>PASS</p>");
                }
            });
        });



Hope this helps :)
Was This Post Helpful? 1
  • +
  • -

#6 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 795
  • View blog
  • Posts: 1,681
  • Joined: 30-January 09

Re: Simple jquery/ajax/php form post

Posted 29 January 2012 - 04:07 AM

You should also probably look into Mike Alsup's jQuery AJAX form library as well if you are looking to do AJAX forms. I have had no troubles with that library, it's very easy to understand as it takes all the parameters that .ajax() takes. Also, the big benefit is that it manages submission of forms with $_FILES variables.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1