I am getting errors. The script is not working. Help
thanks in advance.
I want to check if all my set of radio buttons are checked when button next is click.
other ways of doing this also are welcome
<div class="qheader">
9) What's the world's most widely spoken language?</div>
<div class="qselections">
<input type="radio" value="a" name="question9">a) English<br>
<input type="radio" value="b" name="question9">b) Spanish<br>
<input type="radio" value="c" name="question9">c) Mandarin<br>
<input type="radio" value="d" name="question9">d) French<br>
</div><br>
<div class="qheader">
10) Which continent is host to the most countries in the world?</div>
<div class="qselections">
<input type="radio" value="a" name="question10">a) Asia<br>
<input type="radio" value="b" name="question10">b) Africa<br>
<input type="radio" value="c" name="question10">c) Europe<br>
</div>
</div>
<input type="button" value="Next" name="B3" onclick="showdesc()">
<script>
$(function() {
$(document).on('click', 'form', function () {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.qselections').each(function () {
// Question text
var question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
});
});
</script>
function clicked() {
var validate = true;
var unanswered = new Array();
// Loop through available sets
$('.qselections').each(function () {
// Question text
var question = $(this).prev().text();
// Validate
if (!$(this).find('input').is(':checked')) {
// Didn't validate ... dispaly alert or do something
unanswered.push(question);
validate = false;
}
});
if (unanswered.length > 0) {
msg = "Please answer the following questions:\n" + unanswered.join('\n');
alert(msg);
}
return validate;
}
JSFiddle
I reproduced your problem with slight modifications, works well for me. I guess it's just a syntax error in the portion of your code, not present in the fiddle. Cross check and let me know.
Try and modify your click call, make it direct like in the fiddle.
//try this script
if(!$(this).find("input[name=radio]").is(':checked')){
alert("hi");
}
Related
I'm fairly new to JavaScript and I have been Googling all day for this but I only found how to enable and disable one textbox using one checkbox. I tweaked the code a bit to work with what I want and here is what I got. I'm thinking of instructing JS function to follow only the id of the checkbox, but I can't seem to figure out how to do it.
Here is my code:
JavaScript
<script>
function enableText(checked){
if(!checked){
document.getElementById('sel1').disabled = true;
document.getElementById('txt1').disabled = false;
}
else{
document.getElementById('sel1').disabled = false;
document.getElementById('txt1').disabled = true;
}
}
function enableText(checked){
if(!checked){
document.getElementById('sel2').disabled = true;
document.getElementById('txt2').disabled = false;
}
else{
document.getElementById('sel2').disabled = false;
document.getElementById('txt2').disabled = true;
}
}
</script>
HTML
<form name=sr2 method=post>
<select name="pt" id="sel1">
<option>test</option>
</select>
<input type="checkbox" name="cb1" checked="checked" onclick="enableText(this.checked)">
Others
<input type="text" name="pt" id="txt1" disabled="disabled">
<select name="dept" id="sel2">
<option>test</option>
</select>
<input type="checkbox" name="cb2" onclick="enableText(this.checked)" checked="checked">
Others
<input type="text" name="dept" id="txt2" disabled="disabled">
</form>
My question is how can I set the function in js to instruct cb1 to only enable txt1 and disable sel1 and cb2 to only enable txt2 and disable sel2? My code works but, for some reason, it enables txt1 and txt2 and disables sel1 and sel2 at the same time.
Any help is greatly appreciated.
You have created two functions with the same name: enableText. Simplifying your code:
function enableText(checked, index){
var sel = true, txt = false;
if(checked) {
sel = false;
txt = true;
}
document.getElementById('sel' + index).disabled = sel;
document.getElementById('txt' + index).disabled = txt;
}
And in your HTML:
onclick="enableText(this.checked, 1)"
And change the 2nd parameter for the next items.
A second version of your function with ternaries, but with the same purpose:
function enableText(checked, index) {
document.getElementById('sel' + index).disabled = (checked ? false : true);
document.getElementById('txt' + index).disabled = (checked ? true : false);
}
How can I prevent that a checkbox gets checked (without the use of disable)?
I tried
function nocheck() {
if(somevar.value>3){
alert("Not allowed");
document.getElementById('mybox').checked = false;
}
};
with
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck();" />
But this way the checkbox still gets checked after the alert message pops up.
EDIT:
Thanks to the comments/answers, I was able to come closer to a solution but not yet solved the problem - what's wrong with this code? http://jsfiddle.net/9kS8E/1/
HTML
<div class="ez-checkbox">
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck();" class="ez-hide">
</div>
JS
var user = { premium : false };
function nocheck() {
if(!user.premium){
return false;
} else {
return true;
};
};
i think i not understand your question but i think you are searching this,
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="return false;" />
OR
html
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck()" />
js
function nocheck() {
if(somevar.value>3){
alert("Not allowed");
return false;
}else
return true;
};
(1) save value of check box in a variable [ while "click" value of checkbox will get changed ]
(2) check user type,
if not a premium user, toggle value of check box.
else no need to change value of checkbox
(*) by using toggle : checkbox is already checked or not, we are not allowing a normal user to check it.
Fiddle : http://jsfiddle.net/aslancods/rQG3r/
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="noCheck(event)" />
var user = { premium : true };
function nocheck(elem) {
var newValue = elem.checked;
if(!user.premium) {
alert("not allowed");
elem.checked = !newValue;// toggle value
} else {
alert(" allowed ");
}
};
Your code should also work.
It's getting unchecked after alert.
You can say alert after unchecking like this.
if(somevar.value>3){
document.getElementById('mybox').checked = false;
alert("Not allowed");
}
I'm creating a website where the input of a form is being read by JavaScript, but when I execute the alert it says that the value of the input is undefined. Why is that?
Here is my form:
<form action="" method="post" id="reportform">
<input type="radio" name="report" value="customer"><p>Customers</p>
<input type="radio" name="report" value="item"><p>Items Sold</p>
<input type="radio" name="report" value="department"><p>Sales Departments</p>
<input type="radio" name="report" value="person"><p>Sales People</p>
<input type="button" name="reportsubmit" value="Submit" onClick="readText(this.form)">
</form>
Here is my JavaScript:
<script>
function readText (form) {
var radio = form.report.value;
alert("You entered: " + radio);
}
</script>
You could read the value from the checked checkbox like this:
function readText(form) {
var checked = form.querySelector('input:checked');
var value = checked ? checked.value : null;
// do something with `value`
}
element.querySelector() works in IE8+.
:checked is a CSS3 thing, I think, so maybe IE9+.
http://jsfiddle.net/rudiedirkx/mzCV8/1/
You have to check the checked property to test which one of your radio button is checked:
function readText (form) {
var radios = form.report;
for(var i = 0; i < radios.length; i++){
if(radios[i].checked){
rate_value = radios[i].value;
alert("You entered: " + rate_value)
}
}
}
Or if you use jQuery you could simply use:
$('#reportform input[name="report"]:checked').val();
your code works fine for me :
http://jsfiddle.net/mzCV8/
ensure that the js code is in front of your form
function readText (form) {
var radio = form.report.value;
alert("You entered: " + radio);
}
This question already has answers here:
Enable/Disable submit button if checkbox is checked/unchecked?
(3 answers)
Closed 8 years ago.
Please i need a script that can work with the HTML code bellow to disable/enable the button when a checkbox is checked or unchecked,
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
please pals i don't mean the button to be disabled when checked, but rather the other way round.
You can use onchangeevent of the checkbox to enable/disable button based on checked value
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" onchange="document.getElementById('sendNewSms').disabled = !this.checked;" />
You will have to use javascript, or the JQuery framework to do that. her is an example using Jquery
$('#toggle').click(function () {
//check if checkbox is checked
if ($(this).is(':checked')) {
$('#sendNewSms').removeAttr('disabled'); //enable input
} else {
$('#sendNewSms').attr('disabled', true); //disable input
}
});
DEMO: http://jsfiddle.net/T6hvz/
HTML
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
JS
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function() {
sendbtn.disabled = !!this.checked;
};
DEMO
brbcoding have been able to help me with the appropriate coding i needed, here is it
HTML
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Javascript
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
Here is a clean way to disable and enable submit button:
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />
<input type="checkbox" id="disableBtn" />
var submit = document.getElementById('sendNewSms'),
checkbox = document.getElementById('disableBtn'),
disableSubmit = function(e) {
submit.disabled = this.checked
};
checkbox.addEventListener('change', disableSubmit);
Here is a fiddle of it in action: http://jsfiddle.net/sYNj7/
I recommend using jQuery as it will do all the heavy lifting for you. The code is fairly trivial.
$('input:checkbox').click(function () {
if ($(this).is(':checked')) {
$('#sendNewSms').click(function () {
return false;
});
} else {
$('#sendNewSms').unbind('click');
}
});
The trick is to override the 'click' event and effectively disable it. You can also follow it up with some CSS magic to make it look "disabled". Here is the code in JavaScript in case you need it. It's not perfect but it gets the point across.
var clickEvent = function () {
return false;
};
document.getElementById('#checkbox').onclick(function () {
if (document.getElementById('#checkbox').checked) {
document
.getElementById('#sendNewSms')
.onclick(clickEvent);
} else {
document
.getElementById('#sendNewSms')
.removeEventListener('click', clickEvent, false);
}
});
this is my code in html:
<input type="radio" name="sex" id="boy" value="male" /> Boy<p></p><br>
<input type="radio" name="sex" id="girl" value="female" />Girl
<button id="fine" type="button">Submit</button>
and this is in my javascript file:
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
function prima(){
var fine = document.getElementById('fine');
fine.onclick=chek;
}
function chek(){
if((maskio.checked == false) && (femmna.checked == false)) {
alert('lol');
return false;
}
}
window.onload=prima;
Where is the problem? When i run it and click Submit nothing happens. Why?
Change your JS as follows. The elements were not created by the time you were getting them.
function prima() {
var fine = document.getElementById('fine');
fine.onclick = chek;
}
function chek() {
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
if ((maskio.checked == false) && (femmna.checked == false)) {
alert('lol');
return false;
}
}
window.onload=prima;
Check here: jsFiddle
The issue is your html tags, there is a space "< " remove the space and it will work fine...
<input type="radio" name="sex" id="boy" value="male" /> Boy
<p></p><br>
<input type="radio" name="sex" id="girl" value="female" /> Girl
<button id="fine" type="button">Submit</button>
<script>
var maskio = document.getElementById('boy');
var femmna = document.getElementById('girl');
function prima()
{
var fine = document.getElementById('fine');
fine.onclick=chek;
}
function chek()
{
if(maskio.checked)
{
alert("You are male Eh?");
}
else if(femmna.checked)
{
alert("Femal ;)");
}
else if(!maskio.checked && !femmna.checked)
{
alert("Come on Please check something!");
}
}
window.onload=prima;
</script>
when radio-buttons have the same name, they belong to the group of the name. That means, only one radio-button in a group can be selected. If you check both, there won't be a result, anyway !