Как напечатать значение формы, используя jquery в html - PullRequest
Новая
       2

Как напечатать значение формы, используя jquery в html

0 голосов
/ 14 февраля 2019

Предположим, у меня есть форма с некоторыми входными значениями (имя, номер мобильного телефона, возраст и пол).

После заполнения формы, пока я нажимаю кнопку отправки, я хочу напечатать значения формы.

Я уже пробовал использовать jQuery, но не получил точный результат.

Вот мой результат

enter image description here

Но я хочу напечатать данные формы следующим образом 

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

Как решить эту проблему?Кто-нибудь, помогите, пожалуйста.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Вы должны получить значения полей ввода и добавить их в 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); 
}

Надеюсь, это работает для вас

0 голосов
/ 14 февраля 2019 
<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>

enter image description here

Аналогичным образом вы можете сделать это для других полей формы.Также используйте angularjs для достижения тех же функций, которые вы можете

Это то, что вы ищете?Дайте мне знать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...