Question

假设我有一个带有一些输入值（姓名，mobile_number，年龄和性别）的表格。

在单击“提交”按钮后填写表单后，我要打印表单值。

我已经尝试使用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); 
    }

该如何解决？任何人都可以帮忙。

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

希望这对您有用

Answer 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实现相同的功能

这是您要寻找的？让我知道。

如何在HTML中使用jquery打印表单值

2 个答案: