如何將動態生成的單選按鈕和輸入字段中的數據保存到MySQL數據庫

Question

我正在開發一個帶有動態生成的輸入字段和單選按鈕的網頁。 由於每個ID到單選按鈕和輸入字段，因此也會動態生成。

該網站旨在作為學校考試的應用程序。 在網站的這一部分中，老師可以創建一個測試，其中每個問題有四個備選方案，其中一個是正確的。 每個測試都應發送給許多不同的人。 當然，測試應用程序可用於創建具有許多不同標題的測試。 將測試保存到數據庫后，必須能夠從這些測試中收集所有數據。

1-如何收集輸入字段的數據？ 2-如何顯示選擇了哪個單選按鈕和“配對輸入”字段3-如何保持不同值之間的關系？ 4-如何將數據保存到MySQL數據庫？

標題，問題，答案以及其中哪些是正確的方法。 因此，不同test-id的生成相當復雜，並且遵循某種模式：

所有測試標題的ID：“ theTitle”

每個問題都有一個具有以下特定模式的ID：

theTitle + "Q" + name

問“問題”

name是一個數值：第一個問題的編號為1，依此類推。 示例： JavaQ1

四個單選按鈕的每個ID都具有以下模式：

theTitle + "Q" + name + "O" + "1"

選項“ 1”的O可以是1到4。 示例JavaQ5O4

與單選按鈕配對的for輸入字段的每個ID都具有以下模式：

theTitle + "Q" + name + "input" + "1"

示例： JavaQ4input4

每個單選按鈕也有一個名稱，以區別於其他單選按鈕組。 這些名稱遵循以下模式：

theTitle + "rb" + name

rb用於單選按鈕

示例： Java10rb4

JavaScript： JsFiddle：在這里您可以看到正在運行的應用程序 ！

   $("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;

Answer 1

您還需要為每個單選按鈕添加一個值。

現在，您的代碼如下所示：

<input type="radio" name="onlinerg1" id="onlineQ1O1" aria-label="">

還應包括Value=1到Value=4這樣您就可以在每個選項之間進行區別，並以正確的順序保存選項文本。

Answer 2

我會做一些不同的事情。

提交表單時，附加到表單輸入的id屬性並不重要，重要的是name屬性，因為它是使用相應的值提交的。

當您需要檢索值時，如何命名輸入可能會使您在服務器端受益。 在PHP中，當您使用數組符號提交輸入時，可以像我們將要做的那樣將它們檢索為數組或多維數組。

為每個輸入eq qs賦予一個通用name屬性。 通過附加[index][field]來關聯它們。 例如， qs[0][question]是第一個問題的文本， qs[0][alt][0]是第一個問題的第一選擇， qs[2][answer]是第三個問題的答案。

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（示例）

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

Answer 3

這就是我能夠保存來自動態輸入字段和單選按鈕的數據的方式。 我使用了兩個for循環來首先訪問不同的ID。 然后將它們的值保存到不同的變量中，這些變量可以保存到數據庫中：

    $("#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);
                }

        }
    }
});