Присоединение значений ключа к существующему объекту json с помощью jquery - PullRequest
0 голосов
/ 27 сентября 2019

У меня есть две формы.Когда первая форма будет отправлена, будет создан новый объект json, а во время отправки второй формы я хочу добавить эти данные к существующему объекту json через jquery.

Я пытаюсь добиться этого в некоторых случаях, используя функцию object.assign (),это создаст новый объект путем объединения других объектов, но в моем случае я хочу добавить сам существующий объект.а также если я хочу обновить один и тот же объект (только значения) при нажатии кнопки, как я могу добиться этого?

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

1 Ответ

1 голос
/ 27 сентября 2019

Ваш код работал по какой-то причине, здесь он значительно упрощен

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>

Но, возможно, вы хотели это сделать?

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...