提交时从表单中删除未更改的输入字段答案

【问题标题】：Remove unchanged input fields from Form while submit提交时从表单中删除未更改的输入字段
【发布时间】：2013-07-19 12:52:19
【问题描述】：

在我的网络应用程序中，我有编辑个人资料页面。在editprofile页面中，它们有很多字段，例如

Name            : <input type="text" name="name"/>
Location        : <input type="text" class="geolocation" name="location">
Birthdata       : <input type="date" name="dob">
Profile Picture : <input type="file" name="photo"/>

我只想发回已编辑字段的数据，而不是所有字段的数据。

【问题讨论】：

您是在使用标准的“提交”行为还是通过 web-services/wcf？对于 WCF/webservices，过滤项目将遵循 manoj 的解决方案（存储原始值并在包含值之前进行比较）。对于提交，您可能需要遵循 smerny 的解决方案（存储原始值并删除输入标签）。
我正在使用普通的表单提交。

标签： javascript jquery html forms validation

【解决方案1】：

我通常会在后端执行类似的操作....但根据您的要求，您可以删除未更改的输入。当您生成 html 时，您可以定义一个额外的数据属性。我会这样做：

HTML：

<form id="myform">
    <input type="text" id="Name" data-initial="Foo" value="Foo" />
    <input type="text" id="Location" data-initial="Bar" value="Bar" />
    <input type="submit" value="Submit" />
</form>

JS：

$("#myform").submit( function() {
    $(this).find("input").filter( function() {
        $this = $(this);
        return $this.data("initial") == $this.val();
    }).remove();
});

http://jsfiddle.net/uLe7T/
我在小提琴中添加了一个警报，因此您可以在提交表单之前看到它们已被删除

【讨论】：

【解决方案2】：

jsFiddle

HTML

<input id="test" type="text" value="Some Text" data-value="Some Text">

$('#test').blur(function() {
    el = $(this);
    if (el.val() != el.attr('data-value')) {
        console.log('Edited');
    } else {
        console.log('Not Edited');
    }
});

【讨论】：