2016-08-23 3 views
0

Я создавал форму для приема, используя Html5 и bootstrap. Но я хотел включить функцию, которую пользователь может распечатать на странице, прежде чем нажать кнопку отправки. Поэтому я применил onclick = window.print() нажатием кнопки печати. ​​Но к ужасу все значения полей очищаются, как только нажимается кнопка печати.Значения полей формы, очищаемых при onclick = window.print()

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title></title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
<form class="form-inline" id="sunrise" name="sunrise" method="post" action=""> 
<div class="row"> 
    <div class="form-group"> 
     <label>Father's Name:</label> 
     <input type="text" class="form-control" name="father" placeholder=""> 
    </div></div> <br/> 
    <div class="row"> 
    <div class="form-group"> 
     <label>Mother's Name:&nbsp;</label> 
     <input type="text" class="form-control" name="mother" placeholder=""> 
    </div> 
    </div> 
<br/> 
     <div class="row"> 
    <div class="form-group"> 
     <label>DOB:</label> 
     <input type="date" class="form-control" name="dob" placeholder=""> 
    </div> 
    </div> 
    <button type="Print" class="btn btn-default" id="print" onclick="window.print()">Print Application</button> 
    <button type="submit" class="btn btn-default" name="submit" value="submit">Submit</button> 


    </form> 

    </div> 
</body> 
</html> 

ответ

1

Измените недопустимый тип кнопки печати на действующий.

<button type="Print" class="btn btn-default" id="print" onclick="window.print()">Print Application</button> 

в

<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button> 

Поскольку тип «Печать» является недействительным, кнопка имеет поведение по умолчанию внутри формы, что представить, что делает перезагрузку страницы.

+0

Спасибо большое, что помощник не смог выяснить эту небольшую ошибку. – Abhishek

0

Лучше использовать type="button", а затем использовать type = "print". потому что он недействителен.

`<button type="button" class="btn btn-default" id="print" onclick="window.print()">Print Application</button>`