Solved

two submit buttons one form

Posted on 2016-08-17
  • Web Development
  • ASP
  • Web Languages and Standards
  • HTML
  • JavaScript
  • +1
15
65 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
 

Author Comment

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

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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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 7

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 your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now