We Keep Coding

I need some help on validating the below code in javascript

I would like to validate the below code in js so that the user has to check one but i do not know how to. The form name is 'registration'
<li>
<input type="checkbox" name="en" value="en" />
<span>English</span>
</li>
<li>
<input type="checkbox" name="nonen" value="noen" />
<span>Non English</span>
</li>

Use an input of type radio instead.
Here is a link to the MDN documentation, basically all inputs of type radio that have the same name property are grouped together and the user can select only one of them.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

You could try this one
<input type="radio" name="raden" id="english" checked>
<label for="english">English</label>
<input type="radio" name="radnon" id="nonenglish">
<label for="nonenglish">Non-English</label>

<li><input type="checkbox" name="en" value="en" /><span>English</span></li>
<li><input type="checkbox" name="en" value="en" /><span>Non English</span></li>
In check box name must be same if all check boxes are selected. Try thid code.

<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>

How do I retrieve survey radio buttons input to the next HTML page? Using local storage and pure javascript

I'm trying to create a response page with information of the user from the survey form. However, I can't retrieve the input for radio buttons. It shows 'on'. Any help?
<!--Survey form-->
<label for="gender" class="question">Gender:</label>
<ol>
<li>
<input type="radio" id="female" name="gender" checked/>
<label class="gender" for="female">Female</label>
</li>
<li>
<input type="radio" id="male" name="gender" />
<label class="gender" for="male">Male</label>
</li>
</ol>
<input type="button" value="Submit Me" name="doIt" />
<!--JS-->
function (doIt){
var checkedValue = null;
var inputElements = document.getElementsByName('gender');
for (var i=0; inputElements[i]; i++){
if (inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
}
localStorage.setItem("userGender", checkedValue);
window.location = "response.htm";
}
document.getElementsByName("doIt")[0].onclick = doIt;
<!--Response page-->
<script>
document.write("Gender:"+localStorage.getItem("userGender"))
</script>

You need to set the value attribute for your radio buttons, e.g.
<ol>
<li>
<input type="radio" **value="female"** id="female" name="gender" checked/>
<label class="gender" for="female">Female</label>
</li>
<li>
<input type="radio" id="male" **value="male"** name="gender" />
<label class="gender" for="male">Male</label>
</li>
</ol>
The value specifies the return value when a radio button or checkbox is checked/selected.

Adding validations to see if radio button is not selected, all the questions is compulsory

I have the following code in which there are 5 questions. I want that all 5 questions should be answered, in case any questions is not filled, user gets validation.
question 1
<ul class="option">
<li> <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree</li>
<li> <input type="radio" name="question1" id="d1" value="2">Disagree</li>
<input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Dis<li>agree</li>
<li> <input type="radio" name="question1" id="a1" value="4">Agree</li>
<li> <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li></ul>
<br/><br/>
question 2
<ul class="option">
<li> <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree</li>
<li> <input type="radio" name="question2" id="d2" value="2">Disagree</li>
<li> <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree</li>
<li> <input type="radio" name="question2" id="a2" value="4">Agree</li?
<li> <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
</li></ul>
<br/><br/>
javascript code is
// Delegate submit action
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.option').each(function () {
// Question text
var question = $(this).prev();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question.text());
question.css('color', 'red'); // Highlight unanswered question
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});
I'm getting alert as a blank, only one line is written please answer following questions but no questions number inside

Just put your questions in a tag ( I have put it in span tag ) with an unique id and it should work with your code.
$(document).on('submit', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.option').each(function () {
// Question text
var question = $(this).prev();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
//alert(JSON.stringify($(this).siblings()));
unanswered.push(question.text());
question.css('color', 'red'); // Highlight unanswered question
validate = false;
}
});
if (unanswered.length > 0) {
//alert(unanswered);
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});
<body>
<form id='form' action='#' method='post'>
<span id='q1'>question 1</span>
<ul class="option">
<li> <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree</li>
<li> <input type="radio" name="question1" id="d1" value="2">Disagree</li>
<input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Dis<li>agree</li>
<li> <input type="radio" name="question1" id="a1" value="4">Agree</li>
<li> <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li></ul>
<br/><br/>
<span id='q2'>question 2</span>
<ul class="option">
<li> <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree</li>
<li> <input type="radio" name="question2" id="d2" value="2">Disagree</li>
<li> <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree</li>
<li> <input type="radio" name="question2" id="a2" value="4">Agree</li>
<li> <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
</li></ul>
<input type='submit' value='submit'>
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</body>

need to enable submit button on select of radio button

i have a small form. I want enable submit button when all the all the radio button is selected.
below is my code html
<form action="#" id="form1" method="post">
<ul>
<li>
<h3>Here’s what I want:<strong class="result1"></strong></h3>
<div>
<span><input type="radio" value="Cash Back rewards" name="want" id="01" /><label for="01">Cash Back rewards</label></span>
<span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
<span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
<span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
</div>
</li>
<li>
<h3>Here’s my credit story: <strong class="result2"></strong></h3>
<div>
<span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
<span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
<span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
</div>
</li>
<li>
<h3>Here’s what I carry:</h3>
<span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
<span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>
</li>
</ul>
<input type="submit" value="" name="" class="find" />
</form>
i am weak in javascript please advise me.
one more thing if li is not fix it will generate dynamically, so what i will have to do. basically every li is one quetion and radio button is option. so the question will be generate dynamically it can be any no. its not fix

Something like this would do the trick:
$('#form1 :radio').click(function() {
var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
$('#form1 .find').prop('disabled', disabled);
});
This assumes your submit button is disabled as the page loads, since the disabled state only changes when an option is checked. You could of course do the same check during DOMReady (in which case I'd extract the listener function), but I'd prefer setting the markup manually during load.
Demo
The disabled variable is set by selecting all li elements in the form, reducing it to only the ones that meet the filter criteria "containing no checked radiobuttons", and checking whether there are any elements in the reduced collection.
If you're using a jQuery version less than 1.6, use .attr instead of .prop to set the disabled state.

Disable radio button according to selected choice

I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?

There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson

Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.

You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.