title: adding radio-buttons to PHP/AJAX contact form
body: <p>I can't add radio-buttons to my contact form (PHP+AJAX). The code is working fine with normal inputs but when I'm trying to add radio-buttons after clicking submit button it just reloading the page.
  I've tried to use:</p>
  
  <pre><code>formdata.append( "input[name='group_name']:checked", _("input[name='group_name']:checked").value ); 
  </code></pre>
  
  <p>or </p>
  
  <pre><code>formdata.append( "input:radio[name=group_name] :selected", _("input:radio[name=group_name] :selected").value );
  </code></pre>
  
  <p>but it's not working. </p>
  
  <p>HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Website Contact Form&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function _(id){ return document.getElementById(id); }
  function submitForm(){
   _("mybtn").disabled = true;
   _("status").innerHTML = 'please wait ...';
   var formdata = new FormData();
   formdata.append( "n", _("n").value );
   formdata.append( "e", _("e").value );
   formdata.append( "m", _("m").value );
      var group_name = $(".group_name:checked").val();
   var ajax = new XMLHttpRequest();
   ajax.open( "POST", "example_parser.php" );
   ajax.onreadystatechange = function() {
    if(ajax.readyState == 4 &amp;&amp; ajax.status == 200) {
     if(ajax.responseText == "success"){
      _("my_form").innerHTML = '&lt;h2&gt;Thanks '+_("n").value+', your message has been sent.&lt;/h2&gt;';
     } else {
      _("status").innerHTML = ajax.responseText;
      _("mybtn").disabled = false;
     }
    }
   }
   ajax.send( formdata );
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form id="my_form" onsubmit="submitForm(); return false;"&gt;
    &lt;p&gt;&lt;input id="n" placeholder="Name" required&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input id="e" placeholder="Email Address" type="email" required&gt;&lt;/p&gt;
      &lt;p&gt;Select your option:&lt;/p&gt;
    &lt;input id="r1" type="radio" class="group_name" name="group_name" value="option1"&gt;
    &lt;label for="r1"&gt;Option1&lt;/label&gt;
    &lt;input id="r2" type="radio" class="group_name" name="group_name" value="option2"&gt;
    &lt;label for="r2"&gt;Option2&lt;/label&gt;
    &lt;br /&gt; &lt;br /&gt;
    &lt;textarea id="m" placeholder="write your message here" rows="10" required&gt;&lt;/textarea&gt;
    &lt;p&gt;&lt;input id="mybtn" type="submit" value="Submit Form"&gt; &lt;span id="status"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and PHP parser</p>
  
  <pre><code>if( isset($_POST['n']) &amp;&amp; isset($_POST['e']) &amp;&amp; isset($_POST['m']) ){
  $n = $_POST['n']; 
  $e = $_POST['e'];
  $r1 = $_POST['.group_name:checked'];
  $m = nl2br($_POST['m']);
  $to = "email_adress"; 
  $from = $e;
  $subject = 'Contact Form Message';
  $message = '&lt;b&gt;Name:&lt;/b&gt; '.$n.' &lt;br&gt;&lt;b&gt;Email:&lt;/b&gt; '.$e.' '.$r1.' &lt;p&gt;'.$m.'&lt;/p&gt;';
  $headers = "From: $from\n";
  $headers .= "MIME-Version: 1.0\n";
  $headers .= "Content-type: text/html; charset=iso-8859-1\n";
  if( mail($to, $subject, $message, $headers) ){
      echo "success";
  } else {
      echo "The server failed to send the message. Please try again later.";
  }
  }
  </code></pre>
  
  <p>Any ideas? 
  I've spent a whole day to figure it out. Help! :D</p>