Json serialize is not serialize some html data using Jquery

Question

I have some dynamic form elements that should get value from some calculation based on the text fields. While serializing the calculated fields are not serialized.

The below code represents the exact scenario

Scenario:1 while i click add button it will create the new entry but the value is (cgst_val) not placed on the text box

Scenario:2 Json serialize is not take the value which calculated using the tax_val and 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>

`result[this.name] = this.value;` is overwritten each time because of the same name. Instead just do `myJSON = JSON.stringiFy($('form').serialize())` — mplungjan, Jul 09 '19 at 14:35
If you're only going to pull three values from the form, just pull the three values from the fields directly. I wouldn't even bother with `serialize`... — Heretic Monkey, Jul 09 '19 at 14:40
@HereticMonkey They add a row per click so unknown number of rows — mplungjan, Jul 09 '19 at 14:50
@mplungjan The existing code only ever pulls three values. It's not clear, to me, whether that's intended behavior or not; they could be saving incrementally for all I know... — Heretic Monkey, Jul 09 '19 at 14:56

score 0 · Answer 1 · answered Jul 09 '19 at 14:34

0

You dont need the each statement to serialize all fields. Looking at your code you could do something like this:

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

answered Jul 09 '19 at 14:34

Ion

1,262
12
19

mplungjan · Answer 2 · 2019-07-09T14:48:51.217

result[this.name] = this.value; is overwritten each time because of the same name.

Instead just do this (and remember the preventDefault if you need to ajax

Also you need to NOT have disabled if you want to pass a field. I made the cs field grey and readonly

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

Thanks for your reply in this case the second dynamic element is not get value into cgst_val text box — V. Monisha, Jul 09 '19 at 14:40
@mplugjan Thanks for your reply it works fine but i need serializeArray(); with input name and value — V. Monisha, Jul 10 '19 at 07:43
https://stackoverflow.com/questions/10430502/whats-the-difference-between-serialize-and-serializearray — mplungjan, Jul 10 '19 at 07:53

Json serialize is not serialize some html data using Jquery

2 Answers2