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

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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
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
</form>
However, that does not work :( Does anyone have any sparkling ideas?
                You shouldn't use a div for a custom styled button.  Use a <button> element instead.  Likewise you shouldn't use javascript to submit a form if there is no fallback for browsers with scripting disabled.
– Andy E
                Mar 8, 2010 at 10:10
                @AndyE Using a div offers much more styling options than a button.  For instance, I can't put a div inside a button; but I can put a div inside a div. This allows me to experience greater control over the look and feel.
– nu everest
                Feb 25, 2017 at 19:34
                @nueverest divs don't offer any additional styling options over buttons.  A div is just a generic, block-level element.  A button can be styled exactly the same way by setting its border, background-color and display properties.  Likewise, any element inside the button can be styled to behave like a div (e.g. a span with display: block).  That being said, these days accessibility hints can make a div be recognised as a button, so it doesn't really matter as long as you remember to make your site accessible.
– Andy E
                Feb 27, 2017 at 10:47
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
                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();
– Michael Shimmins
                Apr 13, 2010 at 3:44
                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.
– Julien
                Jul 22, 2015 at 14:05
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.
                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>
– Petrus K.
                Nov 6, 2013 at 23:46
                @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?
– Andy E
                Nov 7, 2013 at 8:56
                @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
                Feb 27, 2017 at 10:53
                @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.
– Andy E
                Oct 23, 2018 at 14:30
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.
Non-JavaScript enabled clients won't be able to submit your form
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
     onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
  Button Text
Why does everyone have to complicate things.  Just use jQuery!
<script type="text/javascript">
  $(document).ready(function() {
    $('#divID').click(function(){
      $('#formID').submit();
    $('#submitID').hide();
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
  <input type="hidden" name="test" value="somevalue" />
  <input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it.  The only thing that is missing here is the include of jquery.js.
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
                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.
– Jimbo
                Apr 13, 2010 at 10:25
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.