javascript - 为什么单击按钮后文本字段值被清除？

Question

qr.php

 <form id="contactForm" class="forma" method="post">

      <h1 id="datah1">Your data</h1>
      <div class="formcontainer">
      <hr class="hr3"/>
      <div class="container">
        <label for="uname" id="fullnameofres"><strong>Full name of your restaurant</strong></label>
        <input  type="text" name="textfieldtest" id="user_value" placeholder="Full name of your business.." name="user_value" required>

        <label for="psw"><strong>Number of tables</strong></label>
        <input type="text" id="nr_tables" placeholder="How many tables you have..." name="nr_tables" required>

        <hr class="hr1">
        <div id="templatesDiv">

        <label for="psw"><strong>Template</strong></label>
        <button id="tmplt_btn" onclick="go_to_templates_grid()" style="margin-bottom: 15px">Click here for all templates </button>

        </div>
        <div> 
        You selected : <b> <span id="templateResult" name="templateResult"> </b>
        </div>        
        <hr class="hr2">
        <label for="psw"><strong>Do you have menu</strong></label>
        <!-- <input type="text" id="menu_choice" placeholder="Yes/No" name="menu_choice" required> -->
        <select name="menu_dropdown" id="menu_dropdown">
        <option value="None" selected disabled > Yes/No </option>
         <option value="Yes">Yes</option>
         <option value="No">No</option>
          </select>
      </div>
      <button type="submit" id="submitara" name="submit">Submit</button>   
    </form>

预期行为:用户填写字段，单击“单击此处获取所有模板”后，打开另一个 php 文件，用户选择模板，返回 qr.php，提交表单就这样。

问题是在单击“单击此处获取所有模板”后，在文本字段中键入的所有数据都被清除了。

Answer 1

按钮 的默认类型 是提交，因此当您单击该按钮时，您将提交表单。添加:type="button" 到 button 代码，这样它只会运行您的函数而不提交。

<button type="button" id="tmplt_btn" 
        onclick="go_to_templates_grid()" 
        style="margin-bottom: 15px">Click here for all templates </button>