I am trying to send the radio button value to Controller via ajax request, and so far nothing works
<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female">
<label class="form-check-label" for="Female">Female</label><br>
<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male">
<label class="form-check-label" for="Male"> Male </label><br>
<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other">
<label class="form-check-label" for="Other">Other</label><br>
I tried with the following methods that do not work for me:
$('.gender:checked').val();
$('input[name="gender"]:selected').val();
$('#gender').val();
Any help?
You should be responding to an event for example a click or an onchange event see more here:
<input class="form-check-input" type="radio" class="gender" name="gender" id="Female" value="Female" />
<label class="form-check-label" for="Female">Female</label><br>
<input class="form-check-input" type="radio" class="gender" name="gender" id="Male" value="Male" />
<label class="form-check-label" for="Male"> Male </label><br>
<input class="form-check-input " type="radio" class="gender" name="gender" id="Other" value="Other" />
<label class="form-check-label" for="Other">Other</label><br>
$("input[type='radio']").click((ev) => {
console.log("click",ev.currentTarget.attributes.value.value);
})
$("input[type='radio']").change((ev) => {
console.log("change",ev.target.attributes.value.value);
})
jsfiddle
In order to identidy the value of each field, use #id instead of .ClassName,
$('#Female:checked').val();
$('#Male').val();
$('#Other').val();
otherwise, you can use radio buttons
Related
i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>
P.S- There are other similar questions, but their methods show an error message
I have a form with multiple checkbox values. A user may select one or more than one options.
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
In JavaScript, I tried to send all the data onto another function as mentioned here.
$('.submitDecision').click(function(){
var decisionCheckboxes = new Array();
console.log(decisionCheckboxes);
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input:checked").each(function() {
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
saveDecision(data); -------------> saveDecision is the function
}
});
In the console, I am getting this, EVEN IF NO OPTION IS SELECTED
DecisionType:"3"
decisionComments: (9) ["1", "2", "3","4" ,"other", "on", "on", "on", "on", "on"]
Please tell me the problem
First, you are pushing all input rather than the only the checkbox. check below code.
$('.submitDecision').click(function(){
var decisionCheckboxes = [];
var data = {};
data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
$("input.form-check-input:checked").each(function() {
if( $(this).val() == 'other' ){
console.log('conditions for other value');
}
decisionCheckboxes.push($(this).val());
});
data['decisionComments']=decisionCheckboxes;
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>
<input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>
<button class="submitDecision">Submit</button>
I'm developing an application that display 2 graphs and contain radio buttons to change the time interval.
What i'm trying to do is, for example, if i select monthly in the 2nd set of radio buttons the first set should also have that option check.
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline"><input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4"
ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline"><input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5"
ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2" >Weekly</label>
<label class="radio-inline"><input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6"
ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
I've tried to checked using the following code in JS:
$scope.SetDay= function(){
document.getElementById("SettingMixRadioButtonsGroup1").child[0].checked = true;
document.getElementById("SettingMixRadioButtonsGroup2").child[0].checked = true;
};
But It won't perform the check on the child element... if i use the parent it works fine but its not a very scalable solution
This creates a handler for the change event for the radio buttons. It selects all radio buttons under panel-radio-buttons which have the same value attribute and sets their checked property to that of the element which triggered the event.
$("input[type=radio][name=radio1]").change(function() {
var val = $(this).attr("value");
var radio = $(".panel-radio-buttons input[type=radio][name=radio1][value=" + val + "]");
radio.prop("checked", $(this).is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup1">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient2" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()'>Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient3" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
<div class="panel-radio-buttons">
<form id="SettingMixRadioButtonsGroup2">
<label class="radio-inline">
<input type="radio" name="radio1" value="1" id="BtnEnrollmentsInpatient4" ng-model="togglePefsBifsTimeFrame" ng-change='SetDay()'>Daily</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="2" id="BtnEnrollmentsInpatient5" ng-model="togglePefsBifsTimeFrame" ng-change='SetWeek()' ng-checked="togglePefsBifsTimeFrame2">Weekly</label>
<label class="radio-inline">
<input type="radio" name="radio1" value="3" id="BtnEnrollmentsInpatient6" ng-model="togglePefsBifsTimeFrame" ng-change='SetMonth()'>Monthly</label>
</form>
</div>
i want to retrieve radio button value in checked radio button in jsp page
<% String gen=rs.getString("gender");session.setAttribute("gender", gen); %>
<input type="radio" name="gender" id="male" value="male" />male
<input type="radio" name="gender" id="female" value="female" />Female
<input type="radio" name="gender" id="other" value="other" />
You can use el to add checked attribute on condition
<input type="radio" name="gender" id="male" value="male" ${gen eq "male"?'checked="checked"':''}/>
<input type="radio" name="gender" id="female" value="female" ${gen eq "female"?'checked="checked"':''}/>Female
<input type="radio" name="gender" id="other" value="other" ${gen eq "other"?'checked="checked"':''}/>
You can check for each option if this option's value is equal to the gender. If so add checked="checked"
ex:
<input type="radio" name="gender" id="male" value="male" <% Response.Write( (gen == "male") ? ' checked="checked"' : '' ) %> />male
or you can take a look at this question
I'm having following markup:
<div class="controls">
<input type="radio" id="sex" name="sex" value="m"> Boy
<input type="radio" id="sex" name="sex" value="f"> Girl
<input type="radio" id="sex" name="sex" value="t"> Twins
</div>
How can I select each radio button and it's subsequent text. My goal is to wrap both in a label, so the output would be:
<div class="controls">
<label><input type="radio" id="sex" name="sex" value="m"> Boy</label>
<label><input type="radio" id="sex" name="sex" value="f"> Girl</label>
<label><input type="radio" id="sex" name="sex" value="t"> Twins</label>
</div>
Unfortunately, the markup is created by a CMS. (It also adds id="sex" multiple times, blergh).
The shortest I can think of:
$('.controls :radio').each(function() {
$(this).add(this.nextSibling).wrapAll('<label>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<input type="radio" id="sex" name="sex" value="m"> Boy
<input type="radio" id="sex" name="sex" value="f"> Girl
<input type="radio" id="sex" name="sex" value="t"> Twins
</div>