Set different targets for form with multiple submit buttons - php

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

You can use HTML5 formtarget attribute of input tag to change form behavior. This won't work with outdated browsers, however. In your case it will look something like:
<input type='submit' name='pdf' formtarget="_blank" value='PDF Preview'/>
<input type='submit' name='save' formtarget="_self" value='Save'/>
It can be used with button tag either.
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit#formtarget
https://www.w3schools.com/tags/att_input_formtarget.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes