2016-08-23 62 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>`