Have one submit button on the form (multiple buttons) to open a new tab
I have a form with a button to submit and a button to preview the PDF before submitting. I want the PDF preview button to submit the form data to a new page (which will obviously generate the PDF), but the submit button to work on the current page.
I have been looking around, but most of the answers point to use target="_blank"
in form tags, although this won't work in my case as this will open every button in the tab. Some others show how to open a window in javascript, but without any form data if it was not submitted via url.
I only know PHP and HTML, so I could do this by posting to the same page, replacing the text in the fields and opening a new window in the process, but that would be too hard, just for the sake of a new tab, plus I need to either install everything as session variables, or pass content via URL.
source to share
Since there didn't seem to be any obvious easy ways to do such a simple thing, I reiterated the question many times and eventually found something. It turns out there was a super easy way that I completely missed.
After trying mplugjan's answer, I figured out that the only easy way is to have two separate forms for each button (unless I made akshay suggestion, but that was a last resort), but I would somehow need to get the values from as far as I know. basic form, which is impossible from a separate form. Then I thought that I really needed buttons in order to have different actions, which luckily produced results. This can be done with formaction
and formtarget
.
A short example of how to do this in case anyone else comes across this:
<form action = "page.php">
<input type="submit" value="Accept"/>
<input type="submit" value="Preview PDF" formaction="pdf.php" formtarget="_blank"/>
</form>
source to share
Like this?
window.onload = function() {
document.getElementById("preview").onclick = function() {
document.getElementById("previewIFrame").src = "showpdf.php?id=" + document.getElementById("pdfID").value;
document.getElementById("previewDiv").style.display = "block";
}
document.getElementById("close").onclick = function() {
document.getElementById("previewDiv").style.display = "none";
}
}
#previewDiv {
display: none;
}
<form>
<input type="hidden" value="<?php echo $pdfId; ?>" id="pdfID" />
<input type="button" value="preview" id="preview" />
</form>
<div id="previewDiv"><span id="close">Close</span>
<br>
<iframe src="" id="previewIFrame"></iframe>
</div>
Or simply
<form action="send.php">
<input name="pdfID" type="hidden" value="<?php echo $pdfId; ?>"/>
<input type="submit">
</form>
<form action="preview.php" target="iframe1">
<input name="pdfID" type="hidden" value="<?php echo $pdfId; ?>"/>
<input type="submit">
</form>
<iframe name="iframe1"</iframe>
source to share