表单决定-JavaScript / AJAX

I have a little dilemma with the decision part of my form. I'm attempting to create a form with radio buttons and a checkbox in an html page but I would like to retrieve data from my .php page. I think there's an issue with the .php portion of the code. I'm getting a response from each 'if' statement regardless of the selections I make. for Example - If I select radio1 & checkbox I get "Radio One AND checkbox.Radio Two AND checkbox.Radio Three AND checkbox." This is the type of result with any query.

Suggestions ?

HTML FORM

    // start the query string
    var QueryString = "form_test.php?";
    
      if (document.getElementById("radio1").checked == true  && document.getElementById("box").checked) {
      
      QueryString = QueryString + "radio1=" + document.getElementById("radio1").value + "box=" + document.getElementById("box").value;

     } else if (document.getElementById("radio2").checked == true  && document.getElementById("box").checked)  {
      
      QueryString = QueryString + "radio2=" + document.getElementById("radio2").value + "box=" + document.getElementById("box").value;

     } else if (document.getElementById("radio3").checked == true  && document.getElementById("box").checked)  {
      
      QueryString = QueryString + "radio3=" + document.getElementById("radio3").value + "box=" + document.getElementById("box").value;
     } 

  //alert(QueryString);
  xmlHttp.open("GET", QueryString, true);
  xmlHttp.send(null);
  }

</script></head>

<body>
<p>Test Form</p>
<form id="myform" name="myform" method="POST">
  <p>
    <input type="radio" name="radbutton" id="radio1">
    <label>Radio One</label>
  </p>
  <p>
    <input type="radio" name="radbutton" id="radio2">
    <label>Radio Two</label>
  </p>
  <p>
    <input type="radio" name="radbutton" id="radio3">
    <label>Radio Three</label>
  </p>
  <p>
    <input type="checkbox" name="check" id="box">
    <label>CheckBox</label>
  </p>
   <input type="button" name="button" id="button" value="Test Form" onclick="ajaxFunction();"/>
  </p>
</form>
  <p>
    <div id="OutputPane">
    </div>
  </p>
</body>
</html>

PHP CODE

<?php

if ((isset($_GET['radio1']) || isset($_GET['box']))) {
    echo "Radio One AND checkbox.";
} else {
    echo "Radio One";
} 

if ((isset($_GET['radio2']) || isset($_GET['box']))) {
    echo "Radio Two AND checkbox.";
} else {
    echo "Radio Two.";
}


if (isset($_GET['radio3']) || (isset($_GET['box']))) {
    echo "Radio Three AND checkbox.";
} else {
    echo "Radio Three.";
}


?>

</div>

Is it php-behavior you need?

if (isset($_GET['box'])) {
    if (isset($_GET['radio1'])) {
        echo "Radio One AND checkbox.";
    }

    if (isset($_GET['radio2'])) {
        echo "Radio One AND checkbox.";
    }

    if (isset($_GET['box'])) {
        echo "Radio Three AND checkbox.";
    }
} else {

    if (isset($_GET['radio1'])) {
        echo "Radio One";
    }

    if (isset($_GET['radio2'])) {
        echo "Radio Two";
    }

    if (isset($_GET['radio3'])) {
        echo "Radio Three";
    }
}

There are few issues with your code, such as:

There's no value attribute in your radio buttons, so you won't get anything with document.getElementById("radioX").value. Add a value attribute in your radio buttons,
```
<input type="radio" name="radbutton" id="radioX" value="radioX" />
```

Missing & between radioX=...box=.... It should be like this,

... document.getElementById("radioX").value + "&box=" + ...

Change your QueryString in the following way,
```
QueryString = QueryString + "radio=" + ...
```
Because in the way it'd be easier for you to access $_GET['radio'] values in the backend PHP page.
Change <div id="OutputPane"> to <div id="DisplayBox"></div>.

So your code should be like this:

HTML

<p>Test Form</p>
<form id="myform" name="myform" method="POST">
    <p>
        <input type="radio" name="radbutton" id="radio1" value="radio1" />
        <label>Radio One</label>
    </p>
    <p>
        <input type="radio" name="radbutton" id="radio2"  value="radio2" />
        <label>Radio Two</label>
    </p>
    <p>
        <input type="radio" name="radbutton" id="radio3" value="radio3">
        <label>Radio Three</label>
    </p>
    <p>
        <input type="checkbox" name="check" id="box">
        <label>CheckBox</label>
    </p>
        <input type="button" name="button" id="button" value="Test Form" onclick="ajaxFunction();"/>
    </p>
</form>
<p>
    <div id="DisplayBox"></div>
</p>

Javascript

// start the query string
var QueryString = "form_test.php?";
if (document.getElementById("radio1").checked == true){
    QueryString += "radio=" + document.getElementById("radio1").value;
} else if (document.getElementById("radio2").checked == true){
    QueryString += "radio=" + document.getElementById("radio2").value;
} else if (document.getElementById("radio3").checked == true){  
    QueryString += "radio=" + document.getElementById("radio3").value;
} 
if(document.getElementById("box").checked){
    QueryString += "&box=" + document.getElementById("box").value;
}

PHP

$str = '';
if(isset($_GET['radio'])){
    switch($_GET['radio']){
        case 'radio1':
            $str .= 'Radio One';
            break;
        case 'radio2':
            $str .= 'Radio Two';
            break;
        case 'radio3':
            $str .= 'Radio Three';
            break;
    }
}
if(isset($_GET['box'])){
    $str .= !empty($str) ? ' AND ' : '';
    $str .= 'Checkbox';
}
echo $str;