Calling click event doesn't submit form with Ajax

Question

I'm calling the click event with <button type="action" value="click"></button> to submit a form with Ajax. To submit form with button type submit works if I don't call the click event. So you can eliminate this possibility. I just need to call the submit function with click event which I doubt I've proceed it right.

The buggy code example:

// On document ready
$(function() {
  $('#update-button').click(function(){
    $('#update-cart').submit(function(ev) {

      // Prevent the form from actually submitting
      ev.preventDefault();
      // Get the post data
      var data = $(this).serialize();

      // Send it to the server
      $.post('/', data, function(response, textStatus, jqXHR) {
        if (response.success) {
        // YES
        } else {
        // Ooo NO
        }
      });
    });
  });
});

What exactly are you trying to do? As you have it now, when you click on #update-button, what it does it bind an submit event to #update-cart. Also I don't think type="action" is valid HTML. You probably want type="submit" or type="button". — gen_Eric
– gen_Eric, Commented Apr 19, 2017 at 18:11
@AkshayChawla Yes I did. I think it has to do something with javascript. — Dominik Krulak
– Dominik Krulak, Commented Apr 20, 2017 at 6:37
@AkshayChawla Yes.That is exactly what I did but still I couldn't see the expected result. So I've logged the process to console and I found out that the click event wasn't fired. I had one hidden input field with id="update-button". So You can post the answer. I'm glad you've helped! ;) — Dominik Krulak
– Dominik Krulak, Commented Apr 20, 2017 at 7:22

Akshay Chawla · Accepted Answer · 2017-04-20 08:40:52Z

1

// On document ready
$(function() {
  $('#update-button').click(function(event){
      // Prevent the form from actually submitting
      event.preventDefault();
      // Get the post data
      var data = $("#update-cart").serialize();

     // Send it to the server
     $.post('/', data, function(response, textStatus, jqXHR) {
       if (response.success) {
         // YES
       } else {
         // Ooo NO
      }
    });
  });
});

To avoid same id issues which take a hell lot of time to solve, its better to give proper naming conventions to DOM element.

Hidden field -> hdnElementName
Button -> btnElementName
Textbox -> txtElementName

Using such naming conventions will surely remove such mistakes. :)

edited Apr 20, 2017 at 8:40

answered Apr 20, 2017 at 7:52

Akshay Chawla

6131 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling click event doesn't submit form with Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related