jQuery AJAX redirects

Question

I have the following form (content has been removed due to irrelevance):

<form id="ticketinfo" class="form-horizontal" action="<?php echo base_url('customerinfo'); ?>" method="post">
  <fieldset>
    <input type="submit" value="Add Ticket" class="btn-style-green" id="btnAdd" />
    <input type="submit" value="Next >>" class="purchase-your-ticket col-md-3" id="next">
  </fieldset>
</form>

This is my JavaScript:

    $('#btnAdd').click ( function () {
    $('form#ticketinfo').submit (

        function (event)    
        {
            event.preventDefault(); //Avoid that the event 'submit' continues with its normal execution, so that, we avoid to reload the whole page
            $.post(
                url+"ticketinfo/add", //The variable 'url' must store the base_url() of our application
                $("form#ticketinfo").serialize(), //Serialize all the content of our form to URL format

                function (response) 
                {
                }
            );


    });
});

What it does:

When I click on #btnAdd it submits the form via AJAX with the specified URL. When I click #next it makes a regular (not AJAX) post to the target URL specified in the form's "action" executes a block of code and redirects me to another page.

Both buttons work the way they should that is until after I click #btnAdd. When I click #next after I have clicked #btnAdd the form submits via AJAX to the URL specified in the jQuery function instead of making a normal post to the server.

In short #next performs the job of #btnAdd if I click #btnAdd first.

What both buttons should really do:

`#btnAdd` - submit form via AJAX

`#next` - submit form via regular post and redirect user.

I should also add that I want the buttons validation events to be triggered when the form submits either way, instead of having to write extra code to handle form validation.

Yes i am trying to arrange them properly right now give me a minute. — Blank EDjok, Sep 24 '14 at 16:43
When you click on `#btnAdd` the first time, you change the form's submit handler with `$('form#ticketinfo').submit()`. Why are you changing the submit handler if that's not what you want the submit button to do? — Barmar, Sep 24 '14 at 16:45
In general, it's rarely right to bind one event handler inside another event handler. Especially if you don't have something else unbinding it -- otherwise, you end up with multiple handlers if the outer event occurs multiple times. — Barmar, Sep 24 '14 at 16:47

score 2 · Answer 1 · answered Sep 24 '14 at 16:44

2

When you click #btnAdd you're adding a new submit handler to the form. (One which prevents the default action of the submit event.) From that point on, any submit action invoked on that form will use that handler.

It doesn't look like you really need to override the default submit handler. So instead of overriding it, just perform your logic directly in the click handler for #btnAdd:

$('#btnAdd').click(function() {
    $.post(
        url+"ticketinfo/add", //The variable 'url' must store the base_url() of our application
        $("form#ticketinfo").serialize(), //Serialize all the content of our form to URL format
        function(response)
        {
            // you'll probably want to handle the response somehow here
        }
    );
});

Also make your button a regular (non-submit) button:

<input type="button" value="Add Ticket" class="btn-style-green" id="btnAdd" />

That way you're not messing with the default submit action of the form. You have one button which does one thing and another button which does another thing.

answered Sep 24 '14 at 16:44

David

208,112
36
198
279

Thank you but have required fields in my form that do not get triggered when i change my button type from "submit" to "button" – Blank EDjok Sep 24 '14 at 17:09
@BlankEDjok: What currently performs the validation logic? Ideally the `click` handler could invoke that validation logic explicitly and proceed only if it passes. The implementation details may change based on other requirements outside the scope of the question, but the base concept still remains. Don't override the `submit` handler if other buttons need to use it. – David Sep 24 '14 at 17:12
I am using the default html5 input validation by adding the 'required' attribute that gets executed when a form is being submitted. – Blank EDjok Sep 24 '14 at 17:32
Your answer was helpful but i saw Daryl's answer first. Thank you for you help though. :) – Blank EDjok Sep 24 '14 at 17:46

Daryl Ginn · Accepted Answer · 2014-09-24T17:09:10.823

1

Don't worry about using the submit handler, just use the $.post handler.

var form = $('#ticketinfo');

$('#btnAdd').on('click', function(e) {
  // Prevent submit.
  e.preventDefault();
  // Send request.
  $.post(url + 'ticketinfo/add', form.serialize(), function(response) {
    // ... Handle the response.
  });
});

edited Sep 24 '14 at 17:09

answered Sep 24 '14 at 16:47

Daryl Ginn

1,394
9
14

Sorry, I've been writing Go lately. Fixed. – Daryl Ginn Sep 24 '14 at 17:09
It works now but can you please tell me how i can trigger the form's validation event using your method, i do not want the post to be made if the form has empty fields. – Blank EDjok Sep 24 '14 at 17:19
What validation event? Are you using a third-party plugin? You would handle any kind of validation after `e.preventDefault()` and before `$.post`. – Daryl Ginn Sep 24 '14 at 17:28
No i am using the default html5 input validation by adding the 'required' attribute. – Blank EDjok Sep 24 '14 at 17:37
1

It's alright, i found a solution to that here --> http://stackoverflow.com/questions/15713491/html5-validation-before-ajax-submit Thanks alot for your help. :) – Blank EDjok Sep 24 '14 at 17:44

score 1 · Answer 3 · answered Sep 24 '14 at 16:52

Your javascript is adding an event handler to the form submit event. So whenever the form is submitted, your ajax submit code will be triggered, regardless of what button is clicked to submit the form.

One quick way around this would be to remove the event handler, using jquery's off() function when you click the "Next" button.

for example:

$('#btnNext').click ( function () {
    $('form#ticketinfo').off("submit");
});

However,

If you have 2 actions: Add and Next, you would probably be better off having two forms. One for adding and one for going to the next screen. This would solve the problem without any javascript work-arounds.

Oh okay so the 2nd form will only contain the next button? I think that will work. — Blank EDjok, Sep 24 '14 at 17:11

score 0 · Answer 4 · answered Sep 24 '14 at 16:47

$('form#ticketinfo').submit (

            function (event)    
            {
              ...
            }
);

This changes the onsubmit event handler of your form.

Try this to also submit your form.

$('#btnAdd').click ( function () {
    $('form#ticketinfo').submit (function (event)   { 
        //CODE
    });
    $("form#ticketinfo").submit() //submits your form
});

jQuery AJAX redirects

4 Answers4