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    lt div name  mybutton  id  mybutton  class  customButton  onClick  javascript document location href  wherever html    gt  Button Text  lt  div gt    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    lt form action  whatever html  method  post  gt       lt div name  mysubmitbutton  id  mysubmitbutton  class  customButton  onClick  javascript this form submit     gt      Button Text      lt  div gt   lt  form gt    However  that does not work    Does anyone have any sparkling ideas

User · Answer

Are you aware of  lt button gt  elements    lt button gt  elements can be styled just like  lt div gt  elements and can have type  submit  so they submit the form without javascript    lt form action  whatever html  method  post  gt         lt button name  mysubmitbutton  id  mysubmitbutton  type  submit  class  customButton  gt        Button Text      lt  button gt     lt  form gt      Using a  lt button gt  is also more semantic  whereas  lt div gt  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  lt button type  submit  gt  becomes a  default  button  which means the return key will automatically submit the form  You can t do this with a  lt div gt   you d have to add a separate keydown handler to the  lt form gt  element    There s one  non-  caveat  a  lt button gt  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

User · Answer

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

User · Answer

A couple of things to note    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     lt div name  mysubmitbutton  id  mysubmitbutton  class  customButton       onclick  javascript   doPostBack   lt   mysubmitbutton ClientID   gt     MyCustomArgument     gt    Button Text  lt  div gt

User · Answer

onClick  javascript this form submit     gt    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

User · Answer

Why does everyone have to complicate things   Just use jQuery    lt script type  text javascript  gt      document  ready function             divID   click function              formID   submit                    submitID   hide           lt  script gt    lt form name  whatever  method  post  action  somefile php  id  formID  gt     lt input type  hidden  name  test  value  somevalue    gt     lt input type  submit  name  submit  value  Submit  id  submitID    gt   lt  form gt    lt div id  divID  gt Click Me to Submit lt  div gt    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

User · Answer

You have the button tag  http   www w3schools com tags tag button asp   lt button gt What ever you want lt  button gt

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

Examples related to html

Examples related to asp.net

Examples related to forms

Examples related to submit