I have two forms with radio type inputs, I would like that when we check an input in the 1st form another input is automatically checked in the second.
Here is the code of the 1st form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_noir-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" checked="" data-qtip="no">
<label for="cta-couleur_Noir-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-couleur_bleu-color-selector" type="radio" name="couleur-color-selector" data-field="couleur-field" data-qtip="no">
<label for="cta-couleur_Bleu-color-selector" class="vpc-custom-color custom" data-selector="couleur-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
And here is the code of the 2nd form:
<div class="color-box cta-box">
<label>Colors</label>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_noir-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" checked="" data-qtip="no">
<label for="cta-texte-en-tete-centre_Noir-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Noir" data-name="Noir" data-oriontip="Noir" style="background-color:#000000"></label>
</div>
<div class="vpc-single-option-wrap">
<input id="cta-texte-en-tete-centre_bleu-color-selector" type="radio" name="texte-en-tete-centre-color-selector" data-field="texte-en-tete-centre-field" data-qtip="no">
<label for="cta-texte-en-tete-centre_Bleu-color-selector" class="vpc-custom-color custom" data-selector="texte-en-tete-centre-field" data-color="Bleu" data-name="Bleu" data-oriontip="Bleu" style="background-color:#0419bd"></label>
</div>
</div>
So I would like that when I check the input with the ID cta-couleur_noir-color-selector in the 1st form, the input with the ID cta-texte-en-tete-centre_noir-color-selector "is automatically checked in the second form and the same for the id" cta-couleur_bleu-color-selector "which would correspond to the ID" cta-texte-en-tete-center_bleu-color-selector .
I tried with this script but it doesn't work:
<script type="text/javascript">
jQuery('input[type=radio][name=couleur-color-selector]').on('change', function () {
if ( jQuery(this).attr('id') == 'cta-couleur_bleu-color-selector'.checked) {
jQuery('#cta-texte-en-tete-centre_bleu-color-selector').prop(checked, true);
}else
{
jQuery('#cta-texte-en-tete-centre_noir-color-selector').prop('checked', true);
}
});
</script>
Could someone help me?
You must set unique value for each radio box in 1st form.
and check when radio click => get value and check to same unique value in 2nd form.
example:
$(document).on('click', '[type="radio"]', function () {
let value = $(this).val();
$('[value="'+value+'"]').prop('checked', true);
});
Related
I have multiple radio button sharing the same name. One of them has a hidden div next to It.
When the correct radio button is selected, I want to show/hide the div that is next it to it "if one is there"
Here is an example
Radio 1
Radio 2
Radio 3
Radio 4
Next to Radio 2 there is a hidden div. I want to show it when Radio 2 is selected. Then when Radio 4 is selected, I want to hide the Radio 2 div
Here is what I have done
$(function(){
function getGroupElement(value)
{
return '#group_' + value.replace(':', '_');
}
var previous;
$("input[type='radio']").click(function(e) {
// Store the current value on focus and on change
previous = $(this).val();
console.log('Current:' + previous);
}).change(function(e) {
var previousGroupId = getGroupElement(previous);
var newGroupName = $(this).data('show-group');
//Hide the previous Group
$(previousGroupId).hide();
if ( ! newGroupName){
return;
}
$(newGroupName).show();
});
});
My code above is not working because previous is set to the next selected item.
How can I hide/show the correct box?
If needed here is my HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<fieldset class="survey-control-fieldset">
<div class="survey-control-title">
Select a store
</div>
<div class="radio">
<label for="item_529"><input checked id="item_529" name=
"control_111" type="radio" value="112:529"> None</label>
</div>
<div class="radio">
<label for="item_530"><input id="item_530" name="control_111" type=
"radio" value="112:530"> Don't Know/No Answer</label>
</div>
<div class="radio">
<label for="item_532"><input data-show-group="group_112_532" id=
"item_532" name="control_111" type="radio" value="112:532">
Other</label>
<div id="group_112_532" style="display: none;">
<div class="form-group">
<label for="control_113">Specify Other Store Name</label>
<input class="form-control" id="control_113" name=
"control_113" placeholder="" type="text" value="">
</div>
</div>
</div>
<div class="radio">
<label for="item_531"><input id="item_531" name="control_111" type=
"radio" value="112:531"> Refused</label>
</div>
</fieldset>
</body>
</html>
Hide all the DIVs that are next to radios, then show the one next to the selected radio.
$(":radio").next("div").hide();
$(this).next("div").show();
If you give each of the hidden div's the same class name, you can just hide them all before you show the new one:
$('.hidden-divs').not(newGroupName).hide();
$(newGroupName).show();
I have the following form :
<form class="form-inline" role="form">
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox">
<label>
<input type="checkbox" name="discounting" onchange='handleChange(this);' id='check11' > Show only price-discounted products
</label>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="pic-container">
<div class="checkbox" id='check21'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
</div>
</div>
</form>
I'd like to be able to check the second checkbox automatically with JavaScript once I check the first one. I tried using the following script :
<script>
function handleChange(cb) {
if(cb.checked == true) {
alert('Message 1');
document.getElementById("check21").checked = true;
} else {
alert('Message 2');
var x = document.getElementById("check21").disabled= false;
}
}
</script>
But it doesn't work since I think with bootstrap is a question of classes.
The problem as Didier pointed out is that you have two elements with the same ID:
<div class="checkbox" id='check21'>
and
<input type="checkbox" name="discounting" onchange='' id='check21'>
The call to document.getElementById('check21') will probably (because the behavior is undefined) return the first one, which in this case is the <div> element, not the checkbox.
You must not use the same ID on two HTML elements, so you need to change the ID on one or the other of them.
http://jsfiddle.net/uywaxds5/2/
I included boostrap as an external reference.
<div class="checkbox" id='check22'>
<label>
<input type="checkbox" name="discounting" onchange='' id='check21'> Show only price-discounted products
</label>
</div>
Fixing the duplicate id seems to work.
If it does not works, the issue might be in another part of your code.
Use a different name for the second radio button
<input type="checkbox" name="discounting21">
There can only be one selected radio button belonging to the same group(ie. name).
I have a number of account items.
I am displaying these in a list doing something like
<md-list-item ng-repeat="item in items">
and for every such item i display three radio buttons in a group, holding values like
admin
user
moderator
Right now a user can select a value for each group of radio buttons, but what I want to do is have only one admin.
So if an admin value is selected the I should block all other admin radio buttons.
How can this be done?
Have a ng-change method that stores the admin item in a scope property to keep track of which item has admin selected:
$scope.radioChanged = function (item) {
if (item.selectedValue == "admin") {
$scope.admin = item;
}
else if (item == $scope.admin) {
$scope.admin = undefined;
}
};
Then use ng-disabled on the admin radio button that will disable the radio button if an admin has been selected and the admin is not the current item.
<div ng-repeat="item in items">
<label><input type="radio" name="{{item.id}}" value="admin" ng-model="item.selectedValue" ng-change="radioChanged(item)" ng-disabled="admin && item != admin"/>admin</label>
<label><input type="radio" name="{{item.id}}" value="user" ng-model="item.selectedValue" ng-change="radioChanged(item)"/>user</label>
<label><input type="radio" name="{{item.id}}" value="moderator" ng-model="item.selectedValue" ng-change="radioChanged(item)"/>moderator</label>
</div>
Plunkr
I would create a variable, maybe adminExists, that is set to true when you select 'Admin' on any of the radio buttons. You could then have all the "Admin" radio buttons become disabled if(adminExists && !isSelected), where isSelected is true if that radio button is the admin button that was selected.
The code below checks the value of the selected radio button against the value of other radio buttons to see if they match up (in this case if the value is "admin"). It then deselects all the radio input elements with that value and then checks the element that was initially clicked or selected to set it to active. You can change the function to use a data attribute instead of the value if you'd prefer as well.
$(".group input[type=radio]").bind("click change keydown focus", function () {
var el = $(this);
var val = el.val();
if (el.prop("checked", true) && val == "admin") {
$(".group input[type=radio]").each(function () {
if ($(this).val() == "admin") $(this).prop("checked", false);
});
el.prop("checked", true);
}
});
.choice {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="group">
<div class="choice">
<input type="radio" name="group[0][]" value="admin" />
<label>Admin</label>
</div>
<div class="choice">
<input type="radio" name="group[0][]" value="user" />
<label>User</label>
</div>
<div class="choice">
<input type="radio" name="group[0][]" value="moderator" />
<label>Moderator</label>
</div>
</div>
<div class="group">
<div class="choice">
<input type="radio" name="group[1][]" value="admin" />
<label>Admin</label>
</div>
<div class="choice">
<input type="radio" name="group[1][]" value="user" />
<label>User</label>
</div>
<div class="choice">
<input type="radio" name="group[1][]" value="moderator" />
<label>Moderator</label>
</div>
</div>
</form>
I am creating a form with multiple radio buttons and text boxes.
Each Text box is next to radio button like below:
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="correct_answer_id">
Correct
</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required>
</div>
</div>
There are several radio button and text box pair like above in the form.
On click of the radio button, i want to get whatever has been written in the corresponding text box
i am trying to use Jquery's next() function like below:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).next('input[type="text"]').val());
}
});
But my log shows undefined. What i am doing wrong?
Try this : find parent div of radio and do next().next() to get input box div and then find input box to get value.
NOTE - You need not to check if ($(this).is(':checked')) as when you click on radio button it will get checked always.
$('input[type="radio"]').click(function(){
var value = $(this).closest('.radio').next().next('.col-sm-10').find('input[type=text]').val();
console.log(value );
});
use below code using parents(); see working fiddle
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parents('div.radio').next().next('div.col-sm-10').find('input[type="text"]').val());
}
});
You should put the value that you want submitted in the value attribute of your input elements.
e.g. <input type="radio" name="correct_answer_id" value="correct">
Your click handler would change to:
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).val());
}
});
If there's some value that you don't want to place in the value attribute then it's still best to have a reference to the value in the input element instead of relying on a particular document layout.
Try this
$('input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
console.log($(this).parent().parent().siblings().find('input[type="text"]').val());
}
});
Working Demo
If you can change the html a little, here is a different approach http://jsfiddle.net/xa9cjLd9/1/
<div class="form-group">
<div class="radio">
<label data-for='answer[]'>
<input type="radio" name="correct_answer_id" />Correct</label>
</div>
<label for="answer" class="col-sm-2 control-label">Answer 2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="answer[]" placeholder="Answer" required />
</div>
</div>
$('input[type="radio"]').click(function () {
if ($(this).is(':checked')) {
var data = $(this).closest('label').attr('data-for');
console.log($('input[name=' + '"' + data + '"' + ']').val());
}
});
Just Define a data attribute to the label , which contains the name of the related input.
I'm trying to compare the selected radio button value to a predetermined value, then display text corresponding to either a match or not a match. This seems like it should be simple enough but it is displaying the "match" text regardless of whether the two values match or not.
Here's my code:
submit: function() {
$("#submit").click(function(){
if($("input:radio[name=answers]:checked").val() == triviaGame.correctSelection) {
$("#result").text("Correct!");
} else {$("#result").text("I'm sorry, you did not select the correct answer :(");}
});
I've also tried:
submit: function() {
$("#submit").click(function() {
if ($("input:radio[name=answers]:checked").val() == triviaGame.questions[questionSelectNum].choices[triviaGame.questions[questionSelectNum].choices[0]]) {
$("#result").text("Correct!");
} else {$("#result").text("I'm sorry, you did not select the correct answer :(");}
});
And I've tried === and == as well as other syntax tweaks.
I checked to make sure I was setting the values of the radio buttons correctly in my nextQuestion method and my test worked so I don't think that's the problem. What puzzles me the most is that the if (true) code executes when it shouldn't instead of the else (false) code executing when it shouldn't, which I think would be a more likely bug.
Here's my HTML:
<div>
<button id = "nextQuestion">Next Question</button>
<br></br>
<div id = "questionDisplay"></div>
<br></br>
<input type="radio" id= "1" name="answers" value="defaultVal">
<label id= "labelOne">Answer 1</label>
<br></br>
<input type="radio" id= "2" name="answers" value="defaultVal">
<label id= "labelTwo">Answer 2</label>
<br></br>
<input type="radio" id= "3" name="answers" value="defaultVal">
<label id= "labelThree">Answer 3</label>
<br></br>
<input type="radio" id= "4" name="answers" value="defaultVal">
<label id= "labelFour">Answer 4</label>
<br></br>
<button id = "submit">Submit</button>
<br></br>
<div id= "result">Please select an answer above</div>
</div>
Here's a link to the full code at jsbin.
Apologies, I got the wrong end of the stick at first, I think you just need to update this section:
//sets the values of each radio button to the same value as each radio's corresponding answer
$("#1") .val(triviaGame.firstAnswer);
$("#2") .val(triviaGame.firstAnswer);
$("#3") .val(triviaGame.firstAnswer);
$("#4") .val(triviaGame.firstAnswer);
With this:
//sets the values of each radio button to the same value as each radio's corresponding answer
$("#1") .val(triviaGame.firstAnswer);
$("#2") .val(triviaGame.secondAnswer);
$("#3") .val(triviaGame.thirdAnswer);
$("#4") .val(triviaGame.fourthAnswer);
http://jsbin.com/OKecora/1/edit