How do I store the values of radio buttons inside an array

Question

I'm kind of new to Ajax, so I was wondering how I can store the values of radio buttons inside of an array, as I did for "question", "answer", and "testcases". I need to send the information through a PHP script, that's why I wanted to store the data. Any help would be appreciated, thanks.

<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

Below is the working code,

 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>