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

— користувач377419
джерело

2

Що саме ви маєте на увазі під "значенням форми в HTML-коді"?

— Pekka

7

питання цілком зрозуміле

— laurentngu

1

@laurentngu питання чи є він мав в виду «значення в HTML - формі», що означає одне значення з з безлічі значень, або ж він означає « значення всієї форми HTML», тобто всі значення в один великий «Серіалізірованная "значення

— bluejayke

Питання зрозуміло ... але явно не має сенсу передавати значення форми.

— Метью

112

HTML:

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

JS:

var nameValue = document.getElementById("uniqueID").value;

— user406632
джерело

7

@ shorty876: Ви тестували це самостійно? o_0 Це був би досить хороший спосіб визначити, чи правильно ви це зробили чи ні.

— Джефф Руперт

1

Так, але він просто повертає справжнє / хибне, і я не впевнений, як визначити, чи була функція навіть викликана. Таким чином ви можете допомогти.

— користувач377419

Я спробував це, але 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 = [];.

— Даніель Вільямс

@Sean, чому б це не працювало для перемикачів? Вони з'являються і під властивостями елементів

— 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);

— Кодекула
джерело

Чому коротший метод не згадувався спочатку? = -D

— Клесун

2

@ArturKlesun Я б припустив, що це тому, що в той час, як десять років тому я почав набирати відповідь, ОП не оновлювався, тому я написав цикл for для обробки більшості ситуацій. Я думаю, що тоді я також забезпечував сумісність браузера з IE7, оскільки у нас не був набагато кращий пейзаж, який ми маємо сьогодні.

— Кодекула

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;

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

— Руска8
джерело

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

Кілька простих у використанні серіалізаторів форми з хорошою документацією.

У порядку зірок Гітуба,

— Атав32
джерело

вам справді потрібен цілий масив саме для цього?

— bluejayke

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>

— Максим Щирый
джерело

Дякую, ваш ідеальний код і працює для мене!

— LI HO TAN

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;

— Рандхава
джерело