JavaScript - получение значений HTML-формы

112

Как я могу передать значение HTML-формы в JavaScript?

Это верно? Мой скрипт принимает два аргумента: один из текстового поля, один из раскрывающегося списка.

<body>
<form name="valform" action="" method="POST">

Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
  <option value="visa">Visa</option>
  <option value="mastercard">MasterCard</option>
  <option value="discover">Discover</option>
  <option value="amex">Amex</option>
  <option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>
javascript html user377419
источник
2
Что именно вы подразумеваете под «значением формы в HTML-коде»?
Пекка
7
вопрос вполне ясен
laurentngu
1
@laurentngu вопрос является ли он имел в виду «значение в HTML - форме», что означает одно значение из из множества значений, или же он означает « значение всей формы HTML», то есть все значения в один большой «Сериализированная "value
bluejayke
Вопрос ясен ... но ясно, что передавать значение формы не имеет большого смысла.
Матфей

Ответы:

115

HTML:

<input type="text" name="name" id="uniqueID" value="value" />

JS:

var nameValue = document.getElementById("uniqueID").value;
user406632
источник
7
@ shorty876: Ты сам это тестировал? o_0 Это был бы неплохой способ определить, правильно ли вы сделали.
Джефф Руперт,
1
Да, но он просто возвращает истину / ложь, и я не знаю, как определить, была ли функция вообще вызвана. Таким образом, вы можете помочь.
user377419
Я попробовал это, но nameValueэто значение по умолчанию, а не то, что ввел пользователь.
Джеймс Т.
почему name = "name" и что, если у него вообще нет идентификатора?
bluejayke
65

Если вы хотите получить значения формы (например, те, которые будут отправлены с помощью HTTP POST), вы можете использовать:

JavaScript

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
  // console.log(pair[0] + ': ' + pair[1]);
}

форма-сериализация ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
Кевин Фарруджа
источник
12
Ваш первый пример FormDataсам по себе ничего не делает ... вам все равно нужно получить значения из формы.
Putvande
1
Я считаю, что это неверно. Если при инициализации FormData вы укажете элемент формы, он будет правильно извлекать значения. codepen.io/kevinfarrugia/pen/Wommgd
Кевин Фарруджа
2
Однако сам объект FormData не является значениями. Вам по-прежнему нужно вызывать и перебирать FormData.entries(), чтобы получить значения. Кроме того, FormData.entries()он недоступен в Safari, Explorer или Edge. developer.mozilla.org/en-US/docs/Web/API/FormData
Дэйв
1
Верно с точки зрения совместимости с браузером, однако есть полифилы . Что касается повторения formData.entries(), это зависит от того, что вы ищете. Если вы ищете значение одного поля, вы можете использовать formData.get(name). Ссылка: get () .
Кевин
Да, я не могу FormDataничего выводить в Chrome.
Atav32
33

Вот пример из W3Schools:

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj ={};
    for(var i = 0 ; i < elements.length ; i++){
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}

Демо можно найти здесь .

Чан Нгуен Нхат Туи
источник
12
Просто предупреждение: если кто-то хочет получить выбранные значения других типов входов, таких как переключатели или флажки, это не сделает то, что вы хотите.
Шон
Пришлось сменить var obj = {};на var obj = [];.
Дэниел Уильямс
@ Шон, почему бы не работать с переключателями? Они также появляются в свойстве elements
bluejayke
@bluejayke Код будет циклически перебирать все входы радиокнопки и сохранять «значение» ПОСЛЕДНЕЙ радиокнопки obj, независимо от того, какой из них выбран. Проблема демонстрируется здесь (выберите «Вариант 1») w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
Шон
29

document.formsбудет содержать массив форм на вашей странице. Вы можете просмотреть эти формы, чтобы найти желаемую форму.

var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
    if(form.id == "wanted_id") {
        form = document.forms[i];
    }
}

Каждая форма имеет массив элементов, который затем можно просмотреть в цикле, чтобы найти нужные данные. Вы также должны иметь доступ к ним по имени

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
Codeacula
источник
Почему более короткий метод не был упомянут первым? = -D
Клесун
2
@ArturKlesun Думаю, это потому, что десять лет назад я начал набирать ответ, OP не обновлялся, поэтому я написал цикл for для обработки большинства ситуаций. Думаю, тогда я также обеспечивал совместимость браузера с IE7, потому что у нас не было гораздо лучшего ландшафта, чем сегодня.
Codeacula
5

Мои 5 центов здесь, использование form.elementsкоторых позволяет вам запрашивать каждое поле по немуname , а не только по итерации:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
Клесун
источник
2

Расширяя идею Атрура Клесуна ... вы можете просто получить к нему доступ по его имени, если вы используете getElementById для доступа к форме. В одной строке:

document.getElementById('form_id').elements['select_name'].value;

Я использовал его так для переключателей и работал нормально. Думаю, здесь то же самое.

Rusca8
источник
2

Это разработанный пример https://stackoverflow.com/a/41262933/2464828

Рассматривать

<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
    <input name="formula">
</form>

Предположим, мы хотим получить ввод имени formula. Это можно сделать, передав eventв onsubmitполе. Затем мы можем использовать FormDataдля получения значений этой точной формы, ссылаясь на SubmitEventобъект.

const check = (e) => {
    const form = new FormData(e.target);
    const formula = form.get("formula");
    console.log(formula);
    return false
};

Приведенный выше код JavaScript затем выведет значение ввода в консоль.

Если вы хотите перебрать значения, т. Е. Получить все значения, см. Https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods.

джхавист
источник
Большой!. Это именно то, что мне нужно. Спасибо.
Данг Конг Дыонг,
1

Пожалуйста, попробуйте изменить код, как показано ниже:

<form
   onSubmit={e => {
     e.preventDefault();
     e.stopPropagation();

     const elements = Array.from(e.currentTarget) as HTMLInputElement[];

     const state = elements.reduce((acc, el) => {
       if (el.name) {
         acc[el.name] = el.value;
       }

       return acc;
     }, {});

     console.log(state); // {test: '123'}
   }}
>
   <input name='test' value='123' />
</form>
Максим Щирый
источник
Спасибо, ваш идеальный код работает для меня!
ЛИ ХО ТАН,
0

Быстрое решение для сериализации формы без каких-либо библиотек

function serializeIt(form) {
  return (
    Array.apply(0, form.elements).map(x => 
      (
        (obj => 
          (
            x.type == "radio" ||
            x.type == "checkbox"
          ) ?
            x.checked ? 
              obj
            : 
              null
          :
            obj
        )(
          {
            [x.name]:x.value
          }
        )
      )
    ).filter(x => x)
  );
}

function whenSubmitted(e) {
  e.preventDefault()
  console.log(
    JSON.stringify(
      serializeIt(document.forms[0]),
      4, 4, 4
    )
  )
}
<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>

<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>

<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>
Развернуть фрагмент

Bluejayke
источник
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
Randhawa
источник