How to use input type=submit with AJAX form

Question

I have the following AJAX script that I am using to return a random PIN number to a user when they register their email address:

HTML

<form class="form-inline" role="form" id="formRegister">
    <div class="form-group">
        <label class="sr-only" for="srEmail">Email address</label>
        <input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
    </div>
    <button type="button" name="srSubmit" onClick="getSubmitResponse();" class="btn btn-default btn-lg">Generate PIN</button>
</form>

JS

        function getSubmitResponse(){
            var emailId = $("#srEmail").val();
            $.ajax({
            type: "POST",
            url: "register-ajax-call.php",
            data: { srEmail: emailId, submiType: 'srSubmit'}
            })
            .done(function( html ) {

                if(html.search('PIN:')!=-1){
                    window.location = "success.php?response="+html;
                }else{
                    $( "#results").empty();
                    $("#results").append( html );
                }
            });
        }

Question: how can I use button type="submit" rather than type="button" in this situation? My reasoning is that this is better markup for form validation and more consistent behaviours (e.g. when a user hits ENTER).

I am also using jQuery if that is a solution.

score 3 · Accepted Answer · answered Sep 21 '13 at 20:19

3

You can use .submit() method of jQuery like this

 $("#formRegister").submit(function(event) {
      var form = $( this ),
      url = form.attr( 'action' );
      var posting = $.post( url, { srEmail: ("#srEmail").val() } );
      posting.done(function( data ) {
        $("#results").append( html );
      });
    });

However you should think of giving the validation in the Client side, before submitting it. Since you already use jQuery, I would suggest you to take a look a jQuery.validate incase your form has more attributes.

answered Sep 21 '13 at 20:19

Praveen

55,303
33
133
164

thanks, how would that link to my register-ajax-call.php script? – alias51 Sep 21 '13 at 20:25
@alias51 replace the url with you `register-ajax-call.php` I missed to say about [`jQuery.post()`](http://api.jquery.com/jQuery.post/) – Praveen Sep 21 '13 at 20:28
thanks, you mean url = form.attr( 'action' ); should be url = register-ajax-call.php? – alias51 Sep 21 '13 at 20:32
also, how would the return to success.php work with this method? thanks – alias51 Sep 21 '13 at 20:37
@alias51 as you have in your question, you can do the same thing in `.done(...` – Praveen Sep 21 '13 at 20:41
@alias51 yes you're right. `url = "register-ajax-call.php"; var posting = $.post( url, { srEmail: ("#srEmail").val() } );` – Praveen Sep 21 '13 at 20:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37801/discussion-between-alias51-and-user1671639) – alias51 Sep 21 '13 at 21:00

Black Sheep · Answer 2 · 2014-05-16T18:37:20.960

1

You can do like this:

jQuery:

$("#formRegister").on("submit", function() {

   $.ajax({ 

       // Rest of code 
   });

return false;
});

edited May 16 '14 at 18:37

answered Sep 21 '13 at 20:18

Black Sheep

6,604
7
30
51

Is it possible to use a – alias51 Sep 21 '13 at 20:22

score 1 · Answer 3 · answered Sep 21 '13 at 20:20

Just use onsubmit event and not onclick event.

http://www.w3schools.com/jsref/event_form_onsubmit.asp

Then in your ajax function just return false; like that the form will not be send like usually and the browser will not refresh the page.

Hope it helps

How to use input type=submit with AJAX form

3 Answers3