Sascha's Wiki

Felder dynamisch erzeugen und auslesen

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>create Fields</title>
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    </head>
    <body>

	<div id="fields"></div>
	<br />
	<input type="submit" id="submit" value="submit" name="submit"></input>
	<br />
	<textarea id="output" style="width:50%; height: 100px;"></textarea>
        <script src="script.js" type="text/javascript"></script>
    </body>
</html>

$(document).ready(function() {
   var i = 0;
   //zehn felder anlegen
   for (i=0; i<10; i++) {
       create(i);
   }
});

function create(i) {
    //Felder + Label anlegen und an div anhängen
    $('<label for="field' + i + '">Test' + i 
        + '</label><input type="text" id="field' 
        + i + '" name="field' + i +'" /> <br />').appendTo("#fields");
}

$("#submit").click(function() {
    var i = 0;
    var out = "";
    for(i = 0; i < 10; i++) {
        //dynamische Felder auslesen und an Ergebnis anhängen 
        out += $('input[name="field'+ i + '"]').val() + "\n";   
    }
    $("#output").text(out);
});

webdev/jsjq/createdynamicfields.txt · Zuletzt geändert: 2016/04/21 09:15 (Externe Bearbeitung)