AJAX/PHP/JAVASCRIPTを使用して、他の列に応じてリアルタイムでデータ値を表示する方法は？

Question

私は現在アンケートシステムをしようとしています。私はテーブルデータベースから1列の「questiontitle」を表示する動的なドロップダウンを持っています。ドロップダウンに「questiontitle」を表示するコードを示します。

<?php 
    $query=mysqli_query($con, "SELECT * FROM question"); 
      while($row=mysqli_fetch_array($query)) 
      { 
?> 
        echo "<option value='$row[question_id]'>"; 
        echo $row["questiontitle"]; 
        echo "</option>"; 
    <?php 
      } 
?> 
      echo "</select>"; 

ここに私のデータベーステーブルがあります。

私の主な質問は、データをドロップダウンからリアルタイムでクリックしてページを更新せずにクリックすると、 'answer_type'列に応じて 'Option_1〜Option_10 columns'をどのように表示するのですか？ 「answer_type」がチェックボックスの場合と同様に、オプション1-10がチェックボックスとして表示され、ラジオボタンの場合はオプション1-10がラジオボタンとして表示されます。選択ボックスの変更イベントで

Answer 1

は、サーバ側にquestionid渡すとanswer_typeとオプションについては、データベースを照会し、その方法では条件

$options = ''; 
if(anwsertype=='radio') { 
$options .= <input type="radio" /> Your option 
} else { 
$options .= <input type="checkbox" />Your option 
} 

上記の条件は各オプションのループにする必要がありますを追加します。

Answer 2

あなたがしたいことを達成するためには、多くの作業が必要です。しかし、私はあなたが始めるために使うことができる小さなスニペットを与えることができます。

あなたはまだしなければならないことは

1. では、選択ボックス内のすべての質問にページを表示します。これはPHPで行われます
2. どのようにajaxの動作を確認します。 ajax機能を持つshowQuestion()関数を展開して、質問&の回答データがサーバーから取得されるようにします。 this is a good read。あなたが答えを得たら、あなたの質問と答えを表示するために適切な関数を呼び出します。 またはは、すべての情報をローカルに保存します。
3. サーバーに回答を送信できるようにボタンを追加します。クリックイベントに耳を傾け、（私はポイント2に示したリンクを読んで）サーバー

// question object 
 
var questions = { 
 
    json1: { 
 
    questiontitle: 'How frequently ...', 
 
    answertype: 'radiobutton', 
 
    options: ['Heavy user', 'serious user', 'regular user', 'light user'] 
 
    }, 
 
    json2: { 
 
    questiontitle: 'What part of the day...', 
 
    answertype: 'checkbox', 
 
    options: ['Morning', 'Afternoon', 'Early evening', 'lat evening'] 
 
    }, 
 
    json3: { 
 
    questiontitle: 'To what extend does the ...', 
 
    answertype: 'radiobutton', 
 
    options: ['1-5 times', '6-10 times', '> 10 times'] 
 
    } 
 
}; 
 

 
// function that adds the "questions" input elements to the container 
 
function insertToQuestionBox(els) { 
 
    var box = document.getElementById('questionBox'); 
 
    // cleanup box 
 
    while(box.firstChild) box.removeChild(box.firstChild); 
 
    
 
    // populate with els 
 
    for(var i = 0; i < els.length; ++i) box.appendChild(els[i]); 
 
} 
 

 
// creates the input element based on args 
 
function createInput(type, name, text) { 
 
    var i = document.createElement('input'); 
 
    i.type = type; 
 
    i.name = name; 
 
    
 
    var l = document.createElement('label'); 
 
    l.textContent = text; 
 
    
 
    var s = document.createElement('section'); 
 
    s.appendChild(l); 
 
    s.appendChild(i); 
 
    return s; 
 
} 
 

 
// create element with question in it 
 
function createQuestionEl(question) { 
 
    var s = document.createElement('span'); 
 
    s.textContent = question; 
 
    return s; 
 
} 
 

 
// function that is called if the question is of type radio 
 
function handleRadioButtons(data) { 
 
    var inputs = []; 
 
    inputs.push(createQuestionEl(data.questiontitle)); 
 
    for(var i = 0; i < data.options.length; ++i) { 
 
     inputs.push(createInput('radio', 'rraaddioo', data.options[i])); 
 
    } 
 
    
 
    insertToQuestionBox(inputs); 
 
} 
 

 
// create checkboxes 
 
function handleCheckboxes(data) { 
 
    var inputs = []; 
 
    inputs.push(createQuestionEl(data.questiontitle)); 
 
    for(var i = 0; i < data.options.length; ++i){ 
 
     inputs.push(createInput('checkbox', 'nana' + i, data.options[i])); 
 
    } 
 
    
 
    insertToQuestionBox(inputs); 
 
} 
 

 
// gets called each time the drop down has changed 
 
function showQuestion() { 
 
    var data = questions[this.value]; 
 
    switch(data.answertype) { 
 
    case 'radiobutton': handleRadioButtons(data); break; 
 
    case 'checkbox': handleCheckboxes(data); break; 
 
    // todo when default? error ? 
 
    } 
 
} 
 

 

 
// listen to select changes 
 
document.getElementById('showQuestion').addEventListener('change', showQuestion);

<select id="showQuestion"> 
 
    <option>please choose</option> 
 
    <option value="json1">show json1</option> 
 
    <option value="json2">show json2</option> 
 
    <option value="json3">show json3</option> 
 
</select> 
 
<div id="questionBox"></div>