Werte aus dem HTML-Formular abrufen

Question

Ich versuche, die Werte aus einem Formular zu erhalten, das ich in HTML erstellt habe: Ich benutze Javascript, um die Werte aus dem Formular zu bekommen, ich habe mehrere Möglichkeiten ausprobiert die Werte, im Moment ist es das

$(document).ready(function() { 
 
    $('#submit').click(function() { 
 
    var x = document.getElementById("input"); 
 
    var text = ""; 
 
    var i; 
 
    for (i = 0; i < x.length; i++) { 
 
     console.log(x.elements[i].value); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="input"> 
 
    First Name: <br/> 
 
    <input type="text" name="firstName"/><br/> 
 

 
    Last Name: <br/> 
 
    <select id="lastName" style="text-align: center;"> 
 
    </select><br/> 
 

 
    <p>Date of Birth:</p><br /> 
 

 
    Day: <br/> 
 
    <select id="dayDropDown" style="text-align: center;"> 
 
    </select><br/> 
 
    Month: <br/> 
 
    <select id="monthDropDown" style="text-align: center;"> 
 
    </select><br/> 
 
    Year: <br/> 
 
    <select id="yearDropDown" style="text-align: center;"> 
 
    </select><br/> 
 

 
    Country: <br/> 
 
    <input type="text" name="country"/><br/> 
 
</form> 
 
<br/> 
 
<button id="submit" type="button">Submit</button>

diese zur Ausgabe der Werte aus dem Formular zu meinem VS, das Ausgabefenster gemeint ist, aber ich habe nichts. irgendwelche Ideen?

Answer 1

Da Sie jQuery bereits zum Anhängen Ihres Ereignishandlers verwenden, können Sie damit auch alle Elemente im Formular mithilfe des Selektors :input auswählen. Von dort können Sie einfach durch sie Schleife alle mit each() und geben ihre Werte an die Konsole, wie folgt aus:

$(document).ready(function() { 
 
    $('#submit').click(function() { 
 
    $('form :input').each(function() { 
 
     console.log($(this).val()); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="input"> 
 
    First Name: <br/> 
 
    <input type="text" name="firstName"/><br/> 
 

 
    Last Name: <br/> 
 
    <select id="lastName" style="text-align: center;"> 
 
    </select><br/> 
 

 
    <p>Date of Birth:</p><br /> 
 

 
    Day: <br/> 
 
    <select id="dayDropDown" style="text-align: center;"> 
 
    </select><br/> 
 
    Month: <br/> 
 
    <select id="monthDropDown" style="text-align: center;"> 
 
    </select><br/> 
 
    Year: <br/> 
 
    <select id="yearDropDown" style="text-align: center;"> 
 
    </select><br/> 
 

 
    Country: <br/> 
 
    <input type="text" name="country"/><br/> 
 
</form> 
 
<br/> 
 
<button id="submit" type="button">Submit</button>

Answer 2

getElementsByTagName Ihr Problem lösen.

Dies ist der Code als modificated:

$(document).ready(function() { 
     $('#submit').click(function() { 
      var x = document.getElementsByTagName("input"); 
      var text = ""; 
      var i; 
      for (i = 0; i < x.length; i++) { 
       console.log(x[i].value); 
      } 
     }); 
    }); 

Answer 3

Sie können jQuery verwenden und die Daten mit einer Anweisung

var queryString = $('#input').serialize(); 

Sehen Sie diese live example für eine Demo bekommen.

Answer 4

Mit demselben Namen Id Name mit allen Eingaben übernehmen. Ihr Javascript arbeitet ...

$(document).ready(function() { 
 
     $('#submit').click(function() { 
 
      var x = document.getElementById("input"); 
 
      var text = ""; 
 
      var i; 
 
      for (i = 0; i < x.length; i++) { 
 
       console.log(x.elements[i].value); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="input"> 
 

 
     First Name: <br/> 
 
     <input type="text" name="firstName" id="input"/><br/> 
 

 
     Last Name: <br/> 
 
     <select id="lastName" style="text-align: center;" id="input"> 
 
     </select><br/> 
 

 
     <p>Date of Birth:</p><br /> 
 

 
     Day: <br/> 
 
     <select id="dayDropDown" style="text-align: center;" id="input"> 
 
     </select><br/> 
 
     Month: <br/> 
 
     <select id="monthDropDown" style="text-align: center;" id="input" > 
 
     
 
    </select><br/> 
 
     Year: <br/> 
 
     <select id="yearDropDown" style="text-align: center;" id="input"> 
 
     </select><br/> 
 

 
     Country: <br/> 
 
     <input type="text" name="country" id="input"/><br/> 
 
    </form> 
 
    <br/> 
 
    <button id="submit" type="button">Submit</button>

Answer 5

ich, dass Sie den Jquery-serialize-Objektverweis hinzufügen würde vorschlagen, so dass es die Dinge werden ein bisschen leichter machen kann:

$('#input').submit(function(){ 
    var objForm = $(this).serializeObject(); 
    console.log(objForm); 
}); 

Here you can find other examples and the jquery-serialize-object library for downloading

Answer 6

$(document).ready(function() { 
    $('#submit').click(function() { 
     $('form input, form select').each(function() { 
      console.log($(this).val()); 
     }); 
    }); 
});