Question

我有一些动态表单元素，这些表单元素应从基于文本字段的某些计算中获取价值。序列化时，计算的字段未序列化。

下面的代码代表确切的情况

场景：1 当我单击添加按钮时，它将创建新条目，但是值（cgst_val）不在文本框中

场景：2 Json序列化不采用使用tax_val和tax_per

计算的值

$(document).ready(function() {
  $("#add").click(function() {
    var $clone = $('#container .group:first').clone();
    $clone.find('input').val('');
    $clone.find('select').val('2');
    $clone.append('<a href="#" class="remove">X</a>');
    $clone.appendTo('#container');
  });
  $("#container").on('click', '.remove', function() {
    $(this).parent('.group').remove();
  });
  $('#container').on('input, change', ".P_tax_per", ".P_state", function() {
    var $group = $(this).closest('.group');
    var num1 = parseInt($group.find(".P_tax_val").val(), 10) || 0;
    var num2 = parseInt($group.find(".P_tax_per").val(), 10) || 0;
    var num3 = num1 / num2 * 100;
    $group.find(".P_cgst_val").attr('value', num3);
  });
});


$("form").submit(function() {
  var result = {};
  $.each($('form').serializeArray(), function() {
    result[this.name] = this.value;
  });
  var jsonData1 = {
    tax_val: result.tax_val,
    tax_per: result.tax_per,
    cgst_val: result.cgst_val
  };
  var myJSON = JSON.stringify(jsonData1);
  alert(myJSON);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="button" id="add" value="ADD" />
  <div id="container">
    <div class="group">
      <input type="text" name="tax_val" class="P_tax_val" />
      <select name="tax_per" class="P_tax_per">
        <option disabled selected value>GST %</option>
        <option value="5">5</option>
        <option value="12">12</option>
      </select>
      <input type="text" name="cgst_val" class="P_cgst_val" size="3" placeholder="cs" value="" disabled />
    </div>
  </div>
  <input type="submit" name="SUBMIT" />
</form>

Answer 1

您不需要each语句来序列化所有字段。查看您的代码，您可以执行以下操作：

$("form").submit(function() {
  var myJSON = JSON.stringify($('form').serializeArray());
  alert(myJSON);
});

Answer 2

每次

result[this.name] = this.value;都会因为相同的名称而被覆盖。

只需执行此操作（如果需要使用ajax，请记住preventDefault

如果您要传递字段，也不需要禁用它。我将CS字段设为灰色且只读

$(document).ready(function() {
  $("#add").click(function() {
    var $clone = $('#container .group:first').clone();
    $clone.find('input').val('');
    $clone.find('select').val('2');
    $clone.append('<a href="#" class="remove">X</a>');
    $clone.appendTo('#container');
  });
  $("#container").on('click', '.remove', function() {
    $(this).parent('.group').remove();
  });
  $('#container').on('input, change', ".P_tax_per, .P_state", function() {
    var $group = $(this).closest('.group');
    var num1 = parseInt($group.find(".P_tax_val").val(), 10) || 0;
    var num2 = parseInt($group.find(".P_tax_per").val(), 10) || 0;
    var num3 = num1 / num2 * 100;
    $group.find(".P_cgst_val").val(num3);
  });
});


$("form").submit(function(e) {
  e.preventDefault();
  var myString= JSON.stringify($("form").serialize());
  alert(myString);
});

.P_cgst_val { background-color:#EBEBE4 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="button" id="add" value="ADD" />
  <div id="container">
    <div class="group">
      <input type="text" name="tax_val" class="P_tax_val" />
      <select name="tax_per" class="P_tax_per">
        <option disabled selected value>GST %</option>
        <option value="5">5</option>
        <option value="12">12</option>
      </select>
      <input type="text" name="cgst_val" class="P_cgst_val" size="3" placeholder="cs" value="" readonly />
    </div>
  </div>
  <input type="submit" name="SUBMIT" />
</form>

JSON序列化不使用jQuery序列化一些HTML数据

2 个答案: