Question

我是jquery world的新手，而来自Coldfusion的html5。我有一个正确提交的简单表单。我希望用户能够在不提交的情况下清除表单。使用代码，它可以清除数据 - 但无论如何都会提交表单。我只是希望它保持不变，以便用户有一个干净的石板可以使用。我确定这很简单，但我找不到它。

代码snippit如下所示。

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

Answer 1

我希望以下代码可以帮助您尝试此代码并重置表单，以便用户可以添加新值。

@Html.DropDownListFor(x => x.SelectedCountry, Model.Countries,string.Empty)

或此代码也适合您。

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

Answer 2

你甚至不需要javascript来实现这一目标。它本身已经内置到HTML中......

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

Answer 3

为此最好使用jquery，因为您的textarea的{{1}}为id，输入的id="comments";为id

id="text";

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

3 个答案: