重置表单字段正在提交表单jquery答案

【问题标题】：Reset form field is submitting form jquery重置表单字段正在提交表单jquery
【发布时间】：2016-09-25 15:43:27
【问题描述】：

我是 jquery 世界和 html5 的新手，来自 Coldfusion。我有一个正确提交的简单表格。我希望用户能够在不提交的情况下清除表单。使用原样的代码，它确实清除了数据 - 但表单仍然提交。我只是希望它保持原样，以便用户可以使用干净的石板。我敢肯定这真的很简单，但我就是找不到。

代码片段如下所示。

<form class="comment_form" action="recordcomments.cfm" method="post" name="comment_form">
  <div class="row">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-10">

      <label for="comments">Comment</label>
      <textarea name="comments" id="comments"></textarea>
      <cfoutput>
        <input type="hidden" value="#URL.TicketIdentifier#" Name="TicketIdentifier">
      </cfoutput>

    </div>
  </div>
  <div class="row">
    <div class="col-xs-1">
    </div>
    <div class="col-xs-10">

      <button id="submit-comment" class="button icon-save c-success">Submit comment</button>
      <button id="reset-textbox" class="nobackground icon-ccw c-info">Reset text box</button>
    </div>
  </div>

</form>

</section>
</main>
</div>
</div>
<footer class="footer">
  <div class="footer-meta col-xs-12">
    <div class="row">
      <div class="col-sm-3">
        <a href="http://lutherconsulting.com">
                            &copy; 2016, Luther Consulting, LLC</a>
      </div>
      <div class="col-sm-6">
        <a class="icon-location c-inverse">10435 Commerce Drive, Suite 140, Carmel, IN 46032</a>
      </div>
      <div class="col-sm-3">Technical Support&nbsp;<a href="tel:866.517.6570" class="icon-phone c-inverse">866.517.6570, Option 1</a>
      </div>
    </div>
  </div>
</footer>
</Cfif>
<br>

<script type="text/javascript">
    $('#window-close').click(function() {
        window.open('', '_self', ''); window.close();
    });
    $('#submit-comment').click(function() {
        window.open('recordcomments.cfm', '_self');
    });
    $('#reset-textbox').click(function() {
        $('#comments').val('');
    });
</script>

</body>

【问题讨论】：

在表单的提交事件上使用 ajax 并使用 preventDefault 来阻止页面更改 - 然后添加 type=button:<button type="button" ....

标签： jquery forms submit

【解决方案1】：

我希望下面的代码能帮助你我尝试这个代码并重置表单，所以用户可以添加新值。

 $('#reset-textbox').click(function() {
    document.getElementsByClassName("comment_form").reset();
});

或者这个代码也适合你。

  $('#reset-textbox').click(function() {
    $('.comment_form')[0].reset();
});

【讨论】：

【解决方案2】：

您甚至不需要 javascript 来实现这一点。它已经原生地内置在 HTML 中...

<input type="reset" value="Reset text box" class="nobackground icon-ccw c-info" />

【讨论】：

【解决方案3】：

最好为此使用 jquery，因为您的 textarea 有一个 id 或 id="comments"; 给您的输入一个 id 或 id="text";

<script>
     $(document).ready(function(){
     $('#reset-textbox').click(function() {
     $('#comments').val('');
     $('#text').val('');
     });
</script>

【讨论】：