Je suis un débutant en jQuery. Je suis en train de créer un formulaire qui me permettra d'enregistrer les informations de plusieurs noms et linkers en même temps. Après avoir demandé un nom, je demande également les informations d'un 'linker' en utilisant une sélection. Si le lien vers le haut est A, le lien vers le bas doit être B et ainsi de suite jusqu'à ce que le lien vers le haut soit G, alors que le lien vers le bas doit être A. Pour cette raison, je dois limiter à 7 le nombre de lignes que les personnes peuvent ajouter.
Pour l'instant, mon code permet aux gens d'ajouter autant de lignes qu'ils le souhaitent, mais je ne sais pas comment limiter le nombre de lignes qui peuvent être ajoutées.
Un autre problème est que je peux faire en sorte que la valeur du linker Lw change en fonction de l'option sélectionnée sur le linker Up, mais cela ne fonctionne que sur la première ligne. Lorsque j'ajoute une deuxième ligne, la valeur du deuxième Up linker modifie le premier Lw linker et non le second. Je ne sais pas non plus comment résoudre ce problème.
Idéalement, ce que j'aimerais avoir, c'est un formulaire qui, par défaut, comporte déjà 4 lignes attendant que le nom soit enregistré auprès des linkers suivants (puisque je leur recommande de remplir ces quatre lignes)
- Up A - Lw B
- Up C - Lw D
- Up D - Lw E
- Up G - Lw A
Si les gens ne sont pas prêts à enregistrer ces quatre-là, ils peuvent les supprimer. et s'ils souhaitent en enregistrer d'autres avec les linkers manquants, ils peuvent appuyer sur le bouton d'ajout et choisir les linkers dont ils ont besoin. Ils devraient pouvoir enregistrer jusqu'à 7 noms, mais les linkers ne devraient être utilisés qu'une seule fois.
Merci beaucoup si vous pouvez m'aider à expliquer ce qui me manque.
Voici mon code
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form action="100K-5F_action_page_search.php" method="get">
<table class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Name</th>
<th>Up</th>
<th>Lw</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
<td><select id ="Up" name="Up[]" class="form-control">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select></td>
<td><select id ="Lw"name="Lw[]" class="form-control">
<option value="B">B</option>
</select></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
</script>
<script>
$(document).ready(function () {
$("#Up").change(function () {
var val = $(this).val();
if (val == "A") {
$("#Lw").html("<option value='B'>B</option>");
} else if (val == "B") {
$("#Lw").html("<option value='C'>C</option>");
} else if (val == "C") {
$("#Lw").html("<option value='D'>D</option>");
} else if (val == "D") {
$("#Lw").html("<option value='E'>E</option>");
} else if (val == "E") {
$("#Lw").html("<option value='F'>F</option>");
} else if (val == "F") {
$("#Lw").html("<option value='G'>G</option>");
} else if (val == "G") {
$("#Lw").html("<option value='A'>A</option>");
}
});
});
</script>
$(function(){
$('#addMore').on('click', function() {
var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
} else {
alert("Sorry!! Can't remove first row!");
}
});
});
$(document).ready(function () {
$("#Up").change(function () {
var val = $(this).val();
if (val == "A") {
$("#Lw").html("<option value='B'>B</option>");
} else if (val == "B") {
$("#Lw").html("<option value='C'>C</option>");
} else if (val == "C") {
$("#Lw").html("<option value='D'>D</option>");
} else if (val == "D") {
$("#Lw").html("<option value='E'>E</option>");
} else if (val == "E") {
$("#Lw").html("<option value='F'>F</option>");
} else if (val == "F") {
$("#Lw").html("<option value='G'>G</option>");
} else if (val == "G") {
$("#Lw").html("<option value='A'>A</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form action="100K-5F_action_page_search.php" method="get">
<table class="table table-hover small-text" id="tb">
<tr class="tr-header">
<th>Name</th>
<th>Up</th>
<th>Lw</th>
<th><a href="javascript:void(0);" style="font-size:18px;" id="addMore" title="Add More Features"><span class="glyphicon glyphicon-plus"></span></a></th>
<tr>
<td><input type="text" name="Name[]" class="form-control" style="width: 180px" maxlength="12"></td>
<td><select id ="Up" name="Up[]" class="form-control">
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select></td>
<td><select id ="Lw"name="Lw[]" class="form-control">
<option value="B">B</option>
</select></td>
<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
