Reset form field is submitting form jquery

Question!

I'm new to jquery world and html5 coming over from Coldfusion. I have a simple form which submits correctly. I want the user to be able to clear the form WITHOUT submitting. With the code as it is, it DOES clear the data - but the form submits anyway. I just want it to stay put so the user has a clean slate to work with. I'm sure this is really simpled, but I just can't find it.

Code snippit is shown below.

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


Answers

You do not even need javascript to achieve this. It is already built into HTML natively...

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


I hope following code will help you i try this code and it reset the form, so user can add new value.

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

or this code also work for you.

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


Disable attribute only associates button and input filelds, the thing you want to do here is , event.preventDefault . It will work like disable, but it will depend upon your coding, if you want to show it disabled, you have to add add via jquery



This video can help you solving your question :)
By: admin