Using javascript to get values from radio buttons

Question

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.

This is the HTML for my radio buttons (stripped of indents):

<div>
<input id="radioB" type="radio" name="radios" value="b" checked="checked">
<label for="radioB"><span><span></span></span>B</label>
</div>
<div>
<input id="radioT" type="radio" name="radios" value="t">
<label for="radioT"><span><span></span></span>T</label>
</div>

And this is my script:

$(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);
                    }
            });
    });
});

and in my flask code, I am attempting to request it using:

_info = request.form['radios']

When I currently try to run this, I get a

"POST /submit HTTP/1.1" 400 -

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!

EDIT: I have changed my html to:

    <form action ="/submit" form method="post">
    <div>
        <input id="radioB" type="radio" name="radios" value="b" checked="checked">
        <label for="radioB"><span><span></span></span>B</label>
     </div>
     <div>
         <input id="radioT" type="radio" name="radios" value="t">
         <label for="radioT"><span><span></span></span>T</label>
     </div>
     <input type="submit" id="btnSubmit">

and my JS script to:

$(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);
                }
        });
    });
});

and now am getting the error condition of the above JS script in the browser console instead of my previous error.

Answer 1

shouldn't it be

$("input[name='radios']:checked").val()

if you are accessing with name!

Hope it helps!

Answer 2

Try $("input[name='radios']:checked").val(); to get radio button value i hope you get solution

 $(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); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post"> <div> <input id="radioB" type="radio" name="radios" value="b" checked="checked"> <label for="radioB"><span><span></span></span>B</label> </div> <div> <input id="radioT" type="radio" name="radios" value="t"> <label for="radioT"><span><span></span></span>T</label> </div> <input type="submit" id="btnSubmit"> </form>