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;
0
josefdev 16 avril 2018 à 22:10

3 réponses

Meilleure réponse

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);
                }

        }
    }
});
0
josefdev 18 avril 2018 à 08:20

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>';
}
0
Mikey 16 avril 2018 à 22:14

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.

0
Juan Carlos Oropeza 16 avril 2018 à 19:47