CODEWITHSUNDEEP
javascriptjqueryjquery-eventspreventdefault
Bart Zweers
Bart Zweers

Reputation: 117

jQuery override event.preventDefault()

I have a form that, when submitted, goes through the usual e.preventDefault() and sends an ajax request instead. However, if this ajax request returns a certain condition, I want the form to be submitted normally. How do I achieve this?

// Submit handler
$(".reserveer_form").submit(function(event){
  event.preventDefault();

  $.ajax({
    url: $(this).attr("action"),
    data: $(this).serialize(),
    success: function(data) {
      if($(".messagered",data).length > 0){
        var errors = $(".messagered",data);
        $(".gegevens").before(errors);
      } else {
          // SUBMIT THE FORM!
      } 
      
    }
  });

})

Upvotes: 3

Views: 2638

Answers (3)

Bergi
Bergi

Reputation: 665090

You can use the submit() method or forms:

$(".reserveer_form").submit(function(event){
  event.preventDefault();
  var form = this,
      $form = $(form);

  $.ajax({
    url: $form.attr("action"),
    data: $form.serialize(),
    success: function(data) {
      var errors = $(".messagered", data);
      if (errors.length > 0){
        $(".gegevens").before(errors);
      } else {
        form.submit();
      }
    }
  });
})

However, this seems to be a strange ajax request. First, you send the form (serialized, via ajax) to the server, and when the response contains no errors you send it again? The server would process it twice (and act twice, depending on your form). Also, the user does not get a message that his input is already processed - he clicks "submit", and it always takes a time until it is visibly submitted (where he even could change some input).

Upvotes: -1

user1106925
user1106925

Reputation:

Invoke the native submit method on the form, so that it doesn't trigger the jQuery handler.

$.ajax({
    context: this, // <-- set the context.
    url: $(this).attr("action"),
    data: $(this).serialize(),
    success: function (data) {
        if ($(".messagered", data).length > 0) {
            var errors = $(".messagered", data);
            $(".gegevens").before(errors);
        } else {
            this.submit(); // <-- submit the form
        }
    }
});

Upvotes: 6

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Since your comment says you change a form variable, you could start your submit handler by checking that same form variable. If it is changed, just return true. If not, continue with the current handler.

Upvotes: 1

Related Questions