We Keep Coding

Change the text of the radio button dynamically

I have a scenario of having a series of radio buttons with a name of the payment method. I need to change that text on load of the page. For Example.
<label class="radio-inline">
<div class="iradio_square-blue">
<input type="radio" name="paymentmethod" value="Paypal">
<ins></ins>
</div>
Paypal India
</label>
In the above code sample I need to change the "Paypal India" to "Paypal Global" via javascript We do not have id to the radio button only way to target is via value of the radio button which in the case above is paypal.
Can anyone help me out here.
Thanks in advance.

You will need to look at the childNodes
const label = document.querySelector("[name=paymentmethod][value=Paypal]")
.closest("label");
[...label.childNodes].forEach(node => {
let text = node.textContent;
if (text && text.includes("India")) {
node.textContent = text.replace("India", "Global");
}
});
<label class="radio-inline">
<div class="iradio_square-blue">
<input type="radio" name="paymentmethod" value="Paypal">
<ins></ins>
</div>
Paypal India
</label>

Here for your reference. I think it will be helpful.
document.addEventListener("DOMContentLoaded", function(event) {
const labels = document.getElementsByClassName('radio-inline');
if (labels.length) {
let label = labels[0];
label.innerHTML = label.innerHTML.replace(/Paypal India/, 'Paypal Global');
}
});

Show/hide on checkbox click does not work consistently

I am building an inspection app to walk an inspector through a house with context-relevant questions based on answers. I am having inconsistent success with using checkboxes to show/hide div content.
I have simplified my problem down to a few very basic lines of code that I can't seem to troubleshoot.
<input type="checkbox" name="cbReplaceOrRepair_0" value="Replace" id="cbReplaceOrRepair_0" onclick="showReplaceRoof()">Replace
<div class="dvRoofReplace" id="dvReplaceRoof" style="display:none">"Replace" option is checked</div><br>
<input type="checkbox" name="cbReplaceOrRepair_1" value="Repair" id="cbReplaceOrRepair_1" onclick="showDvConfirmRepairability()">Repair
<div class="dvRoofRepair" id="dvConfirmRepairability" style="display:none">"Repair" option is checked</div>
<script type="text/javascript">
function showReplaceRoof() {
var dvReplaceRoof = document.getElementById("dvReplaceRoof");
dvReplaceRoof.style.display = cbReplaceOrRepair_0.checked ? "block" : "none";
}
function showDvConfirmRepairability() {
var dvRoofRepair = document.getElementById("dvRoofRepair");
dvRoofRepair.style.display = cbReplaceOrRepair_1.checked ? "block" : "none";
}
</script>
My example shows one checkbox that works to show/hide a div and another on that does not work. Can anyone tell me what I'm doing wrong?
Also, this is my first question on here after literally years of looking up questions so I'll apologize in advance in case I messed up any of the posting protocols.
https://codepen.io/stephenskrocki/pen/EGoYaB

You access the element incorrectly.
The id of the second hidden element is id="dvConfirmRepairability.
Use var dvRoofRepair = document.getElementById("dvConfirmRepairability");
Hope this helps!!

Since there is only one wanted option, instead of checkbox I would use radio buttons:
HTML Markup:
<style>label > span {display: none;} /* hide notes by default */</style>
<label for="replace">Replace
<input type="radio" name="radio" id="replace" onchange="radio()" />
<span class="note">"Replace" option is checked</span>
</label>
<label for="repair">Repair
<input type="radio" name="radio" id="repair" onchange="radio()" />
<span class="note">"Repair" option is checked</span>
</label>
javaScript:
<script>
function radio() {
var myRadio = document.querySelectorAll('input[name="radio"]'); // get radio
var myNotes = document.querySelectorAll('.note'); // get notes
if (myRadio[0].checked === true) { // if the first radio checked
myNotes[0].style.display = 'inline-block'; // show first note
myNotes[1].style.display = 'none'; // hide the second
}
else { // if not do the apposite
myNotes[0].style.display = 'none';
myNotes[1].style.display = 'inline-block';
}
}
</script>
Hope it help you!

How to hide radio button until something happens?

So I want to hide a radio button until my form is filled out but I don't know how. I tried .hide(); and that worked when I put it outside of my .submit function but doesn't work inside of it. This is using jquery and bootstrap.
Here is a small version of the JS I have ('agree' is the radio button):
$('myForm').submit(function(e){
var firstName = $('first-name').val();
var pattern = /^$/;
var error = '';
var checkbox = document.getElementById('agree');
if(pattern.test(firstName)){
error += 'Error: enter first name.\n';
}
if(error.length != 0){
alert(error);
e.preventDefault();
}
});
I want to hide the radio button until the first name part of the form is filled out then the radio button will appear.

Put an id in your radio like this :
<input type="radio" id="rad" />
Then hide it like this using jquery :
$('#rad').hide();
Then an example of how you can make it show when something happens would go a bit like this :
If ($('#something') > 10) {
$('#rad').show();
}
Hope this helped :)

I would use plain JavaScript for this:
<input type="text" name="first-name" value="" onchange="document.getElementById('agree').style.display = (this.value == '' ? 'block' : 'none' );"/>
<input type="checkbox" name="agree" value="Agree" style="display:none"/>
Edit:
Other ways to do this is to use onkeydown, onkeyup or onblur instead of onchange

Here is a simple example using jquery... http://jsfiddle.net/wa8rxj43/2/
HTML
<input type="text" id="name" class="name">
<input class="not-display" id="somecheck" type="checkbox" name="vehicle" value="Car" checked>
JavaScript
$('#somecheck').hide();
$("#name").bind({
'input':function(){
if(this.value.length > 0)
{
$('#somecheck').show();
}
else
{
$('#somecheck').hide();
}
}
});
Edit: Removed CSS per OP's request.

