CODEWITHSUNDEEP
javascriptjqueryforms
Ziggy
Ziggy

Reputation: 22365

Given a form with multiple submit buttons, can I control them individually?

I have a form with two submit buttons: one updates the quantity of items in the cart, the other lets the user proceed to checkout. If there is no item in the cart that is a "shipping" item, then I would like the user not to be able to checkout. I would still like the user to be able to update the quantity.

Originally I used this javascript:

  $('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
    }
  });

I soon realized that this also disabled the update quantity button.

My initial thought was to catch the click event from just the button I want to deal with, and preventDefault on it. This doesn't seem to prevent the submit from happening though. Next I thought that perhaps e, the event, might have a field specifying the event's origin -- then I would be able to add a condition to the above submit code. I was not able to find such a field though (and I read hints that this information does not exist).

How can I prevent the default action of just one of a number of submit buttons on the same form?

Upvotes: 0

Views: 367

Answers (4)

Klik
Klik

Reputation: 1776

I see what you've done now, you're referencing the form, and not the button. No problem, you just need to use jQuery's awesome selectors to find the submit buttons. Here's a working example:

<form id="form1" method="post" action="formDataHandler.php">
<input name='text1' type='text' value='text input'><br />
<input id='subBtn1' type='submit' value='submit 1'><br />
<input id='subBtn2' type='submit' value='submit 2'>
</form>

<script type="text/javascript">
$("#form1").find('input[type=submit]').on('click', function (e) {
alert($(e.target).val());
    if ($(e.target).val() == 'submit 1') { 
    e.preventDefault();
    } else {
        //do something else
    }
});
</script>

Upvotes: 1

Panais
Panais

Reputation: 361

A quick workaround that you could use is to "convert" the submit buttons to simple buttons, then bind your code to the click events, and from within the click events, when appropriate you could use:

$('#cartform').submit();

to manually submit the form.

Upvotes: 0

jungos
jungos

Reputation: 506

You just need to return false;.

$('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
      return false;
    }
});

Upvotes: 0

Eric J.
Eric J.

Reputation: 150108

Rather than attach to the form's submit event, why not attach to the actual button's click event?

That way you can provide the appropriate code for each button. You can submit the form using JavaScript in the checkout button's handler, and just update the DOM from your Update button.

Upvotes: 0

Related Questions