如何存儲數組中單選按鈕的值

Question

我對Ajax很陌生，所以我想知道如何將單選按鈕的值存儲在數組中，就像我爲「問題」所做的那樣， 「答案」和「測試用例」。我需要通過PHP腳本發送信息，這就是爲什麼我想存儲數據。任何幫助將不勝感激，謝謝。

<div id="container"> 
    <form> 

    <div> 
     <input type='text' id='Question' class="form-control" placeholder="Question" /> 
     <input type='text' id='Answer' class="form-control" placeholder="Answer" /> 
     <input type='text' id='Testcases' class="form-control" placeholder="Testcases" /> 

     <p style="margin-left:150px;"> 
     <label>Difficulty level:</label> 
     <input type="radio" name="A" id='E' value="Easy" checked="checked" /> 
     <label for='E'>Easy</label> 
     <input type="radio" name="A" id='M' value="Medium" /> 
     <label for='M'>Medium</label> 
     <input type="radio" name="A" id='H' value="Hard" /> 
     <label for='H'>Hard</label> 
     </p> 
    </div> 
    <input type='button' class='lg-button' onclick='send()' value='Submit' /> 

    </form> 
</div> 

<script> 
    function send() { 
    var question = document.getElementById('Question').value; 
    var answers = document.getElementById('Answer').value; 
    var cases = document.getElementById('Testcases').value; 

    var ch = document.getElementsByName('A').value; 

    var data = { 
     'Question': question, 
     'Answer': answers, 
     'Testcases': cases, 
     'A': ch 
    }; 

    var hr = new XMLHttpRequest(); 
    hr.onreadystatechange = function() { 
     if (hr.readyState === 4) { 
     document.getElementById('send').innerHTML = hr.responseText; 
     } 
    }; 


    hr.open("POST", "URL", true); 

    hr.send(JSON.stringify(data)); 

    //alert(JSON.stringify(data)); 
    } 

</script> 

Answer 1

下面是工作代碼，

function send() { 
 

 
    const question = document.getElementById('Question').value; 
 
    const answers = document.getElementById('Answer').value; 
 
    const testCases = document.getElementById('Testcases').value; 
 

 
    const level = document.querySelector('[name="A"]:checked').value; 
 

 
    const data = { 
 
    'Question': question || '', 
 
    'Answer': answers || '', 
 
    'Testcases': testCases || '', 
 
    'A': level 
 
    }; 
 

 
    console.log(data); 
 

 
    const xhr = new XMLHttpRequest(); 
 
    xhr.onreadystatechange = function() { 
 
    if (xhr.readyState === 4) { 
 
     document.getElementById('response').innerHTML = xhr.responseText; 
 
    } 
 
    }; 
 

 
    xhr.open("POST", "URL", true); 
 
    xhr.send(JSON.stringify(data)); 
 
}

<div id="container"> 
 

 
    <input type='text' id='Question' class="form-control" placeholder="Question" /> 
 
    <input type='text' id='Answer' class="form-control" placeholder="Answer" /> 
 
    <input type='text' id='Testcases' class="form-control" placeholder="Testcases" /> 
 

 
    <p style="margin-left:150px;"> 
 
     <label>Difficulty level:</label> 
 

 
     <input type="radio" name="A" id='E' value="Easy" checked="checked" /> 
 
     <label for='E'>Easy</label> 
 

 
     <input type="radio" name="A" id='M' value="Medium" /> 
 
     <label for='M'>Medium</label> 
 

 
     <input type="radio" name="A" id='H' value="Hard" /> 
 
     <label for='H'>Hard</label> 
 
    </p> 
 

 
    <input type='button' class='lg-button' onclick='send()' value='Submit' /> 
 

 
    <p id="response"></p> 
 
</div>