Solved

two submit buttons one form

Posted on 2016-08-17
  • Web Development
  • ASP
  • Web Languages and Standards
  • HTML
  • JavaScript
  • +1
15
98 Views
Last Modified: 2016-08-17
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
Comment
Question by:amucinobluedot
  • 8
  • 2
  • 2
  • +2
15 Comments
 
LVL 7

Expert Comment

by:Camillia
ID: 41759437
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
 

Author Comment

by:amucinobluedot
ID: 41759482
Sure. I will wait for some javascript master to help out here  :)
0
 
LVL 7

Expert Comment

by:Camillia
ID: 41759514
Sorry, I thought you know JS/jQuery. Is this asp.net? web forms or MVC?
0
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 

Author Comment

by:amucinobluedot
ID: 41759524
I am using classic ASP. unfortunately I have limited knowledge of JS/Jquery
0
 
LVL 8

Assisted Solution

by:James Bilous
James Bilous earned 125 total points
ID: 41759527
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
 

Author Comment

by:amucinobluedot
ID: 41759530
Thanks Ill try this as soon as I get home.
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 125 total points
ID: 41759653
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
 
LVL 22

Accepted Solution

by:
Snarf0001 earned 250 total points
ID: 41759709
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
 

Author Comment

by:amucinobluedot
ID: 41759748
Ok, what action should I have in the form then ?  none ?
0
 

Author Comment

by:amucinobluedot
ID: 41759749
Formaction seems to work fine. what old browsers would not work ?
0
 

Author Comment

by:amucinobluedot
ID: 41759757
one more thing. how can I add this function that was in the form now on button B ?

onSubmit="return oneCheckboxChecked(form3)"

onClick ?
0
 
LVL 8

Expert Comment

by:James Bilous
ID: 41759766
in the function that handles the click event of the form buttons just call your function before submitting the form using ajax.
0
 
LVL 22

Expert Comment

by:Snarf0001
ID: 41759770
IE10 works, just anything below that.
Any other browser supported it a long time ago (FF, Chrome, Safari...)
0
 

Author Comment

by:amucinobluedot
ID: 41759908
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
 

Author Closing Comment

by:amucinobluedot
ID: 41759911
I used the simplest ones, my users have ie10 or up. Also seems to work fine on Firefox and Chrome
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery on Submit 4 44
send email part1 9 28
Bootstrap 3 - Style a dropdown 1 13
MS SQL + date 6 23
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

827 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question