提交时只清除HTML表单中的特定字段

Clear only specific fields in HTML form when submitting

本文关键字：字段 表单 清除 HTML 提交      更新时间：2023-09-26

我有以下HTML表单代码:

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

因为这是一个ADD表单，我想关闭表单并清除所有字段，除了隐藏的那些在顶部的标志，告诉我我要做什么与数据。当我执行代码时，它清除了表单中的所有数据，包括隐藏字段，所以第二次我不能添加新记录。

对我来说最好的方法是完全关闭表单，这样我就不必擦除表单中的字段，当我试图再次打开它时，这些字段将获得新数据

您正在清除所有 input元素:

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

如果你只想清除其中的一些，你需要专门针对你想要的那些。例如，如果要清除所有非hidden input元素:

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

最坏的情况是，您必须将这一行代码转换成几行代码来标识您想要的元素。但只要有一些jquery可选择的模式来识别你想要的，那就是你需要做的。

对我来说最好的方法是完全关闭表单，以便我不需要删除表单中的字段，这些字段会得到新的当我试图再次打开它时，数据

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

如果隐藏字段是从服务器填充的，您可以重置表单，所以所有表单字段将重置为页面重新加载时的值。

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

简单的JS方式

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

与OP讨论后更新

<a href="javascript:resetForm()">Cancel</a>
function resetForm() { 
   $('#item-form')[0].reset(); 
   $(this).closest('[data-role=popup]').popup(‌​'close'); 
}

修改如下:

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

: 

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

所以你只选择那些type不等于hidden的input元素

相关文章：