How can one avoid selecting 2 radio buttons with the same value? - javascript

I have a form where I have two groups of radio buttons, names are different but values are shared, so I need to select a radio from the first group, once it's selected the radio from the second group and same value can not be selected, i. e. it becomes disabled...
<table>
<tr><th>Origin language</th><th>Target language</th></tr>
<tr><td>
<label><input type="radio" name="lang_or" value="de">German</label>
<label><input type="radio" name="lang_or" value="en">English</label>
<label><input type="radio" name="lang_or" value="ca">Catalan</label>
<label><input type="radio" name="lang_or" value="es">Spanish</label>
<label><input type="radio" name="lang_or" value="fr">French</label>
<label><input type="radio" name="lang_or" value="it">Italian</label>
<label><input type="radio" name="lang_or" value="pt">Portugues</label>
</td><td>
<label><input type="radio" name="lang_tg" value="de">German</label>
<label><input type="radio" name="lang_tg" value="en">English</label>
<label><input type="radio" name="lang_tg" value="ca">Catalan</label>
<label><input type="radio" name="lang_tg" value="es">Spanish</label>
<label><input type="radio" name="lang_tg" value="fr">French</label>
<label><input type="radio" name="lang_tg" value="it">Italian</label>
<label><input type="radio" name="lang_tg" value="pt">Portugues</label>
</td></tr>
</table>

import jQuery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<script>
$( document ).ready(function() {
$('input[name=lang_or]').click(function(){
$('input[name=lang_tg]').prop("disabled",false);
$('input[name=lang_tg][value='+this.value).prop("disabled", "disabled");
});
});
</script>

Related

Keeping multiple onClick events independant yet functioning

The following div stacks some images together
<div class='small-6 medium-6 large-6 columns productimage'>
<img src='small/b6k7_fG1.png' name='bf' class='base' />
<img src='small/seat_flex_G1.png' id='seat' name='seat' class='overlay' style='z-index: 1' />
<img src='small/back_ZS.png' id='back' name='back' class='overlay' style='z-index: 2' />
<img src='small/back_support_G1.png' class='overlay' style='z-index: 3' />
</div>
The UI alows the user to change attributes, some of which are linked together, and refresh the image with a given name
One set
<div class="product">
<h6>Arms</h6>
<input type="radio" id="arms_" name="arms" value="_"><label>No Arms</label>
<input type="radio" id="arms_f_" name="arms" value="_f_" checked="checked"><label>S Arms</label>
<input type="radio" id="arms_fa_" name="arms" value="_f_"><label>A Arms</label>
</div>
<div class="product">
<h6>Base and Frame</h6>
<input type="radio" id="b_f[bG1_fG1]" name="b_f" value="bG1_fG1" checked="checked">
<input type="radio" id="b_f[b65_f6KA]" name="b_f" value="b65_f6KA">
<input type="radio" id="b_f[b6K8_fG1]" name="b_f" value="b6K8_fG1">
<input type="radio" id="b_f[b6K8_f6KA]" name="b_f" value="b6K8_f6KA">
<input type="radio" id="b_f[b6KA_fG1]" name="b_f" value="b6K8_fG1">
<input type="radio" id="b_f[b65_fG1]" name="b_f" value="b65_f6KA">
</div>
Second set
<div>
<input type="radio" id="seat_depth_" name="seat_depth" value="_" checked="checked"><label>Fixed </label>
<input type="radio" id="seat_depth_flex_" name="seat_depth" value="_flex_"><label>Flex</label>
</div>
<div>
<label><input type="radio" class='imagepick' id="seat_98" name="seat" value="98" checked="checked"><img src="98.JPG"> </label>
<label><input type="radio" class='imagepick' id="seat_ZK" name="seat" value="ZK"><img src="ZK.JPG"> </label>
<label><input type="radio" class='imagepick' id="seat_ZS" name="seat" value="ZS"><img src="Zs.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_BRN" name="seat" value="BRN"><img src="BRN.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_DTR" name="seat" value="DTR"><img src="DTR.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_97" name="seat" value="97"><img src="97.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_SG" name="seat" value="SG"><img src="sg.jpg"> </label>
<label><input type="radio" class='imagepick' id="seat_G1" name="seat" value="G1"><img src="g1.jpg"> </label>
</div>
Independant onclick input
<div>
<label><input type="radio" class='imagepick' id="back_98" name="back" value="98" checked="checked" onclick='document.getElementById("back").src="small/back_98.png"'></label>
<label><input type="radio" class='imagepick' id="back_ZK" name="back" value="ZK" onclick='document.getElementById("back").src="small/back_ZK.png"'></label>
<label><input type="radio" class='imagepick' id="back_ZS" name="back" value="ZS" onclick='document.getElementById("back").src="small/back_ZS.png"'></label>
<label><input type="radio" class='imagepick' id="back_BRN" name="back" value="BRN" onclick='document.getElementById("back").src="small/back_BRN.png"'></label>
<label><input type="radio" class='imagepick' id="back_DTR" name="back" value="DTR" onclick='document.getElementById("back").src="small/back_DTR.png"'></label>
<label><input type="radio" class='imagepick' id="back_97" name="back" value="97" onclick='document.getElementById("back").src="small/back_97.png"'></label>
<label><input type="radio" class='imagepick' id="back_SG" name="back" value="SG" onclick='document.getElementById("back").src="small/back_SG.png"'></label>
<label><input type="radio" class='imagepick' id="back_G1" name="back" value="G1" onclick='document.getElementById("back").src="small/back_G1.png"'></label>
</div>
as long as the interactivity is limited to a single set (+ independant onclick inputs):
$("input[type=radio]").on("change", function() {
var seat_image = $("input[name=seat_depth]:checked").val() + $("input[name=seat]:checked").val();
$("#seat").attr("src", "small/seat" + seat_image + ".png");
})
the javascript fires properly
however, adding radio inputs will fire the above javascript nonetheless and actually serve up a blank.
Wanting to add
$("input[type=radio]").on("change", function() {
var frame_image = $("input[name=arms]:checked").val() + $("input[name=b_f]:checked").val();
$("#bf").attr("src", "small/" + frame_image + ".png");
})
fails as well.
How can the javascript be refactored to fire only with a given input name (as in the first case one of the two name - seat or seat_depth), is clicked, and thus coexist with other firing mechanisms, while allowing independant onclick events to fire?

