Submit a form from inside an ajax success function that checks the values

Question

I've seen about 20 or more posts on the subject, but they either don't make sense to me or slightly different.

It's a pretty simple scenario as well. I have a form, when it submits, I do an ajax call to see if the email is not taken already by another user. If not taken I want to submit the form, if it is, don't submit form.

Here's the HTML

<form id='greatForm' action='godothat.php' method='post'>
<input type='submit' id='email'>
<button>Send</button>
</form>

The JS

$('#greatForm').submit(function(){


        // GET THE VARS
        var email = $('#email').val();


         $.ajax({ 
            data: { 'field1' : email  },
            type: 'GET', 
            dataType: 'json',
            url: 'url.php',
            beforeSend : function(){   },
            success: function(answer){   
                if(answer.error === false){
                         // Submit this form without doing the ajax call again
                } 
                if(answer.error === true){
                    // Not ok, don't submit this form
                }
            }
        });                               

        return false;   
    });

Thanks for any help.

** UPDATE ** Maybe I didn't phrase it right. What I mean is if the "answer.error === false" is true then the submit function should return true.

So on AJAX complete, if answer.error is false, the submit should be true and vice versa...

Does that make more sense?

You cannot submit the form again without another ajax call. You should handle this on the server side. — Dogbert, Jun 23 '11 at 16:52
@Dogbert -> I added an update. Basically I want the submit to return true if answer.data is false. What should I do to get that? — denislexic, Jun 23 '11 at 17:11

score 7 · Answer 1 · answered Jun 23 '11 at 16:58

7

Try to remove the "submit" event handler before submitting the form again:

if(answer.error === false){
    // Submit this form without doing the ajax call again
    $('#greatForm').unbind().submit();
}

answered Jun 23 '11 at 16:58

joern

27,354
7
90
105

basically unbind() then submit() will resend the data. If the file is big, will take twice of the time. – jerry2605 Aug 01 '19 at 07:29

score 7 · Accepted Answer · answered Jun 23 '11 at 18:17

$('#greatForm').submit(function(){
    if(!$(this).attr('validated'))
    {
     // GET THE VARS
     var email = $('#email').val();


      $.ajax({ 
        data: { 'field1' : email  },
        type: 'GET', 
        dataType: 'json',
        url: 'url.php',
        beforeSend : function(){   },
        success: function(answer){   
            if(answer.error === false){
                   $('#greatForm').attr('validated',true);
                   $('#greatForm').submit();
            } 
            if(answer.error === true){
                //display the errors
            }
        }
     });
     return false;  
    }                            
   return true;
});

This should do the trick, you just add a property validated to the form if it's already validated. And you validate the form only if the attribute is not preset otherwise you submit.

score 1 · Answer 3 · edited Jan 20 '13 at 16:13

1

If I understood correctly, you need echo treu/false from your php.url example:

$.ajax({

    type: 'POST',
    url: 'url.php',
    data: $("#your_form").serialize(),
    success: function(data) {
    if (data=='true') {                         
        ... 
    } else {

and in url.php

echo "true"; 
echo "false";

edited Jan 20 '13 at 16:13

kleopatra

51,061
28
99
211

answered Jan 20 '13 at 15:51

Naomi Fridman

2,095
2
25
36

score 1 · Answer 4 · answered Jun 23 '11 at 16:59

1

Technically, you can make it "submit" just by returning true. The browser will complete its normal form sending procedure. However, if you're want to do it with AJAX, you have to make another AJAX call to send the form. Each request is its own entity. It's not keeping the connection open for you.

However, @Dogbert is right. This type of thing should be done server side, once the form data is processed there. If you do that with AJAX you can still use the returned response to notify the user of any errors, but you should expect them to submit the form again once making the necessary corrections.

answered Jun 23 '11 at 16:59

Chris Pratt

232,153
36
385
444

> That s basically what I want to do. Return true if the answer.data is false and vice versa. How can I do that? – denislexic Jun 23 '11 at 17:12
1

I guess that's where the confusion lies. The typical process is to submit the form via AJAX to the server. The server validates and if it's good, inserts it into the database or whatever. Then, it sends a response back to the client indicating what happened: either success or some error. If it's success. You present the new view to the user and call it a day. If it's an error you notify the user and call it a day. The user then initiates a brand new submit with corrected data. – Chris Pratt Jun 23 '11 at 17:16
> Ok, so there's no solution to return true depending on results. Right? Thanks a lot for the help. – denislexic Jun 23 '11 at 17:21
1

Huh? You do essentially return true or false based on the results, but you figure out which to send at the server level and then send that as the response in JSON or XML format. The job of your javascript is not to determine if things went smoothly or not, it gets that direction of the server and simply responds accordingly. – Chris Pratt Jun 23 '11 at 19:34

Submit a form from inside an ajax success function that checks the values

4 Answers4

Linked