Solved

two submit buttons one form

Posted on 2016-08-17
  • Web Development
  • ASP
  • Web Languages and Standards
  • HTML
  • JavaScript
  • +1
15
86 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

778 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