How do I make a "div" button submit the form its sitting in?

Question

I have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.

A standard button is easy, just set the onClick event of the div to change the page location:

<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>

This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:

<form action="whatever.html" method="post">
    <div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
    Button Text
    </div>
</form>

However, that does not work :( Does anyone have any sparkling ideas?

Solution 1

onClick="javascript:this.form.submit();">

this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do

Also, onClick, should be onclick, some browsers don't work with onClick

Solution 2

Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:

<form action="whatever.html" method="post">  
    <button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">  
    Button Text
    </button>  
</form>  

Using a <button> is also more semantic, whereas <div> is very generic. You get the following benefits for free:

• JavaScript is not necessary to submit the form
• Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
• <button type="submit"> becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a <div>, you'd have to add a separate keydown handler to the <form> element.

There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.

Solution 3

To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:

$('#id-of-the-button').click(function() {document.forms[0].submit()});

Which assumes you just have the one form on the page.

Comments

[Michael Shimmins]

if you have multiple forms, and your form isn't the first on in the DOM this won't have the desired effect. A safer was (if you're going to use javascript to submit the form) would be to give it a unique id, and then get an instance of it by the unique id, and then submit that: document.getElementById('theForm').submit();

[Jimbo]

Im afraid what THIS code does is complicate things - all that is required is for the parent form to be submitted by the DIV element being clicked which is (as seen by the accepted answer) achieved by a very simple, non-JQuery "this.parentNode.submit()" - thanks anyway.

[Mike]

This is the most sensible solution.

[Petrus K.]

That's beside the point, he wants to do it with div and thus explicitly asking if there's a solution for div, otherwise he'd just use <input> with type=submit property or a <button>

[Andy E]

@Ryuji: why is it besides the point? He wouldn't use an <input> because they don't have as much flexibility as a <div>. A <button> has much of the flexibility that a <div> has and is a much more appropriate tool for the job. Did it occur to you that the OP or anyone viewing this question might not have known about <button> elements?

[Julien]

Doesn't work if you navigate in the page with your keyboard (tab and enter) or if you use middle click or ctrl + click. In my opinion it is best to style a real button.

[phil294]

but doesnt this mean I'd have to remove the border, the color, the marign? this doesnt really sound "semantic" to me (?)

[Andy E]

@Blauhirn: styling has nothing to do with semantic html. Being semantic with HTML just means using the most appropriate tool for the job. With a <button> element, you get accessibility and readability for free. If I look at your code with a div, will I know it's a button? Will a screen reader know it's a button? The answer to those may or may not be "yes" depending on how well it's written. Still, you're probably already styling your div to make it look like a button, so what is a couple of extra directives to "reset" the look of a button?

[Andy E]

@wdetac: GOTO comment 3

[wdetac]

@AndyE I am here because I cannot use button and input for some reason. Maybe your suggestion is great, you are not answering the question. In this situation, it is better to answer the original question first, and then suggest a better approach.

[Andy E]

@wdetac the accepted answer has that information, and it is stickied to the top of all the answers. Including it with my own answer would be redundant, and if my answer was not here then many people would be (incorrectly) using <div> elements to submit forms.

[clockw0rk]

buttons break my css