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?

Theism

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. – Rosalba

@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. – Martyrdom

@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. – Rosalba

Answer 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

Fredrick

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(); – Cachet

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. – Giro

Answer 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.

Rosalba

This is the most sensible solution. – Salto

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> – Pyrrho

@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? – Rosalba

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

@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? – Rosalba

@wdetac: GOTO comment 3 – Rosalba

@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. – Fra

@Fra 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. – Rosalba

buttons break my css – Lodovico

Answer 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.

Shibboleth

Answer 4

A couple of things to note:

1. Non-JavaScript enabled clients won't be able to submit your form
2. 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
</div>

Khalid

Answer 5

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.

Airlee

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. – Theism

Answer 6

You have the button tag

http://www.w3schools.com/tags/tag_button.asp

<button>What ever you want</button>

Kate