フォームフィールドをリセットしていますフォームjquery

Question

jquery worldとhtml5がColdfusionからやってくるのが初めてです。私は正しく提出する簡単なフォームを持っています。私は、ユーザーが提出することなくフォームをクリアできるようにしたい。コードはそのままで、データをクリアしますが、フォームはとにかく送信されます。私はちょうどそれがユーザーが清潔なスレートを使用するように置いておきたい。私はこれが本当にシンプルだと確信していますが、私はそれを見つけることができません。

コード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

このコードを試してみて、フォームをリセットして新しい値を追加できるようにしてください。

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

またはこのコードも機能します。

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

Answer 2

これを達成するためにJavaScriptは必要ありません。それは、すでにフォームとのpreventDefaultの提出イベントに

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