3 checkboxes different names and only select one

I have three different named checkboxes like this
<label><input type="radio" name="selling" value="1" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" />Dovanoju</label>
How can I make that person could choose only one out of three ? It's important that the names of the radio's should be different
You should be declaring it as follows:
<label><input type="radio" name="type" value="selling" />Parduodu</label><br>
<label><input type="radio" name="type" value="trade" />Keičiu</label><br>
<label><input type="radio" name="type" value="gift" />Dovanoju</label>
Then examine $_POST['type'] for the value.
Based on this answer by D.A.V.O.O.D, you can use jQuery for this. Just add a class (for example "abc") to your checkboxes like:
<label><input type="radio" name="selling" value="1" class="abc" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" class="abc" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" class="abc" />Dovanoju</label>
and use the following jQuery:
$(".abc").each(function()
{
$(this).change(function()
{
$(".abc").prop('checked',false);
$(this).prop('checked',true);
});
});

Validating groups of check-boxes in jQuery

I'm generating check-boxes based on suggestions in a table which has 30 rows per page. A row can have 0 suggestions or it could potentially have a 100. I want to use jQuery to only allow a user to select one check-box. If they select one and then change their mind the original check-box is unchecked and the new one become checked.
What you're looking for are radio inputs.
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
Make sure that one group of radio inputs has the same name!
Giving them different names means you will be able to select multiple radio inputs:
<label><input type="radio" name="testRadio1" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio2" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio3" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio4" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio5" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio6" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio7" value="Test"/>Test</label>
Which is undesirable.
If you really want checkboxes, use the following CSS:
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
I agree with the suggestion above, but in case you don't feel like doing so you can achieve the same with the following code;
<script>
$("input[type=checkbox]").click(function() {
$( "input[type=checkbox]" ).prop( "checked", false );
$(this).prop("checked", true);
});
</script>
Working JSFiddle http://jsfiddle.net/9kxoc2g6/1/

JQueryUI radio buttonset not selecting mulitiple sections

n my html page I have got two sections, each independent of the other. When I am selecting Check1 and then check2 the choice2 gets unselected and only choice 4 gets selected. I want both choice 2 and choice 4 to be selected.
HTML
<div id="radio-gp1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radio" /><label for="radio4">Choice 4</label>
</div>
<button id="check1">Check1</button>
<button id="check2">Check2</button>
JS
$(function() {
$( "#radio-gp1" ).buttonset();
$( "#radio-gp2" ).buttonset();
$('#check1').click(function() {
$('#radio-gp1 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp1" ).buttonset('refresh');
});
});
$('#check2').click(function() {
$('#radio-gp2 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp2" ).buttonset('refresh');
});
});
});
Not sure where I am going wrong, here's my fiddle http://jsfiddle.net/surysharma/waodj7n5/
You can't select multiple of radios that have the same name attribute. You'll want to name your groups separately.
JSFiddle
<div id="radio-gp1">
<input type="radio" id="radio1" name="radiogp1" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radiogp1"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radiogp2" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radiogp2" /><label for="radio4">Choice 4</label>
</div>

Not getting default checked on radio button

I have 10 radio buttons with unique name and these radio buttons are divided into two div. I mean each div have 5 radio buttons and i want to show only one div at a time with first radio button checked. what i want is visible div should have first radio button checked by default. but please note all radio buttons have unique name on a same page.
Below is my code for reference.
<style>
#secondopt, #firstopt { display: none;}
</style>
<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}
</script>
<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>
How to achive this?
As you have divided radio buttons in two div, you should also use group property/name of radio
buttons. Here give two different groups names and then use selected/checked property using radio button id.
do this
<form name=frmone>
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
</form>
<script>
var len = document.frmOne.payment.length;
for (i = 0; i < len; i++) {
document.frmOne.payment[i].checked ;
break;
}
</script>

Categories