title: Using javascript to get values from radio buttons
body: <p>I'm attempting to setup a small web app using Flask and MySQL which takes information from radio buttons on a page and sends it into a DB.  I am very new to webdev, so I'm still stuck on actually getting the information from the buttons.</p>
  
  <p>This is the HTML for my radio buttons (stripped of indents):</p>
  
  <pre><code>&lt;div&gt;
  &lt;input id="radioB" type="radio" name="radios" value="b" checked="checked"&gt;
  &lt;label for="radioB"&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;B&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;input id="radioT" type="radio" name="radios" value="t"&gt;
  &lt;label for="radioT"&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;T&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my script:</p>
  
  <pre><code>$(function(){
      $('#btnSubmit').click(function(){
              $.ajax({
                      url: '/submit',
                      data: $('radios:checked').val(),
                      type: 'POST',
                      success: function(response){
                              console.log(response);
                      },
                      error: function(error){
                              console.log(error);
                      }
              });
      });
  });
  </code></pre>
  
  <p>and in my flask code, I am attempting to request it using:</p>
  
  <pre><code>_info = request.form['radios']
  </code></pre>
  
  <p>When I currently try to run this, I get a</p>
  
  <pre><code>"POST /submit HTTP/1.1" 400 -
  </code></pre>
  
  <p>error in the flask log, leading me to believe my problem lies either in the 'data' portion of my script and/or the flask request.  Any help with any portion of this would be greatly appreciated!</p>
  
  <p>EDIT: I have changed my html to:</p>
  
  <pre><code>    &lt;form action ="/submit" form method="post"&gt;
      &lt;div&gt;
          &lt;input id="radioB" type="radio" name="radios" value="b" checked="checked"&gt;
          &lt;label for="radioB"&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;B&lt;/label&gt;
       &lt;/div&gt;
       &lt;div&gt;
           &lt;input id="radioT" type="radio" name="radios" value="t"&gt;
           &lt;label for="radioT"&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;T&lt;/label&gt;
       &lt;/div&gt;
       &lt;input type="submit" id="btnSubmit"&gt;
  </code></pre>
  
  <p>and my JS script to:</p>
  
  <pre><code>$(function(){
  $('#btnSubmit').click(function(){
          var radioValue = $("input[name=radios]:checked").val();
          alert(radioValue);
          $.ajax({
                  url: '/submit',
                  data: {value:radioValue},
                  type: 'POST',
                  success: function(response){
                          console.log(response);
                  },
                  error: function(error){
                          console.log(error);
                  }
          });
      });
  });
  </code></pre>
  
  <p>and now am getting the error condition of the above JS script in the browser console instead of my previous error.</p>