JavaScript - Abrufen von HTML-Formularwerten

112

Wie kann ich den Wert eines HTML-Formulars an JavaScript übergeben?

Ist das richtig? Mein Skript verwendet zwei Argumente, eines aus dem Textfeld und eines aus dem Dropdown-Feld.

<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
quelle
2
Was meinen Sie genau mit "Wert eines Formulars im HTML-Code"?
Pekka
7
Frage ist ganz klar
Laurentngu
1
@laurentngu die Frage ist , hat er „einen Mittelwert von einem HTML - Formular“, was bedeutet , ein Wert aus der die vielen Werte, oder er „bedeutet Wert des gesamten HTML - Formular“, alle Werte in einem großen serialisiert Bedeutung“ "Wert
Bluejayke
Die Frage ist klar ... aber es macht natürlich nicht viel Sinn, den Wert eines Formulars weiterzugeben.
Matthew

Antworten:

109

HTML:

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

JS:

var nameValue = document.getElementById("uniqueID").value;
user406632
quelle
7
@ shorty876: Hast du es selbst getestet? o_0 Das wäre eine ziemlich gute Methode, um festzustellen, ob Sie es richtig gemacht haben oder nicht.
Jeff Rupert
1
Ja, aber es gibt nur ein wahr / falsch zurück und ich bin nicht sicher, wie ich feststellen soll, ob die Funktion überhaupt aufgerufen wurde. So können Sie helfen.
user377419
Ich habe dies ausprobiert, aber es nameValueist der Standardwert und nicht das, was der Benutzer eingegeben hat.
James T.
warum name = "name" und was ist, wenn es überhaupt keine ID hat?
Bluejayke
65

Wenn Sie die Formularwerte abrufen möchten (z. B. diejenigen, die über einen HTTP-POST gesendet werden), können Sie Folgendes verwenden:

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
quelle
12
Ihr erstes Beispiel FormDataselbst macht nichts. Sie müssen die Werte noch aus dem Formular abrufen.
Putvande
1
Ich glaube das ist falsch. Wenn Sie beim Initialisieren der FormData ein Formularelement angeben, werden die Werte korrekt abgerufen. codepen.io/kevinfarrugia/pen/Wommgd
Kevin Farrugia
2
Das FormData-Objekt selbst ist jedoch nicht der Wert. Sie müssen noch aufrufen und durchlaufen, FormData.entries()um die Werte abzurufen. Darüber hinaus FormData.entries()ist es in Safari, Explorer oder Edge nicht verfügbar. developer.mozilla.org/en-US/docs/Web/API/FormData
Dave
1
Richtig in Bezug auf die Browserkompatibilität, es gibt jedoch Polyfills . In Bezug auf das Durchlaufen formData.entries()hängt es davon ab, wonach Sie suchen. Wenn Sie nach dem Wert eines einzelnen Feldes suchen, können Sie es verwenden formData.get(name). Referenz: get () .
Kevin Farrugia
Ja, ich kann FormDataauf Chrome nichts ausgeben.
Atav32
33

Hier ist ein Beispiel von 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);
}

Die Demo finden Sie hier .

Tran Nguyen Nhat Thuy
quelle
12
Nur eine Warnung: Wenn jemand die ausgewählten Werte anderer Eingabetypen wie Optionsfelder oder Kontrollkästchen abrufen möchte, wird dies nicht das tun, was Sie wollen.
Sean
Ich musste ändern var obj = {};zu var obj = [];.
Daniel Williams
@ Sean warum sollte es nicht für Optionsfelder funktionieren? Sie erscheinen auch unter der Eigenschaft elements
bluejayke
@bluejayke Der Code durchläuft alle Optionsfeldeingaben und speichert den 'Wert' des LETZTEN Optionsfelds objunabhängig davon, welcher ausgewählt ist. Das Problem wird hier demonstriert (wählen Sie 'Option 1'). W3schools.com/code/tryit.asp?filename=GEZXJXBBI7AW
Sean
29

document.formsenthält eine Reihe von Formularen auf Ihrer Seite. Sie können diese Formulare durchlaufen, um das gewünschte Formular zu finden.

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

Jedes Formular verfügt über ein Elementarray, das Sie durchlaufen können, um die gewünschten Daten zu finden. Sie sollten auch über den Namen darauf zugreifen können

var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
Codeacula
quelle
Warum wurde die kürzere Methode nicht zuerst erwähnt? = -D
Klesun
2
@ArturKlesun Ich denke, das liegt daran, dass ich vor einem Jahrzehnt mit der Eingabe der Antwort begonnen habe und das OP nicht aktualisiert wurde. Deshalb habe ich die for-Schleife geschrieben, um die meisten Situationen zu bewältigen. Ich denke damals habe ich auch die Browserkompatibilität mit IE7 sichergestellt, weil wir nicht die weitaus bessere Landschaft hatten, die wir heute haben.
Codeacula
5

Meine 5 Cent hier, mit form.elementsdenen Sie jedes Feld nach ihmname abfragen können , nicht nur nach Iteration:

const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
Klesun
quelle
2

Erweitern Sie die Idee von Atrur Klesun ... Sie können einfach über den Namen darauf zugreifen, wenn Sie getElementById verwenden, um das Formular zu erreichen. In einer Zeile:

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

Ich habe es so für Optionsfelder verwendet und gut funktioniert. Ich denke, hier ist es genauso.

Rusca8
quelle
1

Dies ist ein entwickeltes Beispiel für https://stackoverflow.com/a/41262933/2464828

Erwägen

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

Nehmen wir an, wir möchten die Eingabe des Namens abrufen formula. Dies kann durch Übergabe eventdes onsubmitFeldes erfolgen. Wir können dann FormDatadie Werte dieser exakten Form abrufen, indem wir auf das SubmitEventObjekt verweisen .

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

Der obige JavaScript-Code druckt dann den Wert der Eingabe in die Konsole.

Wenn Sie die Werte iterieren möchten, dh alle Werte abrufen möchten, lesen Sie https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods

jhaavist
quelle
0

Schnelle Lösung zum Serialisieren eines Formulars ohne Bibliotheken

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>
Erweitern Sie das Snippet

Bluejayke
quelle
-1 
<input type="text" id="note_text" />

let value = document.getElementById("note_text").value;
Randhawa
quelle