How do I make a "div" button submit the form its sitting in?
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.
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