PHP form processing using JQuery not Working

Question

I'm processing a form using PHP and JQuery and it's not processing the way it should normally process. My HTML is:

    <form action="" method="POST" name="forgot_pass_form">
      <label><h3>Please Enter your email!</h3></label><br>
      <input type="text" name="email_pass" id="email_pass" />
      <input type="submit" name="submit" id="submit" value="Submit" />
    </form>

My JQuery code which is in the same page as HTML code:

<script type="text/javascript">
    $(document).ready(function($) {

        var email = $('#email_pass').val();

        $("#submit").live('click', function(){
                $.post('email_password.php', 
                {
                'email_pass' : email
                }, 
                function(data) {
                    alert(data);                
                });

                return false;
            });
    }); 
</script>

My PHP code which is on email_password.php:

<?php


    $email = $_POST['email_pass'];

    if(empty($email)){
        echo  'empty';  
    } else {
        echo 'Not'; 
    }
?>

The problem here is it always alert me with empty even if I've entered something in the text box

I even tried this way:

 if(empty($_POST)){
    echo 'empty';    
   } else {
    // process the form 
    $email = $_POST['email'];
    if(empty($email)){
        echo 'Email is empty';
    } else {
        echo 'Email is not empty';  
    }
}

By trying this way, it alerts me with Email is empty. Please help

what your network console says , is it posting "post" params? — Dimag Kharab, Mar 27 '14 at 12:23
I think it's `1.9` or `1.10`. The problem was that I was not using `var email` inside the `.live()` method. It's solved :) — user3293145, Mar 27 '14 at 12:27
@user3293145 Please check out my **[answer here](http://stackoverflow.com/questions/20150130/ajax-and-php-to-enter-multiple-forms-input-to-database/20150474#20150474)** for a thorough AJAX example — MonkeyZeus, Mar 27 '14 at 12:30
@MonkeyZeus What to use for `.attr('action')` if the form is submitting to itself using `form action=""`? — user3293145, Mar 27 '14 at 12:36
If you are following my example then **your** form should start like this `
` — MonkeyZeus, Mar 27 '14 at 12:38
No problem, I hope my example helps you going forward! Also, `$.post()` is just a wrapper-function which calls upon `$.ajax()` and defaults a lot of the parameters so technically speaking `$.post()` takes `.001%` more processing overhead lol. I personally find `$.post()` far too restrictive for my needs. — MonkeyZeus, Mar 27 '14 at 12:44
One last thing, check out **[this answer](http://stackoverflow.com/a/21617685/2191572)** for a guide to debugging AJAX calls because you will inevitably need it. — MonkeyZeus, Mar 27 '14 at 12:46

score 3 · Answer 1 · answered Mar 27 '14 at 12:19

3

When you try to capture a field value, it must be the same name. The name you have in your form is 'email_pass' and in your PHP code you are waiting for 'email'

This should be:

if(empty($_POST)){
    echo 'empty';    
   } else {
    // process the form 
    $email = $_POST['email_pass']; // The field form name
    if(empty($email)){
        echo 'Email is empty';
    } else {
        echo 'Email is not empty';  
    }
}

Sorry for my english :s

answered Mar 27 '14 at 12:19

wrivas

509
6
12

Sorry that was a silly mistake, but I still get the same response as before, nothing changes – user3293145 Mar 27 '14 at 12:20

score 2 · Accepted Answer · answered Mar 27 '14 at 12:17

2

use this code

<script type="text/javascript">
    $(document).ready(function($) {



        $("#submit").live('click', function(){
 var email = $('#email_pass').val();
                $.post('email_password.php', 
                {
                'email_pass' : email
                }, 
                function(data) {
                    alert(data);                
                });

                return false;
            });
    }); 
</script>

answered Mar 27 '14 at 12:17

Ananth

1,520
3
15
28

add the var email = $('#email_pass').val(); inside the $("#submit").live('click', function(){ – Ananth Mar 27 '14 at 12:19
What difference does it make? @user3293145 although not the solution, `.live()` is deprecated, your should upgrade your jQuery and use `.on()`. – AyB Mar 27 '14 at 12:22
@ I Can Has Cheezburger. i know but he is using old version – Ananth Mar 27 '14 at 12:23
I'm using `CMS` and even after upgrading `JQuery`, `.on()` doesn't work most of the time while `.live()` does – user3293145 Mar 27 '14 at 12:23
Yeah, it's asking me to wait for 2 minutes @Ananth – user3293145 Mar 27 '14 at 12:28

score 2 · Answer 3 · answered Mar 27 '14 at 12:21

2

The issue is that your making a $_POST call with jQuery and in that function you "post" under the new name email_pass. Update your PHP file to reference $_POST['email_pass'] and you'll be good to go.

answered Mar 27 '14 at 12:21

Sam Miller

166
5

score 1 · Answer 4 · answered Mar 27 '14 at 12:24

1

Use 0n() and get email value inside the click function

<script type="text/javascript">
    $(document).ready(function($) {

          $("#submit").on('click', function(){
                var email = $('#email_pass').val();
                $.post('email_password.php', 
                {
                'email_pass' : email
                }, 
                function(data) {
                    alert(data);                
                });

                return false;
            });
    }); 
</script>

answered Mar 27 '14 at 12:24

Sridhar R

20,190
6
38
35

Listening for the click of the button is improper. You must listen for form submission to properly catch the event in ALL browsers. `$('form[name="forgot_pass_form"]').on('submit', functione(){});` – MonkeyZeus Mar 27 '14 at 12:27
Would it make difference on different browser if `.on('click')` is used instead of `.on('submit')`? @MonkeyZeus – user3293145 Mar 27 '14 at 12:29
@user3293145 that is exactly what I said, yes. Listening for the click of a button is a different event compared to the submission of a form. Even though `click` is working for you, it is not 100% reliable. Listening for a submit is 100% reliable. – MonkeyZeus Mar 27 '14 at 12:33

PHP form processing using JQuery not Working

4 Answers4