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>

Refer to - [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — shawon191, Oct 15 '17 at 03:36

score 0 · Accepted Answer · answered Oct 15 '17 at 03:41

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>

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

1 Answers1