JSON - передача входного значения формы в виде строки json - PullRequest
Новая
       28

JSON - передача входного значения формы в виде строки json

1 голос
/ 15 мая 2019

Я использую <input type="text"> для хранения коллекции значений форм, которые обрабатываются с помощью JavaScript.

В JavaScript значение имеет такую ​​структуру 

{"family":"Johnsons","Johnsons":{"girls":["Anna","Bella"],"boys":["Robert"]}}

, поэтому приведенный выше вводвыглядит так, как ДО отправки формы 

<input id="main" type="text" 
       value="{"family":"Johnsons","Johnsons":{"girls":["Anna","Bella"],"boys":["Robert"]}}">

После сохранения формы я получаю это вместо 

<input id="main" type="text" 
       value="{"family":"Johnsons","girls":"Anna","boys":"Robert"}">

Значение ввода задается с помощью этого кода, и я подозреваю, что это должно быть проблемой: 

// the input
var main = document.getElementById('main');
// the content structure before JSON.stringify
var content = {
  family: "Johnsons",
  Johnsons: {
    girls: [ "Ana", "Bela" ],
    boys: [ "Robert" ]
  }
};
main.value = JSON.stringify(content).replace( /\"/g, '\"');
main.setAttribute('value', main.value);

console.log(main.value);
<input id="main" type="text">

Мне нужно ванильное решение JavaScript, но я благодарю вас за любой ответ.

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

Просто нанизывать не нужно .replace(). Также обратите внимание, что для ввода назначен атрибут name со значением "content", поэтому при отправке формы значение будет отправлено на сервер. 

var form = document.forms.form;
var main = form.elements.main;

var content = {
  family: "Johnsons",
  Johnsons: {
    girls: ["Ana", "Bela"],
    boys: ["Robert"]
  }
};

main.value = JSON.stringify(content);

console.log(main.value);
<form id='form' action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='response'>
  <input id="main" name='content' type="text"><input type='submit'>
</form>
<iframe name='response'></iframe>
1 голос
/ 15 мая 2019

Вы можете попробовать изм 

var main = document.getElementById('main');

var content = {
  family: "Johnsons",
  Johnsons: {
    girls: [ "Ana", "Bela" ],
    boys: [ "Robert" ]
  }
};
main.value = JSON.stringify(content, undefined, 2);
<input id="main"></input>

pre сообщает движку браузера, что содержимое внутри предварительно отформатировано и может отображаться без каких-либо изменений. Таким образом, браузер не будет удалять пробелы, новые строки и т. Д. Код для того, чтобы сделать его более семантическим, и обозначает, что содержимое внутри является фрагментом кода. Это не имеет ничего общего с форматированием. Рекомендуется использовать вот так: <pre><code> /* Your code snippet here. */ 

<code><pre id="main">
...