Доступ к значениям FormData

Ответ 1

Кажется, вы не можете получить значения элемента формы, используя FormData.

Объект FormData позволяет вам скомпилировать набор пар ключ/значение для отправки используя XMLHttpRequest. В первую очередь предназначен для использования при отправке формы данные, но могут использоваться независимо от форм для передачи keyed data. Переданные данные в том же формате, что и форма Метод submit() будет использовать для отправки данных, если тип кодировки формы были установлены "multipart/form-data".

Однако вы можете достичь этого, используя простой Javascript, подобный этому

var formElements = document.forms['myform'].elements['inputTypeName'].value;

Ответ 2

Во-первых, я не думаю, что можно построить объект FormData из формы, как вы указали, и чтобы получить значения из формы, используйте метод, описанный в принятом ответе - это больше добавление!

Похоже, вы можете получить некоторые данные из объекта formdata:

var formData = new FormData();
formData.append("email", "[email protected]");
formData.append("email", "[email protected]");
formData.get("email");

К сожалению, это вернет только первый элемент для этого ключа, в этом случае он вернет '[email protected]'

См. также: Статья MDN по методу formdata get

Надеюсь, это поможет!

Также обратите внимание, что если вы хотите протестировать это в хроме, вам нужно включить флаг экспериментальных веб-функций:

Примечание. Поддержка Chrome для методов, отличных от append, в настоящее время позади флаг "Включить экспериментальные возможности веб-платформы".

страница MDN; в разделе совместимости браузера

Ответ 3

FormData.get будет делать то, что вы хотите в небольшом подмножестве браузеров - посмотрите на таблицу совместимости браузеров, чтобы узнать, какие из них (в настоящее время только Chrome 50+ и Firefox 39+). Учитывая эту форму:

<form id="form">
  <input name="inputTypeName">
</form>

Вы можете получить доступ к значению этого входа через

var form = new FormData(document.getElementById("form"));
var inputValue = form.get("inputTypeName");

Ответ 4

Просто чтобы добавить к предыдущему решению из @Jeff Daze - вы можете использовать FormData.getAll("key name") для извлечения всех данных из объекта.

Ответ 5

Это решение для извлечения пар ключ-значение из FormData:

var data = new FormData( document.getElementById('form') );
data = data.entries();              
var obj = data.next();
var retrieved = {};             
while(undefined !== obj.value) {    
    retrieved[obj.value[0]] = obj.value[1];
    obj = data.next();
}
console.log('retrieved: ',retrieved);

Ответ 6

Другое решение:
HTML:

<form>
<input name="searchtext"  type="search" >'
<input name="searchbtn" type="submit" value="" class="sb" >
</form>

JS:

$('.sb').click( function() {
    var myvar=document.querySelector('[name="searchtext"]').value;
    console.log("Variable value: " + myvar);
});

Ответ 7

Согласно MDN:

Объект, реализующий FormData, может напрямую использоваться в структуре for... структуры, а не entry(): for (var p of myFormData) эквивалентен for (var p of myFormData.entries())

Поэтому вы можете получить доступ к значениям FormData следующим образом:

var formData = new FormData(myForm);

for (var p of formData) {
    let name = p[0];
    let value = p[1];

    console.log(name, value)
}