Использование javascript для получения значений из переключателей

Question

Я пытаюсь настроить небольшое веб-приложение с помощью Flask и MySQL, которое берет информацию с помощью переключателей на странице и отправляет ее в БД. Я очень новичок в webdev, поэтому я все еще зациклился на том, чтобы получать информацию с кнопок.

Это HTML для моих радиокнопок (разделите абзацы):

<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> 

И это мой сценарий:

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

и в моем колба коде, я пытаюсь запросить его с помощью:

_info = request.form['radios'] 

Когда я в настоящее время пытаюсь запустить это, я получаю

"POST /submit HTTP/1.1" 400 - 

Ошибка в журнале фляги, что привело меня к мысли, что моя проблема заключается либо в части данных моего сценария, либо в запросе на флягу. Любая помощь с любой частью этого будет принята с благодарностью!

EDIT: Я изменил мой HTML на:

<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"> 

и мой JS скрипт:

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

и теперь я получаю состояние ошибки указанного выше JS скрипт в консоли браузера моей предыдущей ошибки.

Answer 1

Попробуйте $("input[name='radios']:checked").val();, чтобы получить значение кнопки радио я надеюсь, что вы получите решение

$(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>

Answer 2

не должна быть

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

, если вы обращаетесь с именем!

Надеюсь, это поможет!