Question

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

例如，如果我有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/

Answer 1

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>

从格式已更改的字段中获取值和名称

1 个答案: