JavaScript - pobieranie wartości formularza HTML

112

Jak uzyskać wartość formularza HTML do przekazania do JavaScript?

Czy to jest poprawne? Mój skrypt pobiera dwa argumenty, jeden z pola tekstowego, drugi z pola rozwijanego.

<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
źródło
2
Co dokładnie rozumiesz przez „wartość formularza w kodzie HTML”?
Pekka
7
pytanie jest całkiem jasne
laurentngu
1
@laurentngu pytanie brzmi, ma na myśli „wartość z formularza HTML”, czyli jedną wartość się z wielu wartości, czy on myśli „ wartość całego formularza HTML”, co oznacza wszystkie wartości w jednym wielkim „szeregowane wartość
bluejayke
Pytanie jest jasne ... ale najwyraźniej nie ma sensu przekazywać wartości formularza.
Matthew

Odpowiedzi:

112

HTML:

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

JS:

var nameValue = document.getElementById("uniqueID").value;
user406632
źródło
7
@ shorty876: Czy sam to przetestowałeś? o_0 To byłby całkiem dobry sposób ustalenia, czy zrobiłeś to dobrze.
Jeff Rupert
1
Tak, ale po prostu zwraca prawdę / fałsz i nie jestem pewien, jak określić, czy funkcja została w ogóle wywołana. W ten sposób możesz pomóc.
user377419
Wypróbowałem to, ale nameValuejest to wartość domyślna, a nie to, co wprowadził użytkownik.
James T.
dlaczego nazwa = "imię", a co, jeśli w ogóle nie ma identyfikatora?
bluejayke
65

Jeśli chcesz pobrać wartości formularza (takie jak te, które zostałyby wysłane za pomocą HTTP POST), możesz użyć:

JavaScript

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

form-serialize ( https://code.google.com/archive/p/form-serialize/ )

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
Kevin Farrugia
źródło
12
Twój pierwszy przykład FormDatasam w sobie nic nie robi… nadal musisz pobrać wartości z formularza.
putvande
1
Uważam, że to nieprawda. Jeśli podczas inicjowania FormData określisz element formularza, wówczas poprawnie pobierze wartości. codepen.io/kevinfarrugia/pen/Wommgd
Kevin Farrugia
2
Obiekt FormData sam nie jest jednak wartościami. Nadal musisz wywoływać i iterować FormData.entries(), aby pobrać wartości. Ponadto FormData.entries()nie jest dostępny w Safari, Explorer ani Edge. developer.mozilla.org/en-US/docs/Web/API/FormData
dave
1
Poprawne pod względem zgodności z przeglądarkami, jednak istnieją wypełnienia . Jeśli chodzi o iterację formData.entries(), zależy to od tego, czego szukasz. Jeśli szukasz wartości pojedynczego pola, możesz użyć formData.get(name). Odniesienie: get () .
Kevin Farrugia
Tak, nie mogę FormDatanic wydrukować w Chrome.
Atav32
33

Oto przykład z 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);
}

Demo można znaleźć tutaj .

Tran Nguyen Nhat Thuy
źródło
12
Tylko ostrzeżenie, jeśli ktoś chce uzyskać wybrane wartości innych typów danych wejściowych, takich jak przyciski radiowe lub pola wyboru, nie zrobi to, co chcesz.
Sean
Musiałem zmienić var obj = {};się var obj = [];.
Daniel Williams
@Sean, dlaczego nie miałoby to działać w przypadku przycisków radiowych? Pojawiają się one również pod właściwością elementów
bluejayke
@bluejayke Kod będzie przechodził przez wszystkie wejścia przycisków opcji i zapisze „wartość” ostatniego przycisku opcji obj, niezależnie od tego, który z nich zostanie wybrany. Problem został przedstawiony tutaj (wybierz „Opcja 1”) w3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
Sean
29

document.formsbędzie zawierać tablicę formularzy na Twojej stronie. Możesz przeglądać te formularze, aby znaleźć żądaną formę.

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

Każdy formularz ma tablicę elementów, przez którą można przejść w pętli, aby znaleźć żądane dane. Powinieneś także mieć do nich dostęp z nazwy

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
Codeacula
źródło
Dlaczego najpierw nie wspomniano o krótszej metodzie? = -D
Klesun
2
@ArturKlesun Wydaje mi się, że to dlatego, że dziesięć lat temu zacząłem wpisywać odpowiedź, OP nie był aktualizowany, więc napisałem pętlę for, aby poradzić sobie z większością sytuacji. Myślę, że wtedy zapewniałem również zgodność przeglądarki z IE7, ponieważ nie mieliśmy o wiele lepszego krajobrazu, jaki mamy dzisiaj.
Codeacula
5

Moje 5 centów tutaj, za pomocą form.elementsktórych możesz sprawdzać każde pole według jegoname , a nie tylko iteracji:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
Klesun
źródło
2

Rozwijając pomysł Atrura Klesuna ... możesz po prostu uzyskać do niego dostęp po nazwie, jeśli użyjesz getElementById, aby przejść do formularza. W jednej linii:

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

Użyłem go tak do przycisków radiowych i działało dobrze. Myślę, że tutaj jest tak samo.

Rusca8
źródło
2

To jest rozwinięty przykład https://stackoverflow.com/a/41262933/2464828

Rozważać

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

Załóżmy, że chcemy pobrać dane wejściowe nazwy formula. Można to zrobić poprzez przepuszczanie eventw onsubmitpolu. Następnie możemy użyć FormDatado pobrania wartości tej dokładnej formy, odwołując się do SubmitEventobiektu.

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

Powyższy kod JavaScript wydrukuje wartość danych wejściowych na konsoli.

Jeśli chcesz iterować wartości, tj. Pobrać wszystkie wartości, zobacz https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaavist
źródło
Wspaniały!. Właśnie tego potrzebuję. Dziękuję Ci.
Dang Cong Duong
1

Spróbuj zmienić kod jak poniżej:

<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>
Максим Щирый
źródło
Dzięki, twój doskonały kod i działa dla mnie!
LI HO TAN
0

Szybkie rozwiązanie do serializacji formularza bez żadnych bibliotek

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>
Rozwiń fragment

bluejayke
źródło
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
Randhawa
źródło