two submit buttons one form

Is there a way to have two submit buttons in the same form and depending on which one is clicked submit the form to a different path ?

Example:

Button A
<button type="submit" class="btn btn-white" >Save changes</button>

Button B
<button type="submit" class="btn btn-white" >Unlink</button>

Form
<form name="form1" action="page here" method="POST" class="form-horizontal" id="form1">

If the first button is clicked then form should submit to 'pageA'

<form name="form1" action="pageA.asp?id=<%=(rs_case.Fields.Item("Id").Value)%>" method="POST" class="form-horizontal" id="form1">
If button B is clicked then form should be submitted to 'pageB'

<form name="form1" action="pageB.asp?id=<%=(rs_case.Fields.Item("Id").Value)%>" method="POST" class="form-horizontal" id="form1">

How can I do this ?
LVL 1
AleksAsked:
Who is Participating?
 
Snarf0001Commented:
If you don't have to support older browsers you can just use the formaction attribute:

Button A
<button type="submit" class="btn btn-white" formaction="pageA.asp">Save changes</button> 

Button B
<button type="submit" class="btn btn-white" formaction="pageB.asp">Unlink</button> 

Open in new window


That won't work on ie9 and below though.
0
 
CamilliaCommented:
I think you can do this in Javascript/jQuery. Wire up the button to click even in Javascript and redirect to the appropriate page. Then you won't need 2 forms on the page.
0
 
AleksAuthor Commented:
Sure. I will wait for some javascript master to help out here  :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
CamilliaCommented:
Sorry, I thought you know JS/jQuery. Is this asp.net? web forms or MVC?
0
 
AleksAuthor Commented:
I am using classic ASP. unfortunately I have limited knowledge of JS/Jquery
0
 
James BilousSoftware EngineerCommented:
Create a function that takes the form data and the post url and does an ajax post to the action url.

function submitForm(formData, action)
{
  $.ajax({
      type   :   'POST',
      url      :   action,
      data   :   formData
   });
}

Open in new window


Then just create two submit button handlers that call this function with the appropriate action:

$('#buttonA').click(function(e) {
   submitForm($('#myForm').serialize(), 'pageA.asp');
   e.preventDefault();
});

$('#buttonB').click(function(e) {
   submitForm($('#myForm').serialize(), 'pageB.asp');
   e.preventDefault();
});

Open in new window

0
 
AleksAuthor Commented:
Thanks Ill try this as soon as I get home.
0
 
hieloCommented:
You need to be careful not to lose the querystring info in the action attribute.  Try:
<!-- notice that the page is initially substituted with a # symbol -->
<form name="form1" action="#?id=<%=(rs_case.Fields.Item("Id").Value)%>" method="POST" class="form-horizontal" id="form1">

// now use js to replace the '#' with the appropriate page
$('button[type=submit]').on('click',function(){

  var theForm = this.form;
  if( this.innerHTML=='Save changes')
  {
     theForm.action = theForm.action.replace('#','pageA.asp');
  }
  else
  {
     theForm.action = theForm.action.replace('#','pageB.asp');  
  }
});

Open in new window

0
 
AleksAuthor Commented:
Ok, what action should I have in the form then ?  none ?
0
 
AleksAuthor Commented:
Formaction seems to work fine. what old browsers would not work ?
0
 
AleksAuthor Commented:
one more thing. how can I add this function that was in the form now on button B ?

onSubmit="return oneCheckboxChecked(form3)"

onClick ?
0
 
James BilousSoftware EngineerCommented:
in the function that handles the click event of the form buttons just call your function before submitting the form using ajax.
0
 
Snarf0001Commented:
IE10 works, just anything below that.
Any other browser supported it a long time ago (FF, Chrome, Safari...)
0
 
AleksAuthor Commented:
OK, that is a different matter Ill open a ticket for that separate issue, thanks for the help submitting form to two different pages.
0
 
AleksAuthor Commented:
I used the simplest ones, my users have ie10 or up. Also seems to work fine on Firefox and Chrome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.