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

我有以下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>

添加
名称
类型
地址
城市
陈述
邮政的
纬度
经度
取消
添加

由于这是一个添加表单，我想关闭表单并清除所有字段，但顶部隐藏的字段除外，这些字段是告诉我如何处理数据的标志。当我执行代码时，它会清除表单中的所有数据，包括隐藏字段，因此第二次我无法添加新记录

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

您正在清除所有

输入元素：

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

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

如果您只想清除其中的一部分，则需要专门针对您想要的对象。例如，如果要清除所有非隐藏的

输入

元素：

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

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

最糟糕的情况是，您必须将这一行代码转换为几行代码，以标识所需的元素。但只要有一些jQuery可选择的模式来识别您想要的，这就是您需要做的。

您正在清除所有

输入

元素：

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

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

如果您只想清除其中的一部分，则需要专门针对您想要的对象。例如，如果要清除所有非隐藏的

输入

元素：

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

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

最糟糕的情况是，您必须将这一行代码转换为几行代码，以标识所需的元素。但只要有一些jQuery可选择的模式来识别您想要的模式，这就是您需要做的。

改变这一点：

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

添加

因此，您只选择那些

类型不等于
隐藏的
的
输入
元素，请更改以下内容：

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

添加

因此，您只选择那些
类型不等于
隐藏的
的
输入
元素

对我来说，最好的方法是完全关闭表单，以便
不必删除表单中要更新的字段
当我再次尝试打开它时，会显示数据

如果隐藏字段是从服务器填充的，则可以重置表单，这样所有表单字段都将重置为页面重新加载期间的值

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

简单的方法

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'); 
}


函数resetForm（）{
$（'#项形式'）[0].reset（）；
$（此）.closest（“[data role=popup]”）。popup(‌​'关闭);；
}

对我来说，最好的方法是完全关闭表单，以便
不必删除表单中要更新的字段
当我再次尝试打开它时，会显示数据

如果隐藏字段是从服务器填充的，则可以重置表单，这样所有表单字段都将重置为页面重新加载期间的值

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

简单的方法

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'); 
}


函数resetForm（）{
$（'#项形式'）[0].reset（）；
$（此）.closest（“[data role=popup]”）。popup(‌​'关闭);；
}
是否要清除除隐藏输入之外的所有输入字段？对您试图完成的任务有点困惑。。。您是否试图发布表单并保留值。。。这样你就可以再次发布它了？@JordanDavis不，我想发布表单并清除隐藏值以外的值。@SaulOrtega啊，好的，现在知道了。。。使用David的答案将非常有效。是否要清除除隐藏输入外的所有输入字段？对您试图完成的任务有点困惑。。。您是否试图发布表单并保留值。。。这样你就可以再次发布它了？@JordanDavis不，我想发布表单并清除隐藏值以外的值。@SaulOrtega啊，好的，现在知道了。。。使用David的答案将非常有效。答案很好，但您需要避开
“
以与
onclick=”一起使用“
@SetSailMedia:Fair point，尽管我认为一个更理想的方法是首先将功能与标记分开，这样引用问题就可以简单地解决了。是的，我认为我必须避开这些问题，因为我在IDE中看到的是将它们标记为语法错误。@saulotega：可能类似这样：
.find（'input[键入！=\'hidden\']'）
这样它就根本不使用双引号，因此不应该干扰HTML属性。但是，老实说，这是代码和标记（或任何不同语言的代码）的一个重要原因应该分开。一种语言将另一种语言视为一个字符串，对该字符串的引用会影响它所包含的代码。这是一个很好的解决方案，kiranvj也是如此，我想将它标记为最好的，但不幸的是，我只能标记其中一种，而另一种用于“取消”和“保存”按钮。谢谢你。回答得好，但你很抱歉我需要避开
“
以与
onclick=”“
@SetSailMedia:Fair point一起使用，尽管我认为更理想的方法是首先将功能与标记分离，这样引用问题就可以简单地解决。是的