is there a way to clear out form fields for a form that has an id?

Question

Currently, the following form fields are being cleared out by the jQuery shown:

HTML form:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

jQuery:

// clear out form fields
$('#add input[name="name"]').val('');
$('#add input[name="model"]').val('');
$('#add input[name="color"]').val('');

Is there a way to write a selector such that all inputs of type "text" in the form with an ID of "add" will be cleared out?

9/22/2019 edit: The form fields get cleared out by jQuery as part of the addMobile() function in an AJAX call. So, if the add is successful part of the .done logic is to clear out the form fields. The purpose of the Cancel button is to give the user a way to clear out the fields manually if desired.

@j08691 I think jquery does, but if not then vanilla JS does — bassxzero, Sep 20 '19 at 00:27
@bassxzero I don't believe that it does, and you can't use the native method directly on a jQuery object — j08691, Sep 20 '19 at 00:30
@j08691 Thank-you for pointing out my error with ``. I'll leave the original post as-is so others can read your comment and see the context but will fix it in my project. — knot22, Sep 20 '19 at 00:33
@knot22 it selects the first vanilla JS object from the jquery collection. — bassxzero, Sep 20 '19 at 00:39

score 1 · Answer 1 · answered Sep 20 '19 at 05:44

Remove type="reset" attribute. Because that attibute prevents you.

This method assigns the desired value to all text fields within the form you specify.

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button onClick="ClearTextInputs('add')">Cancel</button>
</form>

<script>
function ClearTextInputs(formId){
    //$("#"+formId+" input:text").val("You Value"); //New Value
      $("#"+formId+" input:text").val(""); //Remove value
    }
</script>

score 0 · Answer 2 · answered Sep 20 '19 at 05:21

If you add class to the input tags you want to clear then, It would be quite simple as below. You can also use conditional cases to clear the values inside the forms.

HTML Code:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" class="clearMe" name="name" id="add_name" value="rarara"/>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" class="clearMe" name="model" id="add_model" value="bababa"/>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" class="clearMe" name="color" id="add_color" value="tataata"/>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button type="reset">Cancel</button>
</form>

Jquery:

$('.clearMe').val('');

jsfiddle.

score 0 · Accepted Answer · answered Sep 22 '19 at 18:34

0

I ended up using this: $('#add').trigger('reset');

See this link, specifically the answer from @user768680 dated Mar 17 '13 at 18:45.

answered Sep 22 '19 at 18:34

knot22

2,648
5
31
51

score 0 · Answer 4 · answered Oct 10 '19 at 06:26

You can directly get group of input[type=text] and reset all together.

HTML CODE:

<form action="" method="post" id="add">
    <legend>Add Mobile</legend>
    <ol>
        <li>
        <label for="add_name">name</label>
            <input type="text" name="name" id="add_name"></input>
        </li>
        <li>
            <label for="add_model">model</label>
            <input type="text" name="model" id="add_model"></input>
        </li>
        <li>
            <label for="add_color">color</label>
            <input type="text" name="color" id="add_color"></input>
        </li>                               
    </ol>
    <button type="button" onclick="addMobile()">Submit</button>
    <button onClick="clearMe()">Cancel</button>
</form>

JS:

function clearMe() { 
    $('form').find("input[type=text]").reset();
}

is there a way to clear out form fields for a form that has an id?

4 Answers4