How to print a form value using jquery in html

Question

Suppose I have a form with some input values(name, mobile_number, age and gender).

After fill up the form while I clicked submit button, I want to print the form values.

I have already tried with jQuery but not get the exact result.

Here is my result

But I want to print the form data like this

Name : Raff
Mobile Number : 016******* 
Age : ** 
Gender : Male

Here is my form

<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">

                <div class="row clearfix">
                    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
                        <div class="card">
                            <div class="body">
                                <div class="row clearfix">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-line">
                                                 <b>Name: </b>
                                                <input type="text" id="name" class="form-control" placeholder="" name="name" required/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-line">
                                                 <b>Mobile Number: </b>
                                                <input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row clearfix">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <div class="form-line">
                                                 <b>Age: </b>
                                                <input type="text" id="age" class="form-control" placeholder="" name="age" required/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class= "col-sm-6">
                                         <b>Gender: </b>
                                        <select id="gender" class="form-control show-tick" name="gender" required>
                                            <option value="">-- Please select --</option>
                                            <option value="1">Male</option>
                                            <option value="2">Female</option>
                                            <option value="3">Others</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row clearfix">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
                    </div> 
                </div>

            </form>

jQuery

function PrintElem()
    {
        var divToPrint=document.getElementById('new_prescription_form');

        var newWin=window.open('','Print-Window');

        newWin.document.open();

        newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

        newWin.document.close();

        setTimeout(function(){newWin.close();},10); 
    }

How to solve this ? Anybody help please.

WebSwami · Accepted Answer · 2019-02-14 05:51:17Z

You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.

Update your PrintElem function with this and check

function PrintElem()
{
    var name = document.getElementById('name').value;
    var mobile_number =  document.getElementById('mobile_number').value;
    var age = document.getElementById('age').value;
    var gender = document.getElementById('gender').value;
    var divToPrint=document.getElementById('new_prescription_form');

    var newWin=window.open('','Print-Window');

    newWin.document.open();

    newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');

    newWin.document.close();

    setTimeout(function(){newWin.close();},10); 
}

Hope this works for you

Mayur Satav · Accepted Answer · 2019-02-14 05:46:46Z

<html>
<head>
    <title>jQuery example</title>
<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
    type="text/javascript">
 </script>

<script
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript">
</script>

<script type="text/javascript">
        $(document).ready(function() {
            $('#InputText').keyup(function() {
             $('#OutputText').val($(this).val());
             $('#DIVTag').html('<b>' + $(this).val() + '</b>');
            });
        });     
    </script>
</head>

<body>
    <div id="JQDiv">
        <form id="JQForm" action="">
            <p>
                <label for="InputText">
                Enter Name : 
                </label><br /> 
                <input id="InputText" type="text" name="inputBox" />
            </p>

            <p>
                <label for="OutputText">
                Output in box
                </label><br/> 

                <input id="OutputText" type="text" name="outputBox" readonly="readonly" />
            </p>
            <p>
                Output in div
            </p> 
                <div id="DIVTag"></div>
        </form>
    </div>
</body>
</html>

Similarly you can do it for other form fields. Also use angularjs to achieve same functionalities you can

This is what you are looking for? Let me know.

Thanks for your contribution. But this is not my targeted answer. I want to print the form value

Collectives™ on Stack Overflow

How to print a form value using jquery in html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related