übergeben Variablenwert aus dem Formular Javascript

Question

Sagen wir, ich habe ein HTML-Formular wie unten und möchte die Werte in den Textfeldern an JS-Variablen übergeben.

<form name="testform" action="" method="?" 
<input type="text" name="testfield1"/> 
<input type="text" name="testfield2"/> 
</form> 

Ich habe nur Werte an Variablen in PHP zuvor übergeben. Benötige ich eine JavaScript-Methode? Und die Hauptfrage, wie ist es gemacht?

Answer 1

Hier sind ein paar Beispiele:

Javascript:

document.getElementById('name_of_input_control_id').value; 

jQuery:

$("#name_of_input_control_id").val(); 

Grundsätzlich Sie den Wert des Eingangssteuer aus dem DOM extrahieren mit Javascript/jQuery.

Answer 2

Versuchen Sie Folgendes in Ihrem „Eintragen“:

var input = $("#testfield1").val(); 

Answer 3

die Antworten sind alle richtig, aber Sie können mit Problemen konfrontiert, wenn Sie in eine document.ready Funktion setzen Sie Ihren Code nicht ... wenn Ihr Codeblock oben ist der hTML-Teil werden Sie mit der ID kein Eingabefeld finden, denn in diesem Moment tut es existiert ...

document.addEventListener('DOMContentLoaded', function() { 
    var input = document.getElementById('name_of_input_control_id').value; 
}, false); 

jQuery

jQuery(document).ready(function($){ 
    var input = $("#name_of_input_control_id").val(); 
}); 

Answer 4

Sie brauchen nicht wirklich ein method oder ein action Attribut, wenn Sie einfach die Textfelder in Javascript

wie diese

hinzufügen submit Taste und ein onsubmit Handler Form verwenden,

<form name="testform" onsubmit="return processForm(this)"> 
    <input type="text" name="testfield1"/> 
    <input type="text" name="testfield2"/> 
    <input type="submit"/> 
</form> 

dann in Ihrem Javascript könnten Sie haben diese processForm Funktion

function processForm(form) { 
    var inputs = form.getElementsByTagName("input"); 
    // parse text field values into an object 
    var textValues = {}; 
    for(var x = 0; x < inputs.length; x++) { 
     if(inputs[x].type != "text") { 
      // ignore anything which is NOT a text field 
      continue; 
     } 

     textValues[inputs[x].name] = inputs[x].value; 
    } 

    // textValues['testfield1'] contains value of first input 
    // textValues['testfield2'] contains value of second input 

    return false; // this causes form to NOT 'refresh' the page 
}