Submit form using a button outside the form tag

Question

Say I have    lt form method  get  action  something php  gt       lt input type  text  name  name    gt   lt  form gt    lt input type  submit    gt    How do I go about submitting that form with that submit button outside of the form  I think in HTML5 theres an action attribute for the submit but I m not sure if thats fully cross-browser and if it isn t is there anyway to do this

User · Answer

Maybe this could work  but I don t know if this is valid HTML    lt form method  get  action  something php  gt       lt input type  text  name  name    gt       lt input id  submitButton  type  submit  class  hide-submit    gt   lt  form gt    lt label for  submitButton  gt Submit lt  label gt

User · Answer

You can always use jQuery    lt form id  myForm  gt     lt  -- form controls -- gt   lt  form gt   lt input type  submit  id  myButton  gt    lt script gt    document  ready function            myButton   click function              myForm   submit               lt  script gt

User · Answer

I had an issue where I was trying to hide the form from a table cell  element  but still show the forms submit-button  The problem was that the form element was still taking up an extra blank space  making the format of my table cell look weird   The display none and visibility hidden attributes didn t work because it would hide the submit button as well  since it was contained within the form I was trying to hide   The simple answer was to set the forms height to barely nothing using CSS  So   CSS -        formID  height 4px     worked for me

User · Answer

I used this way  and kind liked it   it validates the form before submit also is compatible with safari google  no jquery n n            lt module-body gt               lt form id  testform  method  post  gt                   lt label gt Input Title lt  label gt                   lt input name  named1  placeholder  Placeholder   title  Please enter only alphanumeric characters   required  required  pattern   A-Za-z0-9  1 20     gt                   lt alert gt No Alerts  lt  alert gt                    lt label gt Input Title lt  label gt                   lt input placeholder  Placeholder  title  Please enter only alphanumeric characters   required  required  pattern   A-Za-z0-9  1 20     gt                   lt alert gt No Alerts  lt  alert gt                    lt label gt Input Title lt  label gt                   lt input placeholder  Placeholder  title  Please enter only alphanumeric characters   required  required  pattern   A-Za-z0-9  1 20     gt                   lt alert gt No Alerts  lt  alert gt               lt  form gt           lt  module-body gt           lt module-footer gt               lt input type  button  onclick  if  document querySelector   testform   reportValidity      document querySelector   testform   submit       value  Submit  gt               lt input type  button  value  Reset  gt           lt  module-footer gt

User · Answer

Similar to another solution here  with minor modification    lt form method  METHOD  id  FORMID  gt      lt  --    your inputs -- gt   lt  form gt   lt button type  submit  form  FORMID  value  Submit  gt Submit lt  button gt    https   www w3schools com tags att form asp

User · Answer

lt form method  get  id  form1  action  something php  gt    lt  form gt    lt  -- External button-- gt   lt button type  submit  form  form1  gt Click me  lt  button gt    This worked for me  to have a remote submit button for a form

User · Answer

if you can use jQuery you can use this   lt form method  get  action  something php  id  myForm  gt       lt input type  text  name  name    gt        lt input type  submit  style  display none    gt   lt  form gt    lt input type  button  value  Submit  id  myButton    gt    lt script type  text javascript  gt        document  ready function                myButton   click function                    myForm   submit                        lt  script gt    So  the bottom line is to create a button like Submit  and put the real submit button in the form of course hiding it   and submit form by jquery via clicking the  Fake Submit  button  Hope it helps

User · Answer

A solution that works great for me  is still missing here  It requires having a visually hidden  lt submit gt  or  lt input type  submit  gt  element whithin the  lt form gt   and an associated  lt label gt  element outside of it  It would look like this    lt form method  get  action  something php  gt        lt input type  text  name  name    gt        lt input type  submit  id  submit-form  class  hidden    gt   lt  form gt    lt label for  submit-form  tabindex  0  gt Submit lt  label gt    Now this link enables you to  click  the form  lt submit gt  element by clicking the  lt label gt  element

