CODEWITHSUNDEEP
javascriptjqueryhtmlforms
VaTo
VaTo

Reputation: 3078

Clear only specific fields in HTML form when submitting

I have the following HTML form code:

<div data-role="popup" id="-add" data-theme="c" class="ui-corner-all" data-dismissible="false" data-overlay-theme="a" style="min-width:550px;">
    <div data-role="content"> <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" style="position:absolute;top:-20px;right:-15px;">Delete</a>

        <form id="item-form" action="#" formaction="process" data-ajax="false">
            <input type="hidden" name="type" value="hidden1" />
            <input type="hidden" name="how" value="hidden2" />
            <input type="hidden" name="loc" value="hidden3" />
            <input type="hidden" name="itemtype" value="hidden4" />
            <div align="left">
                 <h3> Add</h3>

            </div>
            <div class="popup-hrule"></div>
            <div class="ui-grid-a ui-responsive">
                <div class="ui-block-a">
                    <label for="location_name">Name</label>
                    <input type="text" name="location_name" id="location_name" value="">
                </div>
                <div class="ui-block-b" data-schema="types">
                    <label for="type_name">Type</label>
                    <select name="type_name" id="type_name">
                        <option data-item=".textarea:name; .value:id; .repeat:true"></option>
                    </select>
                </div>
                <div class="ui-block-a">
                    <label for="address">Address</label>
                    <input type="text" name="address" id="address" value="">
                </div>
                <div class="ui-block-b">
                    <label for="city">City</label>
                    <input type="text" name="city" id="city" value="">
                </div>
                <div class="ui-block-a">
                    <label for="state">State</label>
                    <input type="text" name="state" id="state" value="">
                </div>
                <div class="ui-block-b">
                    <label for="zip">Postal</label>
                    <input type="number" name="zip" id="zip" value="">
                </div>
                <div class="ui-block-a">
                    <label for="_lat">Latitude</label>
                    <input type="number" name="_lat" id="_lat" value="">
                </div>
                <div class="ui-block-b">
                    <label for="_lon">Longitude</label>
                    <input type="number" name="_lon" id="_lon" value="">
                </div>
            </div> <a data-role="button" data-inline="true" onclick="$(this).closest('[data-role=popup]').popup('close');">Cancel</a>
 <a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>

        </form>
    </div>
</div>

Since this is an ADD form I would like to close the form and clear all the fields except for the hidden ones at the top which are flags that tell me what I have to do with the data. When I execute the code it clears all the data in the form including the hidden fields so the second time I can't add a new record.

A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.

Upvotes: 0

Views: 2652

Answers (3)

kiranvj
kiranvj

Reputation: 34107

A best approach for me would be to close the form completely so I don't have to erase the fields in the form which are going to get new data when I try to open it again.

$("#item-form").remove();

If the hidden fields are populated from server, you can reset the form, so all form fields will be reset to value which were there during page reload.

 $('#item-form')[0].reset();

The plain JS way of doing it

document.getElementById("item-form").reset();

Updated after discussion with OP

<a href="javascript:resetForm()">Cancel</a>

function resetForm() { 
   $('#item-form')[0].reset(); 
   $(this).closest('[data-role=popup]').popup(‌​'close'); 
}

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

Change this:

 <a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>

For this:

 <a data-role="button" data-inline="true" data-theme="a" onclick="$(this).closest('form').submit();$(this).closest('form').find('input[type!=\'hidden\']').val('');$(this).closest('[data-role=popup]').popup('close')">Add</a>

So that you are selecting just those input elements with type not equal to hidden.

Upvotes: 1

David
David

Reputation: 218798

You're clearing all input elements:

$(this).closest('form').find('input').val('');

If you want to clear only some of them, you need to target specifically the ones you want. For example, if you want to clear all non-hidden input elements:

$(this).closest('form').find('input[type!="hidden"]').val('');

Worst case would be that you have to turn this one line of code into a couple of lines of code to identify the elements you want. But as long as there's some jQuery-selectable pattern to identify the ones you want, that's what you need to do.

Upvotes: 2

Related Questions