如何在html中使用jquery打印表单值答案

【问题标题】：How to print a form value using jquery in html如何在html中使用jquery打印表单值
【发布时间】：2019-02-14 05:16:04
【问题描述】：

假设我有一个包含一些输入值（姓名、手机号码、年龄和性别）的表单。

在我点击提交按钮的同时填写表单后，我想打印表单值。

我已经尝试过使用 jQuery，但没有得到确切的结果。

这是我的结果

但我想像这样打印表单数据

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

这是我的表格

<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); 
    }

如何解决这个问题？请任何人帮忙。

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

您必须获取输入字段的值并将其添加到打印 HTML 中，这可以使用 JavaScript 来实现，您不需要 JQuery。

用这个更新你的 PrintElem 函数并检查

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); 
}

希望这对你有用

【讨论】：

【解决方案2】：

<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>

类似地，您可以对其他表单字段执行此操作。也可以使用 angularjs 来实现相同的功能

这就是你要找的东西？告诉我。

【讨论】：

感谢您的贡献。但这不是我的目标答案。我想打印表单值