30

I am clicking a submit button using this:

$('input[type=submit]').click();

The problem is that I have more that 1 submit button on my page so I need to target a specific submit button.

How could I do that?

Satch3000
  • 47,356
  • 86
  • 216
  • 346

6 Answers6

33

If you know the number of submit inputs and which one (in order) you want to trigger a click on then you can use nth-child() syntax to target it. Or add an ID or a class to each one that separates them from the other.

Selecting the elements by their index:

$('input[type="submit"]:nth-child(1)').trigger('click');//selects the first one
$('input[type="submit"]:nth-child(2)').trigger('click');//selects the second one
$('input[type="submit"]:nth-child(100)').trigger('click');//selects the 100th one

There are actually several ways to do this including using .eq(): http://api.jquery.com/eq

Selecting the elements by their id:

<input type="submit" id="submit_1" />
<input type="submit" id="submit_2" />
<input type="submit" id="submit_100" />

<script>
$('#submit_100').trigger('click');
</script>

Note that .click() is short for .trigger('click').

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • Is there a reason to prefer the longhand `.trigger('click')` over the shorthand? – AntonChanning Jun 10 '16 at 10:45
  • 1
    @AntonChanning It's more of a preference than anything else. The shorthand functions are wrappers so there is a very small amount of overhead when calling them but I can't imagine it would have any noteworthy impact. I like that the `.trigger('click')` form is more descriptive, for me making it easier to quickly read code. – Jasper Jun 10 '16 at 16:28
  • I'm guessing it also acts as a visual reminder of the syntax that can be used for any kind of event, including custom event types. – AntonChanning Jun 11 '16 at 17:14
11

If you add a marker, like a specific id or class to your input, you can make your selector more specific. For example, if you give the button you want the ID of form-btn like this:

<input type="submit" id="form-btn" />

You can select it like this:

$('input[type=submit]#form-btn').click();

Or just:

$('#form-btn').click();
Jacob
  • 77,566
  • 24
  • 149
  • 228
5

Add ids to each button and select the id with jQuery.

Or, if the forms have ids, then just target the form and submit it like so:

$("#form-id").submit();
Purag
  • 16,941
  • 4
  • 54
  • 75
3

Way late to the party, but if your submit buttons have names:

$("input[name='submitbuttonname']").click();
Grim...
  • 16,518
  • 7
  • 45
  • 61
1

One other suggestion!

I had a form with multiple submits, that also had varying value attributes, so I couldn't simply submit the form after I performed my built in confirmation.

Instead, I added a few hidden buttons that I forced a click on after I got a Yes back from my confirmation.

Here are the buttons:

<button id="email" name="email" type="submit" class="submit radius confirmation" value="all"><?php echo $this->__('Email Receipts to Selected'); ?></button>
<button id="email-french" name="email-french" type="submit" class="submit radius confirmation" value="all"><?php echo $this->__('Email French Receipts to Selected'); ?></button>
<button id="helper-email" name="email" type="submit" class="submit hide" value="all"></button>
<button id="helper-email-french" name="email-french" type="submit" class="submit hide" value="all"></button>

And here's the jQuery:

<script type="text/javascript">
jQuery(function ($) {
    $('[id^=email]').on('click', function (e) {
        e.preventDefault();

        var button = $(this);

        notify.confirm(<?php echo json_encode($this->__('Are you sure?')); ?>, function (ans) {
            if (ans) {
                $('#helper-' + button.attr('id')).click();
            }
        });
    });
});
</script>
Tyler Swartzenburg
  • 61
  • 3
-1

hmm it cant work with a wizard form with this intacted 

$("#renqform").validate().settings.ignore = ":disabled";
return $("#renqform").valid();
Tim
  • 41,901
  • 18
  • 127
  • 145
Eugene Tang
  • 83
  • 2
  • 8