获取隐藏的单选按钮值并使用ajax插入表单

时间:2016-06-03 06:14:30

标签: jquery html

我有两个单选按钮,用户可以在其中选择用户类型。单选按钮是隐藏的,我使用的是图像而不是原始设计。我要做的是设置onLoad上选中的单选按钮的默认值,这样用户就不必进行额外的点击。我尝试在HTML中设置单选按钮,但是没有传递值,因为我有var值;作为formData的参数。

HTML

<div class="form-group" id="radio-image">
    <div class="cc-selector">
        <div class="col-md-6" style="margin-bottom: 2em;">
            <input id="hoidja" type="radio" class="account" name="accountType" value="hoidja" />
            <label class="usertype hoidja" id="hoidja" for="hoidja" style="-webkit-filter: brightness(1) grayscale(0.6) opacity(0.9);"></label>
            <b class="user_type_form">HOIDJA</b>
        </div>
        <div class="col-md-6" style="margin-bottom: 2em;">
            <input id="pere" type="radio" class="account" name="accountType" value="pere" checked/>
            <label class="usertype pere" for="pere" style="-webkit-filter: brightness(1) grayscale(0) opacity(1);"></label>
            <b class="user_type_form">PERE</b>
        </div>
    </div>
</div>

JS

$(document).ready(function(){

    var value
            $("input:radio[name=accountType]").click(function() {
                value = $(this).val();
                console.log(value);
            });

            $("#btn-signup").on("click", function(){
                var formData = {
                    'formEmail'                : $('#formEmail').val(),
                    'formPassword'             : $('#formPassword').val(),
                    'accountType'              : value,
                    't_and_c'                  : $('#t_and_c').val(),
                    'formFirstName'            : $('#formFirstName').val(),
                    'formLastName'             : $('#formLastName').val(),

                };
                ////COMES REST OF THE AJAX
});

1 个答案:

答案 0 :(得分:3)

对于RadioButtons,而不是.click,最好使用.change事件(非强制性)并在页面加载时触发它。

var value = '';
$("input:radio[name=accountType]").change(function() {
   value = $("input:radio[name=accountType]:checked").val(); //OR $(this).val();
   console.log(value);
}).trigger('change');