Question

我正在使用Html5和bootstrap创建一个录取表单。但是我想要包含一个功能，用户可以在单击提交按钮之前打印出页面。所以我在点击时应用了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>

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

由于“打印”类型无效，因此该按钮在表单内部具有默认行为（即提交），使页面重新加载。

Answer 2

最好使用type="button"然后使用type =＆＃34; print＆＃34;。因为它无效。

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

在onclick = window.print（）中刷新表单字段值

2 个答案: