Apending key values to existing json object using jquery

Question

I have two forms. When first form gets submitted new json object will be created, as second form submits I want append those data to existing json object through jquery.

I try to achieve this on some how using object.assign() function, this will create new object by combining other objects but in my case I want to append for the existing object itself. as well If I want to Update the same object (only Values) on click of button how can I able to achieve this ?

$(document).ready(function() {
  var Json_form, Json_form_1, Json_form_2, jsonArray;
});

$('#submitOne').click(function() {
  $("#formOne").submit(function(e) {
    e.preventDefault();
    Json_form = ConvertFormToJSON(formOne);

  });
});

$('#submitTwo').click(function() {
  $("#formTwo").submit(function(e) {
    e.preventDefault();
    Json_form_1 = ConvertFormToJSON(formTwo);
    jsonArray = Object.assign(Json_form, Json_form_1);
    console.log(jsonArray);
  });
});

function ConvertFormToJSON(form) {
  var array = jQuery(form).serializeArray();
  var json = {};
  jQuery.each(array, function() {
    json[this.name] = this.value || '';
  });
  return json;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<form id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>

hope this will helpful:- how to add key value pair in the JSON object already declared — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Sep 27, 2019 at 11:59
Don't put code AFTER the </body> tag - and why do you want to convert? The serialise can take more parameters — mplungjan
– mplungjan, Commented Sep 27, 2019 at 11:59
Also this is such a weird construct $('#submitOne').click(function() { $("#formOne").submit(function(e) { — mplungjan
– mplungjan, Commented Sep 27, 2019 at 12:01

mplungjan · Accepted Answer · 2019-09-27 12:11:13Z

Your code worked for some reason, here it is vastly simplified

function ConvertFormToJSON(form) {
  var array = $(form).serializeArray();
  var json = {};
  $.each(array, function() {
    json[this.name] = this.value || '';
  });
  return json;
}


$(document).ready(function() {
  var Json_form, Json_form_1, Json_form_2, jsonArray;
  $("#formOne").on("submit", function(e) {
    e.preventDefault();
    Json_form = ConvertFormToJSON(this);
  });
  $("#formTwo").on("submit", function(e) {
    e.preventDefault();
    Json_form_1 = ConvertFormToJSON(this);
    jsonArray = Object.assign(Json_form, Json_form_1);
    console.log(jsonArray);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<form id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>

But perhaps you meant to do this?

var json = {}
function ConvertFormToJSON(form) {
  var array = $(form).serializeArray();
  $.each(array, function() {
    json[this.name] = this.value || '';
  });
  console.log(json);
}

$(document).ready(function() {
  $(".form").on("submit", function(e) {
    e.preventDefault();
    ConvertFormToJSON(this);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

<form class="form" id="formOne" method="post">
  <input type="text" name="firstname" id="fname"><br>
  <input type="text" name="lastname" id="lname"><br>
  <button type="submit" value="submit" id="submitOne"> add </button>
  <br>
</form>
<form class="form" id="formTwo" method="post">
  <input type="text" name="phone" id="phone"><br>
  <input type="text" name="email" id="email"><br>
  <button type="submit" value="submit" id="submitTwo"> add </button>
</form>

Yes this is what I was looking for , Thank you soo much for your solution and suggestions.

Collectives™ on Stack Overflow

Apending key values to existing json object using jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related