reorder radio buttons - javascript

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>

Related

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

form validation in JS for checkboxes

I'm trying to do a homework assignment and having some issues. I'm supposed to validate a form with Javascript. Right now I'm trying to make sure that a user has checked at least one checkbox (out of four options) in order for the form to submit. (I've gotten other segments of validation to work, so the issue seems to be local to this part of code.)
This is what the html for the checkbox form looks like:
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
And this is what I've written to try to validate it using Javascript:
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
This isn't working; the form submits whether boxes have been checked or not.
I would really love to get some help here because I don't have any idea what I'm doing wrong. Like I said, the problem seems to exist somewhere in this specific code, because other validation in separate blocks of code does work.
This is the complete HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>

Radio button clicked with label

I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.
The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked.
In order for the code to work the <label> has to stay arround the <input> tag.
<div class="radio-toolbar">
<label class="BottomLeft">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
</label>
<label class="BottomRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
</label>
<label class="Dual">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
</label>
<label class="DualRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
</label>
<label class="Duplex">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
</label>
<label class="Custom">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
</label>
</div>
Here's the JSfiddle
You can try this:
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is the FIDDLE.
Also, you must have unique ID's in html.
To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.
<div class="radio-toolbar">
<label for="first">
Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" />
</label>
<label for="second">
AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
</label>
<label for="third">
Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" />
</label>
<label for="fourth">
Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
</label>
<label for="fifth">
Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
</label>
<label for="sixth">
Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
</label>
</div>
Try this.I have changed backgorund color checked radio button to orange with jquery
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

how to show/hide a div on the basis of a checkbox selection in angular js

I have a checkbox and a div on my page.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals"
ng-checked="ModelData.Animals == 'A'" />
<div class="form-group" ng-show="ModelData.Animals == 'A'">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="Y" />
Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov"
value="N" />
No
</label>
</div>
</div>
I want to show the DIV when the checkbox is selected and hide when deselected. For the first time the above code workd fine ie when checkbox is selected and DIV hides on deselecting the checkbox. But after the first time its not working. It does not show the DIV after selecting the checkbox.
Have you tried it this way? Here's the fiddle It works great.
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" />
<div class="form-group" ng-show="ModelData.Animals">
<label for="FirstName" class="col-md-9">
Are you interested in Animal Liability Coverage?
</label>
<div class="col-md-3">
<label>
<input type="radio" id="AnimalLiabCovY" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="Y" /> Yes
<input type="radio" id="AnimalLiabCovN" name="AnimalLiabilityCoverageRadio" ng-model="ModelData.AnimalLiabCov" value="N" /> No
</label>
</div>
</div>
I think you are looking for ng-true-value and ng-false-value
<div ng-app>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
</div>
Fiddle
<body ng-app>
<label>Wolf: <input type="checkbox" ng-model="Wolf" ng-init="checked=true" /></label><br/>
<label>Tiger: <input type="checkbox" ng-model="Tiger" ng-init="checked=false" /></label><br/>
<label>Lion: <input type="checkbox" ng-model="Lion" ng-init="checked=false" /></label><br/>
Show when checked:
<div ng-if="Wolf">
<span> This is removed when the wolf is checked.
</span>
</div>
<div ng-if="Tiger">
<span> This is removed when the tiger is checked.
</span>
</div>
<div ng-if="Lion">
<span> This is removed when the lion is checked.
</span>
</div>
</body>
Input type checkbox return true false in ng-model so i just use this. Its working
<div ng-app>
<div >
<input type="checkbox" ng-model="check"/>
</div>
<div ng-show="check == true">
Checked
</div>

Categories

Resources