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

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

Kilka łatwych w użyciu serializatorów formularzy z dobrą dokumentacją.

W kolejności gwiazd na Githubie

— Atav32
źródło

czy naprawdę potrzebujesz całej tablicy tylko do tego?

— bluejayke

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