jQuery submit button on another button click

Question

I have a submit on my page:

<input type="submit" name="nextstep" value="Next" id="nextstep" class="newaddressnextstepbutton">

and when I click on this submit I need to make another submit on first button with specific name like this:

<input type="button" name="selectBillingAddress" value="First one" class="selectbillingaddressbutton" onclick="setLocation('/checkout/selectbillingaddress?addressId=537')">
<input type="button" name="selectBillingAddress" value="Second one" class="selectbillingaddressbutton" onclick="setLocation('/checkout/selectbillingaddress?addressId=647')">

I did it like this:

$("input[name='nextstep']").click(function() {
        $("input[name='selectBillingAddress']")[0].submit();
});

But this not working. I get this error: Uncaught TypeError: $(...)[0].submit is not a function I found this answer for this error "Submit is not a function" error in JavaScript but I dont have input[name='submit'] on this page..

Can anybody help me?

I think I finally figured out your intent and posted some suggestions below. — iCollect.it Ltd, Jan 11 '16 at 12:43

score 1 · Answer 1 · answered Jan 11 '16 at 11:43

1

You need to call the submit function on the form, not the button. So it should be something like this:

  $("input[name='nextstep']").click(function() {
       $("form").submit();
  });

If you have more than one form on your page give your form an ID and use that instead.

answered Jan 11 '16 at 11:43

MihaiB

44
4

This is not doing what the OP wanted. The other buttons are changing the URL when clicked. Not submitting the form. – iCollect.it Ltd Jan 11 '16 at 12:37

score 1 · Answer 2 · answered Jan 11 '16 at 12:42

.submit() is only available on form elements.

Instead you need to trigger a native click event on the first matching DOM element instead:

e.g.

$("#nextstep").click(function(e) {
     e.preventDefault();
     $("[name='selectBillingAddress']")[0].click();
});

Notes:

You should target the element using an id selector is available (faster/shorter)
As a good practice, you should prevent the original click event from submitting the form, and not just assume the redirect will override it.
You need to use .click() on the DOM element to call the native click handler.

Rustin Cohle · Answer 3 · 2016-01-11T12:28:07.353

0

Sorry: Here is the UPDATED one.

$("input[name='nextstep']").click(function() {
        $("input[name='selectBillingAddress']").eq(0).trigger("click");
});

edited Jan 11 '16 at 12:28

answered Jan 11 '16 at 12:12

Rustin Cohle

161
1
1
12

You are incorrectly getting the DOM element with [0] and calling `trigger` on that (which does not exist). – iCollect.it Ltd Jan 11 '16 at 12:24
@TrueBlueAussie Just Updated. – Rustin Cohle Jan 11 '16 at 12:30
This will not work as jQuery trigger wont fire the inline `onclick` event. You need to hit the native click handler like @Rajaprabhu Aravindasamy – iCollect.it Ltd Jan 11 '16 at 12:37

score -1 · Answer 4 · answered Jan 11 '16 at 11:41

-1

Try to invoke the natural click of the button,

$("input[name='nextstep']").click(function() {
     $("input[name='selectBillingAddress']")[0].click();
});

Or just grab the closest form and invoke .submit() over it. Since elements other than form will not have submit function as its member.

answered Jan 11 '16 at 11:41

Rajaprabhu Aravindasamy

66,513
17
101
130

1

Mr.Brilliance, Please tell us why did you cast a down vote to this answer? – Rajaprabhu Aravindasamy Jan 11 '16 at 11:49

jQuery submit button on another button click

4 Answers4

Notes: