So here is the code
<html>
<head>
<link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script>
<script type="text/javascript" charset="utf-8" src="../../fuctions/jq.js"></script>
</head>
<body>
<div id="topbar">
<div id="title"><!--Title-->
After Landing
</div>
<div id="leftnav">
Home
Overview<!--AllChecklist-->
</div>
<div id="rightnav">
Next</div><!--NextPage-->
</div>
<div id="content">
<ul class="pageitem">
<li class="radiobutton" onClick="checkChanges()">
<span class="name">Wing Flaps -<font color="red"> UP
</font></span>
<input name="1" type="radio" value="other" />
</li><!--CheckpunktEnd-->
<li class="radiobutton" onClick="checkChanges()">
<span class="name">Carburetor Heat -<font color="red"> OFF
</font></span>
<input name="2" type="radio" value="other" />
</li><!--CheckpunktEnd-->
<li class="radiobutton" onClick="checkChanges()">
<span class="name">Exterior Lights -<font color="red"> as required
</font></span>
<input name="3" type="radio" value="other" />
</li><!--CheckpunktEnd-->
<li class="radiobutton" onClick="checkChanges()">
<span class="name">Electric Fuel Pump -<font color="red"> OFF
</font></span>
<input name="4" type="radio" value="other" />
</li><!--CheckpunktEnd-->
</ul>
</div>
<div id="footer">
<a class="noeffect" href="#" onClick="resetChecklist();">Reset Checklist</a><!--ResetChecklist-->
<br /><br />
<a class="noeffect" href="#" onClick="openxyzDE();">xyz</a>
</div>
</body>
</html>
And i got a function that check for "radio is checked and change colour"
function checkChanges()
{
$('.radiobutton font').attr('color', 'red');
$('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green');
}
$(function()
{
checkChanges();
$('.radiobutton :radio').on('click', checkChanges);
});
I want to add to that code a function that uncheck the Radio if its checked and been clicked again (onClick) this should also change the colour back to red.
Few corrections...
Remove the space before the :checked. Change:
$('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green');
To:
$('.radiobutton:checked').closest('.radiobutton').find('font').attr('color', 'green');
You need to use input[type="radio"] here. Change:
$('.radiobutton :radio').on('click', checkChanges);
To:
$('input.radiobutton[type="radio"]').on('click', checkChanges);
Related
I'm using bootstrap dropdown checkbox. I am able to take a checkbox value when I click on checkbox.
My problem is that if I have already checked the box by default, I cannot take that value using this script.
Demo link
var options = [];
$('.dropdown-menu a').on('click', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function() {
$inp.prop('checked', false)
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', true)
}, 0);
}
$(event.target).blur();
console.log(options);
return false;
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<input type="checkbox" name="price[]" checked/> Option 1
</li>
<li>
<input type="checkbox" name="price[]" /> Option 2
</li>
<li>
<input type="checkbox" name="price[]" /> Option 3
</li>
<li>
<input type="checkbox" name="price[]" /> Option 4
</li>
<li>
<input type="checkbox" name="price[]" /> Option 5
</li>
<li>
<input type="checkbox" name="price[]" /> Option 6
</li>
</ul>
</div>
</div>
</div>
</div>
You mean this simpler script?
const getOptions = () => $('.dropdown-menu input:checked').map(function() {
return $(this).closest("label").data("value");
}).get()
let options = getOptions();
console.log(options);
$('.dropdown-menu li').on('click', function(event) {
options = getOptions();
$(event.target).blur(); // possibly not necessary
console.log(options);
});
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<label class="small" data-value="option1" tabIndex="-1"><input type="checkbox" name="price[]" checked/> Option 1</label>
</li>
<li>
<label class="small" data-value="option2" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 2</label>
</li>
<li>
<label class="small" data-value="option3" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 3</label>
</li>
<li>
<label class="small" data-value="option4" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 4</label>
</li>
<li>
<label class="small" data-value="option5" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 5</label>
</li>
<li>
<label class="small" data-value="option6" tabIndex="-1"><input type="checkbox" name="price[]" /> Option 6</label>
</li>
</ul>
</div>
</div>
</div>
</div>
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!
Anyone have any sample code to provide conditional skip logic within the context of an HTML survey form?
Here is a sample of the HTML I am trying to work with; for example if a user select an answer to question 19 and then skip to 21:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/querystring.js"></script>
<script type="text/javascript" src="//databroker.coremotives.com/Scripts/rateit/jquery.rateit.min.js?v=2013-08-19"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form.CoreMotives').submit(function() {
if (!ValidateRequiredFields(this)) return false;
var submitButton = $(this).find("input[type='submit']");
if (submitButton != null) {
if (submitButton.attr('disabled') == 'disabled') return false;
submitButton.attr('disabled', 'disabled');
}
coreMotives.initForm(this);
return true;
});
var qs = new Querystring();
$('#txtFirstName').val(qs.get("txtFirstName", ""));
$('#txtLastName').val(qs.get("txtLastName", ""));
$('#txtCompanyName').val(qs.get("txtCompanyName", ""));
$('#txtTelephone').val(qs.get("txtTelephone", ""));
$('#txtEmailAddress').val(qs.get("txtEmailAddress", ""));
$('#txtComments').val(qs.get("txtComments", ""));
$('#Q22').val(qs.get("Q22", ""));
$('input[name=Question19][value=' + qs.get("Question19", "") + ']').prop('checked', true);
if ($.isNumeric(qs.get("Question1", ""))) $('#Question1').val(parseInt(qs.get("Question1", "")));
if ($.isNumeric(qs.get("Question2", ""))) $('#Question2').val(parseInt(qs.get("Question2", "")));
if ($.isNumeric(qs.get("Question3", ""))) $('#Question3').val(parseInt(qs.get("Question3", "")));
if ($.isNumeric(qs.get("Question4", ""))) $('#Question4').val(parseInt(qs.get("Question4", "")));
$('div.rateit').rateit();
});
</script>
<script type="text/javascript" src="//databroker.coremotives.com/Styles/WebForms/form.js"></script>
<link rel="stylesheet" href="//databroker.coremotives.com/Styles/WebForms/form.css" type="text/css" />
<link rel="stylesheet" href="//databroker.coremotives.com/Scripts/rateit/rateit.css?v=2013-08-19" type="text/css"/>
<style type="text/css">
</style>
</head>
<body class="noI">
<div id="container">
<form class="CoreMotives" method="post" enctype="multipart/form-data" action="//databroker.coremotives.com/WebCapture.aspx?cm_cid=01d60c03-47d8-e211-b434-00155d32390f&cm_iid=1584&cm_formid=b9e27eb2-49a5-e311-8684-000c293cd65c">
<ul>
<li class="complex">
<div>
<span class="half left">
<label class="desc" for="txtFirstName">First Name</label>
<input id="txtFirstName" name="txtFirstName" type="text" class="field text full " maxlength="255" tabindex="1" value="" />
</span>
<span class="half right">
<label class="desc" for="txtLastName">Last Name</label>
<input id="txtLastName" name="txtLastName" type="text" class="field text full " maxlength="255" tabindex="2" value="" />
</span>
</div>
</li>
<li>
<label class="desc" for="txtCompanyName">Company</label>
<div class="large">
<input id="txtCompanyName" name="txtCompanyName" type="text" class="field text full " maxlength="255" tabindex="3" value="" />
</div>
</li>
<li>
<label class="desc" for="txtTelephone">Phone</label>
<div class="large">
<input id="txtTelephone" name="txtTelephone" type="text" class="field text full " maxlength="255" tabindex="4" value="" />
</div>
</li>
<li>
<label class="desc" for="txtEmailAddress">Email<span class="req">*</span></label>
<div class="large">
<input id="txtEmailAddress" name="txtEmailAddress" type="text" class="field text full email" maxlength="255" tabindex="5" value="" />
</div>
</li>
<li>
<label class="desc" for="txtComments">Comments</label>
<div class="large">
<textarea id="txtComments" name="txtComments" class="field textarea medium " rows="10" cols="50" tabindex="6"></textarea>
</div>
</li>
<li>
<label class="desc" for="Question1">1. How satisfied are you, the employer, with BCBSVT?</label>
<div class="large">
<input type="text" id="Question1" name="Question1"/><div class="rateit star_blue" data-rateit-backingfld="#Question1" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question2">2. How satisfied would you say your employees are with BCBSVT?</label>
<div class="large">
<input type="text" id="Question2" name="Question2"/><div class="rateit star_red" data-rateit-backingfld="#Question2" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question3">3. Would you recommend BCBSVT to a business colleague?</label>
<div class="large">
<input type="text" id="Question3" name="Question3"/><div class="rateit star_red" data-rateit-backingfld="#Question3" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<label class="desc" for="Question4">4. At your next contract renewal, how likely is your company to renew with BCBSVT?</label>
<div class="large">
<input type="text" id="Question4" name="Question4"/><div class="rateit star_red" data-rateit-backingfld="#Question4" data-rateit-starwidth="16" data-rateit-starheight="16" data-rateit-resetable="true" data-rateit-ispreset="false" data-rateit-step="1" data-rateit-min="0" data-rateit-max="10"></div>
</div>
</li>
<li>
<div class="large">
<label id="" class="desc">5. If benefits and their costs are the most important factors for considering a health insurance car</label>
</div>
</li>
<li>
<label class="desc" for="Question19">19. Did your company conduct open enrollment meetings for employees to discuss benefits for the new</label>
<div class="large">
<div><span style="width:100%; padding-bottom:0px;"><input id="Question19_0" name="Question19" type="radio" class="field radio" value="83668" tabindex="12" /><label class="choice" for="Question19_0">Yes</label></span><span style="width:100%; padding-bottom:0px;"><input id="Question19_1" name="Question19" type="radio" class="field radio" value="60591" tabindex="13" /><label class="choice" for="Question19_1">No</label></span></div>
</div>
</li>
<li>
<label class="desc" for="Q22">22. How can BCBSVT improve the open enrollment process for your company?</label>
<div class="large">
<textarea id="Q22" name="Q22" class="field textarea medium " rows="10" cols="50" tabindex="13"></textarea>
</div>
</li>
<li class="buttons">
<div><input id="submitButton" name="submitButton" class="btTxt submit" type="submit" value="Submit" /></div>
</li>
</ul>
</form>
</div>
<img id="bottom" src="//databroker.coremotives.com/Styles/WebForms/bottom.png" alt="" />
<script type="text/javascript">
var path = (("https:" == document.location.protocol) ? "https://databroker.coremotives.com/databroker.js?version=2" : "http://cdn.coremotivesmarketing.com/databroker.js");
document.write(unescape("%3Cscript src='" + path + "' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var coreMotives = new DataBroker();
coreMotives.customerId = "01d60c03-47d8-e211-b434-00155d32390f";
coreMotives.instanceId = 1584;
coreMotives.formId = "b9e27eb2-49a5-e311-8684-000c293cd65c";
coreMotives.trackPageView();
} catch (e) { }
</script>
</body>
</html>
My game isn't working when shrunk down to tablet view or mobile view. It works fine when it is left in a normal browser state, but for some reason it's like the website is frozen. I can't click buttons, type in numbers, or even click radio buttons.
Here is my code to shrink different layouts with different CSS:
<link href="styles/casino.css" rel="stylesheet" type="text/css">
<link href="styles/tablet.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-width:1024px), only screen and (max-device-width: 650px)">
<link href="styles/mobile.css" rel="stylesheet" type="text/css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)">
<!--[if IEMobile]>
<link rel="stylesheet" type="text/css" href="/styles/mobile.css" media="screen" />
<![endif]-->
Here is my game form code:
<div id="game">
<div id="gameScreen">
<img src="images/roulettetable.jpg" class="desktop" height="413" width="100%" alt="Roulette Table" />
<img src="images/roulettetable.jpg" class="tablet" height="255" width="99%" alt="Roulette Table" />
<img src="images/roulettetable.jpg" class="phone" height="215" width="99%" alt="Roulette Table" />
<div id="info"><p>First Name: <span id="firstN"></span><br/>Last Name: <span id="lastN"></span><br/>Phone Number: <span id="phoneN"></span><br/>Postal Code: <span id="postalC"></span><br/>Amount: <span id="startA"></span></p></div>
<div id="cash"><p></p></div>
</div>
<div id="gameForm">
<form id="gameForm">
<label>Bet: </label>
<input type="text" value="0" id="bet" name="betAmount" onClick="if (this.value == '0') this.value='';" required/>
<label> 1-12: </label>
<input type="radio" name="temp" value="1-12" id="thirdOne" onClick="deselect()"/>
<label> 13-24: </label>
<input type="radio" name="temp" value="13-24" id="thirdTwo" onClick="deselect()"/>
<label> 25-36: </label>
<input type="radio" name="temp" value="25-36" id="thirdThree" onClick="deselect()"/>
<label>Single Number:</label>
<input type="number" name="num" id="num" min="00" max="36" onBlur="validateNum();"/><br/><hr/>
<label>Black:</label>
<input type="radio" name="temp" id="blackBet" value="Black" onClick="deselect()"/>
<label> Even: </label>
<input type="radio" name="temp" value="even" id="evenBet" onClick="deselect()"/>
<label for="halfTwo"> High: </label>
<input type="radio" name="temp" value="19-36" id="halfTwo" onClick="deselect()"/><br/>
<input type="button" name="spin" value="Spin!!!" id="spin" onClick="spinIt();" />
<label>Red:</label>
<input type="radio" name="temp" id="redBet" value="Red" onClick="deselect()" />
<label> Odd: </label>
<input type="radio" name="temp" value="odd" id="oddBet" onClick="deselect()" />
<label> Low: </label>
<input type="radio" name="temp" value="1-18" id="halfOne" onClick="deselect()"/>
<input type="button" name="leave" value="Leave Game" id="leave" onClick="window.location = 'outcome.html'"/>
</form>
</div>
</div>
I have a list that looks like that, so the user should check the item one by one and get a feedback the item is checked or not.
<html>
<head>
<link href="../../fuctions/style.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../fuctions/cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../../fuctions/functions.js"></script>
</head>
<body>
<div id="topbar">
<div id="title">
Engine Run-up
</div>
<div id="leftnav">
Home
Overview
</div>
<div id="rightnav">
Next
</div>
</div>
<div id="content">
<ul class="pageitem">
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="red"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Safety Belts -<font color="red"> fastened</font></span>
<input name="2" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Canopy -<font color="red"> closed / locked</font></span>
<input name="3" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Pressure Warning Light -<font color="red"> OFF</font></span>
<input name="4" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Shut-off Valve -<font color="red"> check OPEN</font></span>
<input name="5" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Fuel Quantity Indicator -<font color="red"> check</font></span>
<input name="6" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Engine Gauges -<font color="red"> green range</font></span>
<input name="7" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Trim -<font color="red"> NEUTRAL</font></span>
<input name="8" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Controls -<font color="red"> free</font></span>
<input name="9" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1700-1800 RPM</font></span>
<input name="10" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Prop Control Level -<font color="red"> Cycle 3 x (50-250 RPM)</font></span>
<input name="11" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Ignition Switch - Cycle -<font color="red"> L-BOTH-R-BOTH</font></span>
<input name="12" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> 1500 RPM</font></span>
<input name="13" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carburetor Heat -<font color="red"> ON (<50 RPM)</font></span>
<input name="14" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Throttle -<font color="red"> IDLE</font></span>
<input name="15" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Carniretor Heat -<font color="red"> OFF</font></span>
<input name="16" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Corcuit Breakers -<font color="red"> check IN</font></span>
<input name="17" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Electric Fuel Pump -<font color="red"> ON</font></span>
<input name="18" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Wing Flaps -<font color="red"> T/O</font></span>
<input name="19" type="radio" value="other" />
</li>
<li class="radiobutton">
<span class="name">Parking Brake -<font color="red"> release</font></span>
<input name="20" type="radio" value="other" />
</li>
</ul>
</div>
<div id="footer">
<a class="noeffect" href="#" onClick="resetChecklist();">Reset ZYX</a>
<br /><br />
<a class="noeffect" href="#" onClick="openXYZDE();">XYZ</a>
</div>
</body>
I want to check via JavaScript whether one of the "li" is checked, if so it should change that line to "green".
<li class="radiobutton">
<span class="name">Toe Brakes -<font color="green"> hold</font></span>
<input name="1" type="radio" value="other" />
</li>
If jquery is an option, it becomes pretty simple.
function checkChanges()
{
$('.radiobutton font').attr('color', 'red');
$('.radiobutton :checked').closest('.radiobutton').find('font').attr('color', 'green');
}
$(function()
{
checkChanges();
$('.radiobutton :radio').on('click', checkChanges);
});
Although I HIGHLY recommend removing the font tag and instead add a class to the li, such as radiobutton-checked which sets the font color to green.
The ab ove code will reset all fonts to red, then find the one radio button with a checked radio inside it, iterate back up to the parent radiobutton (closest) and then find its child font tag and set its color to green. Then anytime a radio button gets clicked, it repeats the above process, thus keeping only the actively checked radio button green.