Set different targets for form with multiple submit buttons

two submit buttons in one form different action
how to handle multiple submit buttons in html forms
two submit buttons in one form different action javascript
multiple submit buttons in a single form jsp
multiple submit buttons in a single form php
multiple form actions with one submit button
two submit buttons in one form flask
multiple submit buttons in a single form mvc

I have a form that contains a WYSIWYG editor, and two submit buttons :

<input type='submit' name='pdf' value='PDF Preview'/>
<input type='submit' name='save' value='Save'/>

"pdf" action displays the content of the editor as a PDF output. "save" action is a regular form submit. I want the PDF output to open in a new tab, and can't figure how to do that.

There is no "target" attribute for "input" tag. I could add a "target=_blank" to the "form" tag, but that would submit my "save" action in a new tab as well, which I don't want.

I tried to replace the "pdf" submit button with this :

<a href="same_page" target="_blank" onclick="submitForm();">

That didn't work. The form is submitted in its current tab and the new tab query receives nothing in $_POST.

Is there a magic trick I don't know yet ?

Note : server-side code is PHP


Use button and onclick event with jQuery.

<button type='submit' name='pdf' onclick="$('form').attr('target', '_blank');">PDF Preview</button>
<button type='submit' name='save' onclick="$('form').attr('target', '');">SAVE</button>

HTML forms with multiple submit buttons, How do you handle multiple submit buttons in the same form? In web forms handling multiple submit buttons on a form is quite straightforward because all you need to do is write the Click event handler of the respective buttons. However, in ASP.NET MVC you need to rely on the plain HTML and / or JavaScript to deal with the situation. To that end this article illustrates four ways of handling multiple submit buttons.


So in short you have one form + two submit buttons

first button: open in same tab

second button : open in new tab

after submit you want to know which one is submitted

Solution:

add two submit buttons with different behavior is impossible so you need JS help or Jquery ( Ravi Hirani solution is perfect )

To know which button is submitted, you should give different names ( newage comment is perfect)

So this is just simple example does the magic you are looking for:

<?php
//print the post data
var_dump($_POST);
?>


<script type="application/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<form action="test.php" method="POST">
    <!-- just simple textarea -->
    <textarea rows="4" cols="50" name="textarea">
        text here
    </textarea>

    <!-- new tab submit button -->
    <input type="submit" name="New_Window" value="New Window" onclick="$('form').attr('target', '_blank');" />
    <!-- same tab submit button -->
    <input type="submit" name="Same_Window" value="Same Window" onclick="$('form').attr('target', '');" />

</form>

HTML 5 Submit form - multiple actions with formaction, In case you are up to HTML5, you can just use the attribute formaction . This allows you to have a different form action for each button. You can see the way to change the target on the button OnClick event. Voila. 1. Multiple buttons with different names. In this technique you use form tag helper of ASP.NET Core and submit the form to an action method. The relevant markup from the Index view that does this is shown below: @model MultipleSubmitButtons.Models.Customer


You could maybe try using jQuery for this. For example when the PDFPreview button is clicked jQuery could save the values of the form inputs into cookies. Then it would redirect to the PDFPreview page in a new tab. The PDFPreview page would then read the cookies. E.g:

<script>
var input1 = null;
function previewPdf()
{
  input1 = $("#input1").text();
  document.cookie = "input1=" + input1;
  window.open("/path/to/pdfPreview.php", '_blank')
}
</script>
<form action="whateverpage" method="post">
<input type="text" name="input1" id="input1">
<input type="button" onClick="previewPdf();" value="Preview PDF">
<input type="submit" value="Save">
</form>

HTML form with two submit buttons and two "target" attributes, To process a form with multiple buttons, your server-side code will need to know which button was pressed. To do so you can give each submit button a different  When you submit a form, the page redirects to the response page. This prevents us from submitting the form again to another script. The solution is to use IFrame. There is an attribute 'target' that can be used with the form. Create an IFrame, make the 'target' of the form to be the IFrame. The response from a form submission gets redirected to


Separate Form Submit Buttons That Go To Different URLs, But that's a workaround for the stated problem. Another way was to use JavaScript to change the action of the <form> when the button was clicked  In the previous example, I distinguished between buttons by using different name attributes for the submit buttons in the form. An alternative is giving all the submit buttons the same name, but


How to create a multi-submit form, You can use JavaScript to switch the action field of the form just when the submit button is pressed. See the page below for Submitting the same form to different scripts at the same time Create an IFrame, make the 'target' of the form to be the IFrame. The SubmitForm() function is called when submit button is pressed. Form submitting data to new window and to two different pages We can use two different buttons to submit the form to two different pages. One of the buttons can submit the form in a new window. You can read the article on how to open the action page of the form in new window. This is required in different occasions where the visitor can see


How do I handle multiple submit buttons in a single form with Laravel?, How do I handle multiple submit buttons in a single form with Laravel? you can use name attributes with different values in your submit buttons, and value="​Submit to alternative action" data-submit-action="/new-target"> While submitting the form it will fire the validation. Suppose we need to add another submit button on view and I want different functionality for that button, then it will call the same action method as the previous button, which means both buttons will point to the same action method.


Four Ways of Handling Multiple Submit Buttons in ASP.NET MVC , In web forms handling multiple submit buttons on a form is quite There are two submit buttons - one with name attribute set to save and the other with name of If the target browser supports HTML5 (all the leading browsers  I have multiple submit buttons in a single HTML form. How do I specify different target values for each of them. Say I have button1 and button2.