title: Get the radio button value through ajax to php file
body: <p>After clicking the radio button, the value from the radio button is not being passed when the <em>onclick</em> event is triggered. Here is my code:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;form name="Form1" id="color" style="font-size: 100%" action="#"&gt;  
      &lt;input type="radio"  name="radio1"  id="radio1" onclick = "MyAlert()" value="blue"/&gt;Blue  &lt;br /&gt;&lt;/p&gt;  
  &lt;p&gt; &lt;input type="radio"  name="radio1" id="radio1" onclick = "MyAlert()" value="red"/&gt;Red  
  &lt;/form&gt;  
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;  
  function MyAlert()  {  
      var radio1=$('input[type="radio"]:checked').val();
      var pass_data = {
              'radio1' : radio1,
          };
          alert(pass_data);
          $.ajax({
              url : "",
              type : "POST",
              data : pass_data,
              success : function(data) {
              }
          });
          return false;
      }  
  &lt;/script&gt;
  &lt;?php
      echo $radio1=$_GET['radio1'];
  ?&gt;
  </code></pre>
  
  <p>When I click the radio button, I get the error </p>
  
  <blockquote>
    <p>Undefined index: radio1 </p>
  </blockquote>
  
  <p>I want to display value of the radio button when clicking it within the same page.</p>