CODEWITHSUNDEEP
javascriptjqueryformsbuttonreset
starbucks
starbucks

Reputation: 3016

How do I use this JQuery code to clean input fields of their content onclick of reset button?

Code: 

<script type="text/javascript">
$(".reset_form").click(function() {
    $(this).closest('form').find("input, textarea").val("");
});
</script>

Button:

<div class="reset_form">
    <a class="anchor_link">
        <span class="reset_button">
            Reset
        </span>
    </a>
</div>

Using the code above I want to be able to clean input fields of their content when a user clicks on reset_form. However, being new to JS/JQuery I am unsure as to how to accomplish this since I am not using an input button but a div that looks like a button.

Question

How can i tweak my code so that when a user clicks on .reset_button that the fields will be cleared?

Upvotes: 0

Views: 3787

Answers (4)

Jedediah
Jedediah

Reputation: 1944

<div class="form-container">
    <form>
        <input type="text" />
        <textarea></textarea>
    </form>
    <div class="clear-form">
        <span class="reset_button">Reset form</span>
    </div>
</div>

$(document).ready(function() {
    $('.clear-form').on('click', function() {
        $(this).closest('.form-container').find('input, textarea').val('');
    });
});

Fiddle

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

In order to help you use the DOM traversal selectors like closest() and find(), it is first necessary to know roughly where your form is in relation to the .reset_form <div>, does it have an ID attribute (which makes it very easy to select the form), etc.

However, assuming there is only one form on the page, then this code will work:

Working jsFiddle example

$(".reset_form").click(function() {
    $('form').find("input, textarea").val("");
});

As Jedediah mentions below, the above code will reset/clear all forms on the page. If you only wish to clear one specific form, then you can specify an ID in your form tag, thus:

<form id="justthisform"> ...  </form>

You can clear only that form by modifying the active line as follows:

$('#justthisform').find("input, textarea").val("");

Upvotes: 1

chug187
chug187

Reputation: 137

Well one thing to note is that HTML forms natively support resetting via a reset function in the browser:

$(".reset_form").click(function() {
  $(this).closest('form')[0].reset();
});

But yeah if your function isn't working then it looks like your (fake) button isn't embedded within the form itself. jQuery's .closest() function will find the form if you do

$(this).closest("form")

So the only thing you need to fix is finding that form.

Upvotes: 0

Shawn E
Shawn E

Reputation: 472

If you want to clear all elements in the form (radio reset to defaults, dropdowns, etc) you can use the native reset on the form DOM object but use jquery to find it like this:

<script type="text/javascript">
$(".reset_form").click(function() {
    $(this).closest('form')[0].reset();
});
</script>

Upvotes: 0

Related Questions