Je développe une page web avec des champs de saisie et des boutons radio générés dynamiquement. De ce fait, chaque ID des boutons radio et des champs de saisie est également généré dynamiquement.
Le site Web est destiné à être une application de test scolaire. Cette partie du site Web est l'endroit où l'enseignant peut créer un test où chaque question a quatre alternatives, dont l'une est correcte. Chaque test est destiné à être envoyé à de nombreuses personnes différentes. Et bien sûr, l'application de test peut être utilisée pour créer des tests avec de nombreux titres différents. Lorsqu'un test est enregistré dans une base de données, il doit être possible de collecter toutes les données de ces tests.
1- Comment collecter les données des champs de saisie? 2- Comment puis-je afficher quel bouton radio et son champ de saisie apparié ont été sélectionnés 3- Comment puis-je maintenir la relation entre les différentes valeurs? 4- Comment enregistrer les données dans une base de données MySQL?
Le titre, les questions, les réponses et lesquelles sont la bonne façon. De ce fait, la génération des différents identifiants de test est assez compliquée et suit un certain schéma:
Tous les titres de test ont l'ID: "theTitle"
Chaque question a un identifiant qui a ce modèle particulier:
theTitle + "Q" + name
Q pour "question"
Nom est une valeur numérique: la première question a le numéro un et ainsi de suite. Exemple: JavaQ1
Chaque ID des quatre boutons radio a ce modèle:
theTitle + "Q" + name + "O" + "1"
O pour Option "1" peut être compris entre 1 et 4. Exemple JavaQ5O4
Chaque ID des champs de saisie associés aux boutons radio a ce modèle:
theTitle + "Q" + name + "input" + "1"
Exemple: JavaQ4input4
Et chaque bouton radio a également un nom pour les distinguer des autres groupes de boutons radio. Ces noms suivent ce modèle:
theTitle + "rb" + name
Rb pour radiobutton
Exemple: Java10rb4
JavaScript: JsFiddle: Ici vous pouvez voir l'application en action!
$("body").on('click', '#radioAddQuestion', function () {
name++;
$(".dynamicform").append(createQuestion(name));
});
$(".dynamicform").append(createQuestion(name));
function createQuestion(name){
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<!-- The Question Inputfield that needs ID-->
<input type="text" class="form-control" aria-label="" id="${theTitle + "Q" + name}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="1" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "1"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "1"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="2" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "2"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "2"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="3" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "3"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "3"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="4" name="${theTitle +"rb"+name}" id="${theTitle + "Q" + name + "O" + "4"}" aria-label="">
</span>
<input type="text" id="${theTitle + "Q" + name + "input" + "4"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
3 réponses
C'est ainsi que j'ai pu enregistrer des données à partir des champs d'entrée dynamiques et des boutons radio. J'ai utilisé deux boucles for pour accéder d'abord aux différents identifiants. Ensuite, leurs valeurs sont enregistrées dans différentes variables qui peuvent être enregistrées dans une base de données:
$("#saveTest").click(function () {
for (var i = 1; i <= name; i++) {
var questionId = theTitle + "Q" + name;
//The Question
var question = $("#" + questionId).val();
for (var j = 1; j <= 4; j++) {
// The IDs of the radio-buttons and the inputfields:
var radioBtnID = theTitle + "Q" + [i] + "O" + [j];
var inputTextId = theTitle + "Q" + [i] + "input" + [j];
// Text from all the different input-fields
var inputText = $("#" + inputTextId).val();
// The right alternative (that is selected with radio-button)
if($("#"+ radioBtnID).is(':checked')) {
console.log("The right answer: " +inputText+ " Right answer: " + inputTextId);
}
}
}
});
Je le ferais un peu différemment.
L'attribut id
attaché à vos entrées de formulaire n'a pas vraiment d'importance lorsque vous soumettez un formulaire, ce qui compte est l'attribut name
car c'est ce qui est soumis avec sa valeur correspondante.
La façon dont vous nommez vos entrées peut vous être utile côté serveur lorsque vous devez récupérer les valeurs. En PHP, lorsque vous soumettez des entrées avec la notation de tableau, vous pouvez les récupérer sous forme de tableau ou de tableau multidimensionnel comme nous allons le faire.
Attribuez un attribut name
commun à chaque entrée e.q. qs
. Reliez-les en ajoutant [index][field]
. Par exemple, qs[0][question]
est le texte de la première question, qs[0][alt][0]
est la première alternative de la première question, qs[2][answer]
est la réponse à la troisième question.
JS
// use document.ready not window.onload
$(function() {
var name = 0; // start questions with index 0
$("body").on('click', '#radioAddQuestion', function () {
$(".dynamicform").append(createQuestion(name++)); // shorter
});
$(".dynamicform").append(createQuestion(name++));
function createQuestion(name){
// replace id with name attributes
var dynamic=`<span class="module">
<legend class="col-form-legend col-sm-10"></legend>
<div class="input-group input-group">
<label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label>
</div>
<div class="form-group row">
<div class="input-group input-group">
<input type="text" class="form-control" aria-label="" name="${"qs[" + name + "][question]"}" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<label id="questionOptions" class="form-control-label" style="width: 540px;"
for="wQuestion">Enter
avaible options:</label>
</div>
</div>
<!-- The radiobuttons and option inputfields that needs ID's-->
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="0" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][0]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="1" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][1]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="2" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][2]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
<div class="form-group row">
<div class="input-group input-group">
<span class="input-group-addon">
<input type="radio" value="3" name="${"qs[" + name + "][answer]"}" aria-label="">
</span>
<input type="text" name="${"qs[" + name + "][alt][3]"}" class="form-control" aria-label="" style="width: 540px;">
</div>
</div>
</span>
`;
return dynamic;
}
});
PHP (exemple)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$qs = !empty($_POST['qs']) ? $_POST['qs'] : [];
// loop through questions
foreach ($qs as $i => $q) {
$question = $q['question'];
$alts = $q['alt'];
// radio buttons do not get submitted if they are not selected
$answer = isset($q['answer']) ? $q['answer'] : null;
printf('Question %d: %s<br>', $i + 1, $question);
// loop through question's alternatives
foreach ($alts as $j => $alt) {
printf('Alternative %d: %s<br>', $j + 1, $alt);
}
if (isset($alts[$answer])) {
printf('Answer: %s<br>', $alts[$answer]);
}
}
//echo '<pre>' . print_r($_POST, true) . '</pre>';
}
Vous devez également inclure une valeur pour chaque bouton radio.
En ce moment, votre code ressemble à ceci:
<input type="radio" name="onlinerg1" id="onlineQ1O1" aria-label="">
Devrait également inclure Value=1
à Value=4
afin que vous puissiez faire la différence entre chaque option et enregistrer le texte de l'option dans le bon ordre.