Solved

two submit buttons one form

Posted on 2016-08-17
15
105 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
need assistance with a VBscript 3 32
Session on Html 8 37
Customising IE behaviour on certain pages 2 57
title attribute 5 22
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

713 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