HTML form with two submit buttons and two target attributes

Question

I have one HTML  lt form gt    The form has only one action    attribute   However I wish to have two different target    attributes  depending on which button you click to submit the form  This is probably some fancy JavaScript code  but I haven t an idea where to begin   How could I create two buttons  each submitting the same form  but each button gives the form a different target

User · Answer

It is do-able on the server side    lt button type  submit  name  signin  value  email signin  action   signin  gt Sign In lt  button gt   lt button type  submit  name  signin  value  facebook signin   action   facebook login  gt Facebook lt  button gt    and in my node server side script  app post      function req  res    if req body signin     email signin                function email login                   if req body signin     fb signin                function fb login

User · Answer

Simple and easy to understand  this will send the name of the button that has been clicked  then will branch off to do whatever you want  This can reduce the need for two targets  Less pages       lt form action  twosubmits php  medthod   post  gt   lt input type    text  name  text1  gt    lt input type  submit   name  scheduled  value  Schedule Emails  gt   lt input type  submit   name  single  value  Email Now  gt   lt  form gt    twosubmits php   lt  php if  empty   POST  scheduled          do whatever or collect values needed die  You pressed single       if  empty   POST  single          do whatever or collect values needed die  you pressed scheduled        gt

User · Answer

This might help someone   Use the formtarget attribute    lt html gt     lt body gt       lt form gt         lt  --submit on a new window-- gt         lt input type  submit  formatarget   blank  value  Submit to first    gt         lt  --submit on the same window-- gt         lt input type  submit  formaction   self  value  Submit to second    gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

Have both buttons submit to the current page and then add this code at the top    lt  php     if isset   GET  firstButtonName            header  Location  first-target php var1    GET  var1    amp var2    GET  var2           if isset   GET  secondButtonName            header  Location  second-target php var1    GET  var1    amp var2    GET  var2         gt    It could also be done using   SESSION if you don t want them to see the variables

User · Answer

I do this on the server-side   That is  the form always submits to the same target  but I ve got a server-side script who is responsible for redirecting to the appropriate location depending on what button was pressed   If you have multiple buttons  such as    lt form action  mypage  method  get  gt      lt input type  submit  name  retry  value  Retry    gt     lt input type  submit  name  abort  value  Abort    gt    lt  form gt       Note   I used GET  but it works for POST too   Then you can easily determine which button was pressed - if the variable retry exists and has a value then retry was pressed  and if the variable abort exists and has a value then abort was pressed   This knowledge can then be used to redirect to the appropriate place   This method needs no Javascript      Note   that some browsers are capable of submitting a form without pressing any buttons  by pressing enter    Non-standard as this is    you have to account for it  by having a clear default action and   activating that whenever no buttons were pressed   In other words    make sure your form does something sensible  whether that s   displaying a helpful error message or assuming a default  when someone   hits enter in a different form element instead of clicking a submit   button  rather than just breaking

User · Answer

In this example  taken from  http   www webdeveloper com forum showthread php t 75170  You can see the way to change the target on the button OnClick event   function subm f newtarget    document myform target   newtarget   f submit        lt FORM name  myform  method  post  action    target     gt    lt INPUT type  button  name  Submit  value  Submit  onclick  subm this form   self     gt   lt INPUT type  button  name  Submit  value  Submit  onclick  subm this form   blank     gt

User · Answer

In case you are up to HTML5  you can just use the attribute formaction  This allows you to have a different form action for each button    lt  DOCTYPE html gt   lt html gt     lt body gt       lt form gt         lt input type  submit  formaction  firsttarget php  value  Submit to first    gt         lt input type  submit  formaction  secondtarget php  value  Submit to second    gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

lt form id  myForm  gt       lt input type  button  name  first btn  id  first btn  gt       lt input type  button  name  second btn  id  second btn  gt   lt  form gt    lt script gt       first btn   click function        var form   document getElementById  myForm       form action    https   foo com       form submit             second btn   click function        var form   document getElementById  myForm       form action    http   bar com       form submit          lt  script gt

User · Answer

On each of your buttons you could have the following    lt input type  button  name  newWin  onclick  frmSubmitSameWin     gt   lt input type  button  name  SameWin  onclick  frmSubmitNewWin     gt    Then have a few small js functions    lt script type  text javascript  gt  function frmSubmitSameWin     form target       form submit        function frmSubmitNewWin     form target     blank   form submit       lt  script gt    That should do the trick

User · Answer

Example    lt input    type  submit     onclick  this form action  new target php do alternative submit      value  Alternative Save    gt    Voila  Very  fancy   three word JavaScript

User · Answer

HTML     lt form method  get  gt   lt input type  text  name  id  value  123   gt   lt input type  submit  name  action  value  add   gt   lt input type  submit  name  action  value  delete   gt   lt  form gt    JS       form   submit function ev    ev preventDefault    console log  clicked  ev originalEvent ev originalEvent explicitOriginalTarget        http   jsfiddle net arzo unhc3

User · Answer

It is more appropriate to approach this problem with the mentality that a form will have a default action tied to one submit button  and then an alternative action bound to a plain button  The difference here is that whichever one goes under the submit will be the one used when a user submits the form by pressing enter  while the other one will only be fired when a user explicitly clicks on the button   Anyhow  with that in mind  this should do it    lt form id  myform  action  jquery php  method  GET  gt       lt input type  submit  id  btn1  value  Normal Submit  gt       lt input type  button  id  btn2  value  New Window  gt   lt  form gt    With this javascript   var form   document getElementById  myform    form onsubmit   function         form target     self       document getElementById  btn2   onclick   function         form target     blank       form submit        Approaches that bind code to the submit button s click event will not work on IE

User · Answer

This works for me    lt input type  submit  name  self  value  This window  onclick  this form target   self      gt    lt input type  submit  name  blank  value  New window  onclick  this form target   blank      gt

User · Answer

Here s a quick example script that displays a form that changes the target type    lt script type  text javascript  gt      function myTarget form            for  i   0  i  lt  form target type length  i                  if  form target type i  checked                  val   form target type i  value                    form target   val          return true         lt  script gt   lt form action    onSubmit  return myTarget this    gt       lt input type  radio  name  target type  value   self  checked   gt  Self  lt br  gt       lt input type  radio  name  target type  value   blank    gt  Blank  lt br  gt       lt input type  submit  gt   lt  form gt

User · Answer

Alternate Solution  Don t get messed up with onclick buttons server side and all Just create a new form with different action like this    lt form method post name main onsubmit  return validate    action  scale test html  gt   lt input type checkbox value  AC Hi-Side Pressure  gt AC Hi-Side Pressure lt br gt   lt input type checkbox value  Engine Speed  gt Engine Speed lt br gt   lt input type submit value  Linear Scale    gt   lt  form gt   lt form method post name main1 onsubmit  return v    action scale log html gt   lt input type submit name log id log value  Log Scale  gt   lt  form gt    Now in Javascript you can get all the elements of main form in v   with the help of getElementsByTagName    To know whether the checkbox is checked or not  function v    var check   document getElementsByTagName  input         for  var i 0  i  lt  check length  i              if  check i  type     checkbox                 if  check i  checked    true             x i  check i  value                               console log x

[javascript] HTML form with two submit buttons and two "target" attributes

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to submit