Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

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 ?
0
Aleks
Asked:
Aleks
  • 8
  • 2
  • 2
  • +2
3 Solutions
 
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
 
CamilliaCommented:
Sorry, I thought you know JS/jQuery. Is this asp.net? web forms or MVC?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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
 
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
 
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.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 8
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now