Select All? What am I doing wrong? - javascript

I'm trying to get this Select All code to work but I don't know what I'm doing wrong. I found the code here
http://jsfiddle.net/L6e72fpv/
I'm not sure if it's a compatibility issue or if I'm putting the code together wrong. It works fine on the jsfiddle but not on an full page.
Here is the way I have it in a page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
</body>
</html>
</body>
</html>

Looks like your'e not including the jQuery Library. Without loading it, jQuery won't work. You also closed your body and html tag twice.
Try this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</body>
</html>
What I've done is include jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
and added your script after loading it. It works fine now!

Related

reorder radio buttons

i have a survey that has two radio buttons and when clicked will submit and send to a thank you page and then redirect back to the survey, my question is how do i get the radio buttons to randomize in location but i cant seem to get it to work, is there an issue with my jquery
<!DOCTYPE html>
<html>
<head>
<title>survey</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="test7.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<script>
var cc-selector = $("#cc-selector");
cc-selector.html(
cc-selector.find("label").sort(function(){
return Math.round(Math.random())-0.5;
})
);
</script>
<body>
<div id="wrapper">
<header>
<img src="Win.png" alt="Logo" class="Logo">
<img src="Screw.jpg" alt="screwLogo" class="screwLogo">
<h1 class="Survey_Title">Heath and Wellbeing</h1><br>
<h2 class="Survey_Question">Did you find the most recent Wellbeing campaign useful?</h2><br>
<form action="" method="post">
<div class="cc-selector">
<label>
<input id="happy" type="radio" name="radAnswer" value="happy" onclick="window.location='test6.html';" />
<label class="drinkcard-cc happy" for="happy"></label>
</label>
<label>
<input id="sad" type="radio" name="radAnswer" value="sad" onclick="window.location='test6.html';" />
<label class="drinkcard-cc sad"for="sad"></label>
</label>
</div>
</form>
</header>
</div>
</body>
</html>
The idea of randomly moving the labels is really nice.
But you entountered these problems:
Your main problem was that the variable cc - selector wasn't correct. (Variable names can only contain letters, digits, underscores, and dollar signs.)
cc-selector is a class, not an id, so you need to select .cc-selector, not #cc-selector.
As there are labels in your labels, you wanted to target only the direct childs of cc-selector. I propose you to use .children() instead.
You did not include the jQuery library, for example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Note that to randomize the elements order within an array, we need the .sort(function{…}) returning a number that is randomly <0, 0, >0, so return (Math.random() - 0.5); covers all our needs.
⋅
⋅
⋅
Here is a working simplified snippet made from your code:
(I removed some of the HTML to have a shorter snippet)
$(".cc-selector").html(
// $(".cc-selector > label").sort(function() { // What you wanted to do
$(".cc-selector").children().sort(function() { // What I propose you
return (Math.random() - 0.5); // No need to use 'round()'
})
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>(I added texts to see the values. Run the code multiple times to see it moving!)</p>
<div class="cc-selector">
<label>
<input id="happy" type="radio" name="radAnswer" value="happy" onclick="window.location='test6.html';" />
<label class="drinkcard-cc happy" for="happy">Happy</label>
</label>
<label>
<input id="sad" type="radio" name="radAnswer" value="sad" onclick="window.location='test6.html';" />
<label class="drinkcard-cc sad"for="sad">Sad</label>
</label>
</div>
⋅
⋅
⋅
Then, you can do the same with more labels:
$(".cc-selector").each(function() {
$(this).html(
$(this).children().sort(function() {
return (Math.random() - 0.5);
})
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>(Same… with more texts!)</p>
<div class="cc-selector">
<label>
<input type="radio" name="radAnswer" value="vhappy" />
<label for="vhappy">Very happy</label>
</label>
<label>
<input type="radio" name="radAnswer" value="happy" />
<label for="happy">Happy</label>
</label>
<label>
<input type="radio" name="radAnswer" value="sad" />
<label for="sad">Sad</label>
</label>
<label>
<input type="radio" name="radAnswer" value="vsad" />
<label for="vsad">Very sad</label>
</label>
</div>
<p>(… and again!)</p>
<div class="cc-selector">
<label>
<input type="radio" name="radAnswer" value="vhappy" />
<label for="vhappy">Very happy</label>
</label>
<label>
<input type="radio" name="radAnswer" value="happy" />
<label for="happy">Happy</label>
</label>
<label>
<input type="radio" name="radAnswer" value="sad" />
<label for="sad">Sad</label>
</label>
<label>
<input type="radio" name="radAnswer" value="vsad" />
<label for="vsad">Very sad</label>
</label>
</div>
Hope it helps!
So here is what you had wrong in your code:
Variable name is not correct (Source),
In your function you want to change html of an element with id="cc-selector" but you do not have that element,
You have label in label so jQuery find() function will find all labels.
What I did to make it work:
Changed variable name,
Changed id="cc-selector" to class="cc-selector",
Changed outer label to div.
Here is an working example
var ccselector = $(".cc-selector");
ccselector.html(ccselector.find(".radioHolder").sort(function() {
return (Math.random() - 0.5);
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<form action="" method="post">
<div class="cc-selector">
<div class="radioHolder">
<input id="happy" type="radio" name="radAnswer" value="happy" onclick="" />
<label class="drinkcard-cc happy" for="happy">One</label>
</div>
<div class="radioHolder">
<input id="sad" type="radio" name="radAnswer" value="sad" onclick="" />
<label class="drinkcard-cc sad" for="sad">Two</label>
</div>
</div>
</form>
</div>

Access radio button value from iFrame?

I have a main-page with several separate iFrames including radio-buttons.
I want to validate the choices and because of that need the values of specific radio-button choices.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$('#validate').click(function() {
alert('Value ' + $('#legitimation').contents().find('input[name="group_1"]').val());
});
</script>
</head>
<body>
<iframe id="legitimation" name="legitimation" src="Legitimation.html" width="300" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id='validate' name='validate' value='VALIDATE' />
</body>
</html>
inside my Legitimation.html i have several radio buttons (grouped up):
<form action="#" id="unique_id" class="productFilter">
<fieldset id="step1" class="step1 option0">
<legend>Legitimation</legend>
<p>
<input id="question_1" name="group_1" type="radio" value="1"/>
<label for="question_1">Unidentifiziert</label>
</p>
<p>
<input id="question_2" name="group_1" type="radio" value="2"/>
<label for="question_2">Unlegitimiert</label>
</p>
<p>
<input id="question_3" name="group_1" type="radio" value="3"/>
<label for="question_3">Legitimiert</label>
</p>
</fieldset> [...]
I want to get feedback on which of the radio buttons was clicked, but i just can't seem to find a way on how to do that...
Any help would be appreciated.

Localhost and Webhost errors

This code works on online compilers as well as stackoverflow but why not on my web host as well as localhost.
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});</script></head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" /></body>
</html>
Your head and body tags are intermingled. I've updated it to correctly show the head and body sections.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
</body>
</html>
Your Javascript is running too early, before any HTML elements (your radio buttons) are present. Your selector $('.radiogroup') then does not find anything, and nothing happens when you click the radio buttons.
Either move your Javascript at the end before the </body> closing tag or wrap your code in jQuery's .ready like so:
$(document).ready(function(){
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
})
Your head and body tags are intermingled and if u want to use html5 you don't need to define the script-type, and you don't have to declare not-closed-tags with trailing backslash.
If you want to use an earlier version of html use the type.
If you want to use xhtml you have to use trailing backslashes for not-closed-tags.
Edit: I figured out, that your code is triggered before the Elements are rendered, so you try to add a event-handler to Elements that are not present at that time. Adding $(function() {}); around your code will force jQuery to run the code after document-ready event is triggered.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$('.radiogroup').on('change', function() {
$('#amount').val(this.value);
});
});
</script>
</head>
<body>
<input type="radio" name="radiogroup" class="radiogroup" value="5">
<input type="radio" name="radiogroup" class="radiogroup" value="10">
<input type="radio" name="radiogroup" class="radiogroup" value="15">
<input type="radio" name="radiogroup" class="radiogroup" value="20">
<br><br>
<input type="text" name="amount" id="amount">
</body>
</html>

Why is the 'label' tag not working in ie8

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
</script>
it work like below picture in ie10 when you click the "check1" text
but it not working in ie8
Move the <script> tags inside the <body>.
I think you want to register your clicks on the labels instead of the checkboxes too (since you are not actually displaying the checkboxes). Try this:
function showValues() {
alert($("#"+$(this).attr("for")).val());
}
$("label").on("click", showValues);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
});
</script>
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
Where is $(document).ready();
there are several items within the code
that result in 'browser guesses' as to what you actually want.
Like having both check boxes having the same name
they are NOT radio buttons so the names should be unique
A input attribute ID="..." is for CSS definitions, not for input identification
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
To greatly help the browser, the code should look more like:
<label>
check1
<input type="checkbox" name="check1" style="display:none;" value="check1" />
</label>
<label>
check2
<input type="checkbox" name="check2" style="display:none;" value="check2" />
</label>

How to focus on the text in top of page

I have a simple form which has has to be accessible. If someone misses a mandatory field, the a error should show on the top of the page where I placed a div tag. Now, after I click the submit button, it should show an error message on the top of page and then have a focus so that the screen reader can read it without refreshing the page. I am just not being able to focus on that error. Any suggestion would be really appreciated.
Thanks
My code looks like this
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function myFunction() {
document.getElementById("errors").innerHTML = "ERROR ON THE FORM";
}
function getfocus() {
document.getElementById("errors").focus();
}
function printnfocus() {
if (myFunction()) {
getfocus();
}
}
</script>
</head>
<body>
<div id="errors"></div>
<fieldset>
<legend>Eligibility</legend> <input type="checkbox" id="citizen"> <label for="citizen">I am a U.S. citizen</label><br>
<input type="checkbox" id="18"> <label for="18">I am a 18 years old</label>
</fieldset>
<p>
<br>
</p>
<form id="sex" name="sex">
<fieldset>
<legend>Sex:</legend> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br>
<br>
</fieldset>
</form>
<fieldset>
<legend>Personal Information</legend>
<form>
<label for="lname">Last Name</label> <span title="lblAstrisk" class="asterisk" style="color:red">*</span> <input type="text" name="lname" id="lname" required=""><br>
<br>
</form>
</fieldset>
<p>
<button type="button" onclick="printnfocus()">Submit</button>
</p>
</body>
</html>
You are looking for window.scrollTo(). You can get the location of the errors div with this:
document.getElementById('errors').offsetTop

Categories

Resources