Trying to submit a parent form using onclick event, not working

Question

I am trying to submit the parent form, using an "onclick" event without specifying the form's id. There is a reason for this. I am using a webfont for a button hence the "span".

My code:

<form action="/Index" method="post">    <p>
    <span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>  
    <input type="hidden" name="id" value="10000"/>     
</p>

I have also tried:

onclick="this.form.submit();"

This also failed to work.

What is the correct code please?

What's wrong with a submit button? No script required. Only form controls (input, textarea, etc.) in a form have a form property by default. — RobG
– RobG, Commented Nov 21, 2013 at 1:29
How can I use a webfont when using a button element. The webfonts are activated by the class attribute. They are the "font awesome" ones. This is why I am using a span tag. — SamJolly
– SamJolly, Commented Nov 21, 2013 at 1:34
RobG, I understand where you are coming from, and most of my forms just use button tags. However this is a special use case where the user needs a webfont. Thanks for the wisdom however. — SamJolly
– SamJolly, Commented Nov 21, 2013 at 1:46

Rahul Gupta · Accepted Answer · 2019-06-11 04:39:39Z

1

You can use document.forms[0].submit() if you have only one form in page. In case if you have multiple forms on the same page then it would submit the first encountered form.

edited Jun 11, 2019 at 4:39

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

answered Nov 21, 2013 at 1:14

Mifeng

1,56515 silver badges26 bronze badges

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

1 Comment

RobG Over a year ago

The OP could use a button in the form and then this.form.submit() would work. But it would work without the script too. ;-)

Teddy · Accepted Answer · 2013-11-21 02:03:20Z

0

Is there any other forms?

if no, try: 'document.forms[0].submit'

otherwise, add a id to the form

<form id="testForm" action='..'>...</form>

document.getElementById('testForm').submit();

answered Nov 21, 2013 at 2:03

Teddy

7975 silver badges13 bronze badges

Comments

Shubham Jain · Accepted Answer · 2019-01-29 09:51:51Z

0

You didn't close your form element.

<form action="/Index" method="post">    
    <p>
    <span class="fa fa-arrow-circle-right" onclick="document.form.submit();" style="font-size:50px;cursor:pointer;"></span>  
    <input type="hidden" name="id" value="10000"/>     
    </p>
</form> /*This*/

Should work once you close it.

edited Jan 29, 2019 at 9:51

Shubham Jain

9301 gold badge14 silver badges24 bronze badges

answered Jan 29, 2019 at 7:54

Cheatcode

101

Comments

Rahul Gupta · Accepted Answer · 2019-06-11 04:48:16Z

0

The below strategy to submit the form would work even if have multiple forms on the same page given that you provide a unique id to each form. The <form> should be provided an id attribute so that specific can be targeted with the given id as below:

<form id="myFormId" action="/Index" method="post">
    <p>
    <span onclick="document.getElementById('myFormId').submit()" class="fa fa-arrow-circle-right" role="button" style="font-size:50px;cursor:pointer;"></span>  
    <input type="hidden" name="id" value="10000"/>     
    </p>
</form>

answered Jun 11, 2019 at 4:48

Rahul Gupta

10.2k7 gold badges66 silver badges69 bronze badges

Collectives™ on Stack Overflow

Trying to submit a parent form using onclick event, not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related