JavaScript - Получение значений формы HTML - PullRequest
Новая
       3

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

68 голосов
/ 23 августа 2010

Как я могу получить значение 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>

Ответы [ 6 ]

79 голосов
/ 23 августа 2010

HTML: 

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

JS: 

var nameValue = document.getElementById("uniqueID").value;
34 голосов
/ 21 декабря 2016

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

JavaScript 

new FormData(document.querySelector('form'))

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

serialize(document.forms[0]);

JQuery 

$("form").serializeArray()
23 голосов
/ 23 августа 2010

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);
21 голосов
/ 07 августа 2016

Вот пример из 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);
}

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

0 голосов
/ 26 марта 2018

Несколько простых в использовании сериализаторов форм с хорошей документацией.

В порядке звезд Github

  1. jquery.serializeJSON

  2. jquery-serialize-object

  3. form2js

  4. форма-сериализация

0 голосов
/ 13 декабря 2017 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...