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?

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

Answer 2

You have the button tag

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

<button>What ever you want</button>

Answer 3

Is there a reason you're not using a <button> element? <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>  

You can do anything from changing the border/background colour to setting a background image.

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>

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.