Get input text from corresponding radio button - javascript

I have two radio buttons with an input text for each radio button, where a person selects a radio button and enters text.
The question is: How do I get the typed text for the selected radio button?

<div class="form-group">
<label for="textNome" class="control-label">Type text</label>
</div>
<div class="radio">
<label><input type="radio" name="mode" value="one" checked /> Selection
1</label>
<input id="end" class="form-control" type="text">
</div>
<div class="radio">
<label><input type="radio" name="mode" value="two"checked /> Selection
2</label>
<input id="end" class="form-control" type="text">
</div>

You could try this using jQuery:
console.log($("input[type='radio']:checked").next());
Bear in mind that since these are radio buttons, you shouldn't label both as checked.

Related

One div's checkbox input affecting another div's checkbox input

I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?
I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>

Correct way to use HTML radiobutton?

I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>
Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.
All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.
Here's the documentation for <input type='radio'> which includes:
The "name" setting is an important attribute of radio buttons, as it
identifies which group a radio button belongs to. Because groups of
radio buttons act as a unit, you must specify a common name for all
related radio buttons. When two or more radio buttons share a name,
selecting one of the buttons will unselect all of the others with the
same name. If you have more than one group of radio buttons on a
single page, the buttons in different groups must have different
"name" attributes.
Radio buttons are grouped together using the name attribute. give them the same name.
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label class="radio-label">Option 3</label>
</div>

Default checked button

Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=tru‌​e;
Thank you Pandiyan Cool

three radio buttons with sub radio buttons need to hide or show the div using jquery

I am working on jQuery hide or show function. I have three radio buttons and two sub radio button will be available initially if user select the first radio button and user select children first / second radio button one div will be shown in the second scneario if user select second radio button / third radio button from the parent and sub radio button second div should come. I am not getting how to do the if condition
Here is the fiddle link
Here is my HTML code
<input type="radio" value="one" checked name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" />one A
<input type="radio" value="twoa" name="numbers" />two A
<br/>
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
Here is my current jquery code
$(".second,.third").hide();
$('input[type="radio"]').change(function () {
if ($(this).val() === 'onea' || 'twoa') {
$(".first").show();
}
});
for the first radio button was working perfectly as expected but not for second third radio button
this is what i want
for example there are two scenarios 1) by default the one radio button was and one A radio button was checked the first div will show 2) if the user select two radio button / three radio button and sub one A / two A second div will show I am not getting the second scenarios
Thanks in advance
Try this..jsfiddle
<input type="radio" value="one" name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" id="first" />one A
<input type="radio" value="twoa" name="numbers" id="second"/>two A
<br/>
<div class="first divcont">First</div>
<div class="second divcont">second</div>
<div class="third divcont">third</div>
$(".second,.third").hide();
$('input[type="radio"]').on("change",function () {
var FVal = $('input[name="number"]:checked').val();
console.log(FVal);
if(FVal!='one'){
$(".divcont").hide();
$(".second").show();
}else{
$(".divcont").hide();
$(".first").show();
}
});

Radio button malfunctioning when used inside label tag

i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.
Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>

Categories