submit data of form to a popup and print that popup window

Question

i am using this code to get submitted data from a form

<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button> 
<div id="info"></div>
<script type="text/javascript">
    function submit()
    {
        var name = document.getElementById("name").value;
        document.getElementById("info").innerHTML = " My Name is "+name+" ";
    return false;
    }
</script>

the result is displayed in the same window as that of form. i want to display the output in a popup window and be able to link a print button in the main window that once clicked will print the contents of that popup

edit: just to clarify more.

form submitted > open a new window > displays the entered results

thanks

So open a new window (window.open) and write to it (document write). — epascarello, Jun 23 '14 at 18:23
Try something like this: http://stackoverflow.com/questions/9852190/js-window-open-then-print — nullability, Jun 23 '14 at 18:34

score 0 · Accepted Answer · answered Jun 23 '14 at 18:30

0

Well you can modify your code this way :

<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button> 
<div id="info"></div>
<script type="text/javascript">
    function submit()
    {
        var name = document.getElementById("name").value;
        document.getElementById("info").innerHTML = " My Name is "+name+" ";
        var r = window.confirm(" My Name is "+name+" .Click Ok To Print");
        if (r == true) {
            x = window.print();
        }
    return false;
    }
</script>

Hope this serves your purpose.

answered Jun 23 '14 at 18:30

arp

1,358
10
13

try this instead ......... var myWindow = window.open("", "MsgWindow", "width=200, height=100"); myWindow.document.write("
My Name is "+name+"
"); – arp Jun 23 '14 at 20:21
I tried the solution from the previous comment, but for me on google-chrome `window.open` returns `undefined`, which makes this solution inapplicable... – Ivaylo Petrov Jun 24 '14 at 15:30

score 0 · Answer 2 · edited May 23 '17 at 12:20

I think you want something like

<input id="name" name="name" type="text" class="auto-style8" style="width: 70%" />
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="return submit();">Submit</button> 
<div id="info"></div>
<script type="text/javascript">
    function submit()
    {
        var name = document.getElementById("name").value;
        var output = " My Name is "+name+" ";
        var myWindow = window.open("data:text/html," + encodeURIComponent(output),
                   "_blank", "width=200,height=100");

        x = window.print();

        return false;
    }
</script>

I used this as inspiration :)

submit data of form to a popup and print that popup window

2 Answers2