So erstellen Sie dynamische Radioknopf mit JavaScript

Question

Hallo meine Aufgabe ist es, dynamisch Felder zu einem Formular hinzuzufügen, wenn ich auf einen Link klicke.

Ich war erfolgreich für Textfeld, sowie Dateityp, aber nicht, wenn ich versuche, dies für Eingaben des Typs Radio-Button zu tun.

Angenommen, ich habe zwei Zeilen erstellt und in einer Zeile wähle ich Geschlecht, z. männlich, und in der zweiten Reihe möchte ich weiblich wählen, dann wird der Wert des Radio-Knopfes aus der ersten Reihe verschwinden. Also möchte ich verschiedene Radio Button-Werte für verschiedene Reihen auswählen.

Hier ist mein Code:

var counter = 0; 
 
$(function(){ 
 
    $('p#add_field').click(function(){ 
 
    counter += 1; 
 
    $('#container').append(
 
     '</br><strong>Item ' + counter + '</strong><br />' 
 
     + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
 
     +'<strong>quantity ' + counter + '</strong>' 
 
     +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
 
     +'<strong>rate ' + counter + '</strong>' 
 
     +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
 
     +'<strong>Amount ' + counter + '</strong>' 
 
     +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
 
     +'<strong>img ' + counter + '</strong>' 
 
     +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
 
     +'<strong>Gender ' + counter + '</strong>' 
 
     +'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male' 
 
     +'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female' 
 
    ); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="custom.js"></script> 
 

 
<h1>Add your Hobbies</h1> 
 
<form method="post" action="save.php" enctype="multipart/form-data"> 
 
    <div id="container"> 
 
    <p id="add_field"><a href="#"><span>Add Field</span></a></p> 
 
    </div> 
 

 
    <input type="submit" name="submit_val" value="Submit" /> 
 
</form>

Bitte lassen Sie mich wissen, wo ich bin falsch.

Answer 1

Nur eine Optionsschaltfläche kann aus einer Liste von Optionsfeldern ausgewählt werden, die denselben Namen haben. d. h. warum Sie den Radio-Button für jede Zeile nicht auswählen können. Um dies zu lösen, die Verwendung von Zählern machen getrennte Namen zu geben, um jede Zeile, die Sie hinzufügen, wie '<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'

var counter = 0; 
 
$(function(){ 
 
    $('p#add_field').click(function(){ 
 
    counter += 1; 
 
    $('#container').append(
 
     '</br><strong>Item ' + counter + '</strong><br />' 
 
     + '<input id="field_' + counter + '" name="item[]' + '" type="text" />' 
 
     +'<strong>quantity ' + counter + '</strong>' 
 
     +'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />' 
 
     +'<strong>rate ' + counter + '</strong>' 
 
     +'<input id="rate' + counter + '" name="rate[]' + '" type="text" />' 
 
     +'<strong>Amount ' + counter + '</strong>' 
 
     +'<input id="field_' + counter + '" name="amount[]' + '" type="text" />' 
 
     +'<strong>img ' + counter + '</strong>' 
 
     +'<input id="field_' + counter + '" name="image[]' + '" type="file" />' 
 
     +'<strong>Gender ' + counter + '</strong>' 
 
     +'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male' 
 
     +'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female' 
 
     ); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1>Add your Hobbies</h1> 
 
<form method="post" action="save.php" enctype="multipart/form-data"> 
 

 
    <div id="container"> 
 
    <p id="add_field"><a href="#"><span>Add Field</span></a></p> 
 
    </div> 
 

 
    <input type="submit" name="submit_val" value="Submit" /> 
 
    </form> 
 

 

 
    </body> 
 
    </html>

Answer 2

Wenn Sie mehr Radiobutton Sie alle Namen Radio-Button hinzuzufügen, sind gleich, das ist Warum hast du nur einen Radioknopf ausgewählt?

So ändern Optionsfeld wie folgt aus:

+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male' 
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'