User · Answer

Update  In modern browsers you can use the form attribute to do this      As far as I know  you cannot do this without javascript   Here s what the spec says      The elements used to create controls generally appear inside a FORM   element  but may also appear outside of a FORM element declaration   when they are used to build user interfaces  This is discussed in the   section on intrinsic events  Note that controls outside a form cannot   be successful controls    That s my bold  A submit button is considered a control   http   www w3 org TR html4 interact forms html h-17 2 1  From the comments     I have a multi tabbed settings area with a button to update all  due   to the design of it the button would be outside of the form    Why not place the input inside the form  but use CSS to position it elsewhere on the page

User · Answer

Try this    lt input type  submit  onclick  document forms 0  submit       gt    Although I would suggest adding an id to the form and accessing by that instead of document forms index

User · Answer

Here s a pretty solid solution that incorporates the best ideas so far as well as includes my solution to a problem highlighted with Offerein s  No javascript is used   If you care about backwards compatibility with IE  and even Edge 13   you can t use the form  your-form  attribute   Use a standard submit input with display none and add a label for it outside the form    lt form id  your-form  gt     lt input type  submit  id  your-form-submit  style  display  none   gt   lt  form gt    Note the use of display  none   This is intentional  Using bootstrap s  hidden class conflicts with jQuery s  show   and  hide    and has since been deprecated in Bootstrap 4   Now simply add a label for your submit   styled for bootstrap     lt label for  your-form-submit  role  button  class  btn btn-primary  tabindex  0  gt    Submit  lt  label gt    Unlike other solutions  I m also using tabindex - set to 0 - which means that we are now compatible with keyboard tabbing  Adding the role  button  attribute gives it the CSS style cursor  pointer  Et voila   See this fiddle

User · Answer

In HTML5  there is the form attribute  Basically    lt form id  myform  method  get  action  something php  gt       lt input type  text  name  name    gt   lt  form gt    lt input type  submit  form  myform    gt

User · Answer

You can tell a form that an external component from outside the  lt form gt  tag belongs to it by adding the form  quot yourFormName quot  to the definition of the component  In this case   lt form id  quot login-form quot  gt      blah     lt  form gt    lt button type  quot submit quot  form  quot login-form quot  name  quot login user quot  class  quot login-form-btn quot  gt           lt B gt Autentificate lt  B gt   lt  button gt       would still submit the form happily because you assigned the form name to it  The form thinks the button is part of it  even if the button is outside the  tag  and this requires NO javascript to submit the form  which can be buggy i e  form may submit but bootstrap errors   validations my fail to show  I tested

User · Answer

This work perfectly      This can be done using Ajax and with what I call   a form mirror element   Instead to send a form with an element outside  you can create a fake form  The previous form is not needed    lt  -- This will do the trick -- gt   lt div  gt       lt input id  mirror element  type  text  name  your input name  gt       lt input type  button  value  Send Form  gt   lt  div gt    Code ajax would be like         lt script gt          ajax form mirror   mirror element    your file php     your element response    POST             function ajax form mirror form  file  element  method                  document  ready function                        Ajax                   form  change function        catch the forms submit event                       ajax                     create an AJAX call                            data    this  serialize            get the form data                         type  method                       GET or POST                         url  file                          the file to call                         success  function  response         on success                             element  html response       update the DIV                                                                        return false     cancel original event to prevent form submitting                                                   lt  script gt    This is very usefull if you want to send some data inside another form without submit the parent form   This code probably can be adapted optimized according to the need  It works perfectly       Also works if you want a select option box like this    lt div gt       lt select id  mirror element  name  your input name  gt           lt option id  1  value  1  gt A lt  option gt           lt option id  2  value  2  gt B lt  option gt           lt option id  3  value  3  gt C lt  option gt           lt option id  4  value  4  gt D lt  option gt       lt  select gt   lt  div gt    I hope it helped someone like it helped me

[html] Submit form using a button outside the <form> tag

Examples related to html