时间戳

首页 > 解决方案 > 从表单中已更改的字段中获取值和名称

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

问题描述

我正在尝试创建一个表单，一旦按下提交底部，我就可以看到已更改为的字段的名称和值。

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

在搜索 SO 和网络之后，我发现了一些对我有帮助的代码。然而，它序列化数据，我想以不同的方式格式化，即

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

（注意：我只想查看输入已更改的值和名称）

按下提交按钮后，如何查看名称属性和新输入的值？

这是我正在使用的代码：

HTML

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

jQuery

$(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;
  });
});

一个 JSfiddle：http: //jsfiddle.net/avveldev/52zgy87v/

标签： javascriptjqueryhtml

解决方案

Jquery 具有.serializeArray()将表单元素作为名称和值数组获取的方法。

使用此方法将表单值作为数组获取并使用它来显示。

样本输出：

[{"name":"name","value":"John"},{"name":"item","value":"A"}]

检查以下代码段。

$(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);
    
    var data = $(this).serializeArray();
    var displayHtml = data.map(function(val){
    	
      return '<h3>'+val.name+': '+val.value+'</h3>';
    	
    }).join('<br>');
    
    $("#changedValues").html(displayHtml);
    
    return false;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="submit.php" method="get">
  Name:<input type="text" name="name" /><br/><br/>
  Item:<input type="text" name="item" /><br/><br/>
  <button type="submit">send</button>
</form>

<div id="changedValues">

</div>

推荐阅读