raqulka raqulka - 6 months ago 14
jQuery Question

Get hidden radio button value and insert form with ajax

I have two radio buttons where user can select the user type. The radio buttons are hidden and I am using images instead of the original design. What I am trying to do is to set the default value of the radio button checked onLoad, so the user doesn't have to make an extra click. I tried setting the radio button checked in HTML, but the value is not being passed, since I have the var value; as a parameter for 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
});

Answer

For RadioButtons, instead of .click it's better to use .change event(not compulsory) and trigger it on page load as well.

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