Javascript 从表单中已更改的字段中获取值和名称

我试图创建一个表单，一旦按下submit底部，我就可以看到更改为的字段的名称和值

例如，如果我有两个字段，1。姓名和地址2。地址。如果我更改名称字段，我将看到“名称”及其更改为的值（但不会看到任何其他已更改的字段）

在用拖网捕鱼之后，我发现了一些帮助我的代码。但是，它序列化了数据，我希望采用不同的格式，即

<h3>Name: VALUE</h3>
<br>
<h3>Address: VALUE</h3>

---

jsiddle:

Jquery具有

.serializeArray（）

方法来获取作为名称和值数组的表单元素

使用此方法以数组形式获取表单值并使用它显示

样本输出：

[{“name”：“name”，“value”：“John”}，{“name”：“item”，“value”：“A”}]

检查下面的代码片段

$（文档）.ready（函数（）{
$（'input，select，textarea'）。在（'change'，function（）上{
$（this.addClass（'changed'）；
});
$（'form'）。在（'submit'，function（）上{
$（'input:not（.changed），textarea:not（.changed））.prop（'disabled'，true）；
var data=$（this.serializeArray（）；
var displayHtml=data.map（函数（val）{
返回“+val.name+”：“+val.value+”；
}).加入（“
”）；
$（“#changedvalue”）.html（displayHtml）；
返回false；
});
});

名称：


项目：


发送
Jquery有
.serializeArray（）
方法来获取表单元素作为名称和值的数组

使用此方法以数组形式获取表单值并使用它显示

样本输出：

[{“name”：“name”，“value”：“John”}，{“name”：“item”，“value”：“A”}]

检查下面的代码片段


$（文档）.ready（函数（）{
$（'input，select，textarea'）。在（'change'，function（）上{
$（this.addClass（'changed'）；
});
$（'form'）。在（'submit'，function（）上{
$（'input:not（.changed），textarea:not（.changed））.prop（'disabled'，true）；
var data=$（this.serializeArray（）；
var displayHtml=data.map（函数（val）{
返回“+val.name+”：“+val.value+”；
}).加入（“
”）；
$（“#changedvalue”）.html（displayHtml）；
返回false；
});
});

名称：


项目：


发送
谢谢！很好！我正在尝试将函数映射到特定的按钮。例如：$（“#help:submit”）。单击（函数（），但没有多大成功！如何将其映射到具有帮助id的按钮？谢谢！您的表单是否具有id“help”？表单名为“验证表单”。我有一个名为“帮助”的提交按钮当您单击“提交”按钮时，将触发“提交”事件。添加“单击”事件不是最佳做法。您可以将函数放置在其中，然后返回true以触发表单提交。好的，只是我有4个按钮都是提交的！谢谢！效果很好！我正在尝试将函数映射到特定的按钮。例如：$（“#help:submit”）。单击（函数（），但没有多大成功！如何将其映射到具有帮助id的按钮？谢谢！您的表单是否具有id“help”？表单名为“验证表单”。我有一个名为“help”的提交按钮单击“提交”按钮时，将触发“提交”事件。添加“单击”事件不是最佳做法。您可以将函数放在其中，然后返回true以触发表单提交。好的，我只有4个按钮都是提交！
<form>
  Name:<input type="text" name="name" /><br/><br/>
  Address:<input type="text" name="Address" /><br/><br/>
  <button type="submit">Submit</button>
</form>

<div class="changed_values "></div>

$(document).ready(function() {
  $('input, select, textarea').on('change', function() {
    $(this).addClass('changed');
  });

  $('form').on('submit', function() {
    $('input:not(.changed), textarea:not(.changed)').prop('disabled', true);

    $( ".changed_values" ).prepend( $(this).serialize() );
    return false;
  });
});