How to set radio button status with JavaScript

What method would be best to use to selectively set a single or multiple radio button(s) to a desired setting with JavaScript?

Very simple
radiobtn = document.getElementById("theid");
radiobtn.checked = true;

the form
<form name="teenageMutant">
<input value="aa" type="radio" name="ninjaTurtles"/>
<input value="bb" type="radio" name="ninjaTurtles"/>
<input value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" will be checked by default, if you remove the "checked" non of the boxes will be checked when the form is first loaded.
document.teenageMutant.ninjaTurtles[0].checked=true;
now value="aa" is checked. The other radio check boxes are unchecked.
see it in action: http://jsfiddle.net/yaArr/
You may do the same using the form id and the radio button id. Here is a form with id's.
<form id="lizardPeople" name="teenageMutant">
<input id="dinosaurs" value="aa" type="radio" name="ninjaTurtles"/>
<input id="elephant" value="bb" type="radio" name="ninjaTurtles"/>
<input id="dodoBird" value="cc" type="radio" name="ninjaTurtles" checked/>
</form>
value="cc" is checked by default.
document.forms["lizardPeople"]["dinosaurs"].checked=true;
now value="aa" with id="dinosaurs" is checked, just like before.
See it in action: http://jsfiddle.net/jPfXS/

Vanilla Javascript:
yourRadioButton.checked = true;
jQuery:
$('input[name=foo]').prop('checked', true);
or
$("input:checkbox").val() == "true"

You can also explicitly set value of radio button:
<form name="gendersForm">
<input type="radio" name="gender" value="M" /> Man
<input type="radio" name="gender" value="F" /> Woman
</form>
with the following script:
document.gendersForm.gender.value="F";
and corresponding radio button will be checked automatically.
Look at the example on JSFiddle.

/**
* setCheckedValueOfRadioButtonGroup
* #param {html input type=radio} vRadioObj
* #param {the radiobutton with this value will be checked} vValue
*/
function setCheckedValueOfRadioButtonGroup(vRadioObj, vValue) {
var radios = document.getElementsByName(vRadioObj.name);
for (var j = 0; j < radios.length; j++) {
if (radios[j].value == vValue) {
radios[j].checked = true;
break;
}
}
}

Try
myRadio.checked=true
<input type="radio" id="myRadio">My radio<br>

$("#id_of_radiobutton").prop("checked", true);

I am configuring a radio button within a document fragment and tried using radiobtn.checked = true;.
That didn't work so I instead went with this solution:
radiobtn.setAttribute("checked", "checked");

This sets checked using name to cycle through the elements and a value check to set the desired element to true. I kept it as simple as possible, its pretty easy to put it into a function or a loop, etc.
variable 'nameValue' is the radio elements name value
variable 'value' when matched sets the radio button
Array.from( document.querySelectorAll('[name="' + nameValue + '"]') ).forEach((element,index) =>
{
if (value === element.value) {
element.checked = true;
} else {
element.checked = false;
}
});

Radio button required - JavaScript validation

I know nothing of JavaScript.
I had to add a group of two radio buttons to an HTML form with values "yes" and "no".
Now I need to make them "required"
There are several other required fields in the form and this piece of JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!--
reqd_fields = new Array();
reqd_fields[0] = "name";
reqd_fields[1] = "title";
reqd_fields[2] = "company";
reqd_fields[3] = "address";
reqd_fields[4] = "city";
reqd_fields[5] = "state";
reqd_fields[6] = "zip";
reqd_fields[7] = "phone";
reqd_fields[8] = "email";
reqd_fields[9] = "employee";
function validate(form_obj) {
if (test_required && !test_required(form_obj)) {
return false;
}
It was done by someone else, not me.
What I did is just added my field to this array, like this:
reqd_fields[10] = "acknowledge";
However it doesn't seem to be working.
Please guide me as I am totally ignorant when it comes to JavaScript.

Why don't you just make one selected by default then one will always be selected.

A link to your page or a sample of your HTML would make this easier, but I'm going to hazard a guess and say that the values in the array match the "name" attribute of your radio button elements.
If this the case, "acknowledge" should be the name of both radio buttons, and to make things easier, one should have the attribute "checked" set to "true" so there is a default, so you'll get a value either way.
So, something like this:
<input type="radio" name="acknowledge" value="yes" /> Yes <br/>
<input type="radio" name="acknowledge" value="no" checked="true" /> No <br/>

I know question is ancient but this is a simple solution that works.
<script type="text/javascript">
function checkForm(formname)
{
if(formname.radiobuttonname.value == '') {
alert("Error: Please select a radio button!");
return false;
}
document.getElementById('submit').value='Please wait..';void(0);
return true;
}
</script>
<form name="formname" onsubmit="return checkForm(this)"
<input type="radio" value="radio1" name="radiobuttonname" style="display:inline;"> Radio 1<br>
<input type="radio" value="radio2" name="radiobuttonname" style="display:inline;"> Radio 2<br>
<input type="submit" value="Submit">
</form>

Without seeing your HTML and more context of your validate function it's unclear exactly what you're looking for, but here's an example of how to require a selected value from a radio group:
<form name="form1">
<input type="radio" name="foo"> Foo1<br/>
<input type="radio" name="foo"> Foo2<br/>
</form>
<script type="text/javascript">
var oneFooIsSelected = function() {
var radios = document.form1.foo, i;
for (i=0; i<radios.length; i++) {
if (radios[i].checked) {
return true;
}
return false;
};
</script>
Here is a working example on jsFiddle.

I always recommend using jQuery validate seems better to me than trying to re-invent the wheel