2017-02-23 116 views
0

我正在嘗試使用Flask和MySQL來設置一個小型Web應用程序,該應用程序從頁面上的單選按鈕獲取信息並將其發送到數據庫。我對webdev非常陌生,所以我仍然堅持從按鈕中獲取信息。使用javascript從單選按鈕獲取值

這是(剝離縮進)爲我的單選按鈕的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 - 

燒瓶日誌中的錯誤,導致我相信我的問題在於我的腳本的「數據」部分和/或燒瓶請求。任何幫助與此任何部分將不勝感激!

編輯:我已經改變了我的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腳本的錯誤條件在瀏覽器控制檯,而不是我以前的錯誤。

回答

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>

+0

我刪除了現有的按鈕,我用來提交併採取你的方法。除了你的表單方法發佈(提交是我的博客功能頁面)之外,我不得不添加

,但它似乎有點作用。它看起來我的JavaScript腳本不按預期工作,並返回錯誤狀態。 – zimty

+1

嘿重新嘗試我的代碼,我希望現在你可以輕鬆地找到你的問題,並解決它。 在AJAX中默認的請求數據類型是JSON,所以你需要以json格式傳遞數據,其他明智的你需要指定dataType。 '$就({ URL: '/提交', 數據:{值:radioValue}, 類型: 'POST', 成功:功能(響應){ 的console.log(響應); } error:function(error){ console.log(error); } });' – Jyupin

+0

非常感謝您的協助!該警報正在給我從收音機獲得正確的值,但我仍然在腳本的瀏覽器控制檯中收到錯誤狀態。 「對象{readyState的:0,狀態:0,狀態文本:‘錯誤’}」 – zimty

1

它不應該是

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

,如果你是名訪問!

希望它有幫助!

+0

是謝謝你,我相信你是正確的,但我仍然得到一個HTTP 400錯誤 – zimty