What it is:
I am having an issue with my swipeable form. It uses a vanilla JS method to achieve swipe recognition and .animate to cycle through each part of the form.
My problem:
When too many swipes are performed in succession or too many next buttons are clicked in succession, the .animate seems to fail and they start to pile up in the center of the visible area.
Things I've tried:
I've tried stopPropagation() and setTimeout(), but neither have helped. I've also tried removing the listeners at the start of their function and adding them back at the end of the nextPrev() function, which also didn't correct the issue.
I'm not sure where exactly it is going wrong and therefore don't know how to troubleshoot this. I've tried different things at various stages and nothing seems to correct this issue. I am looking for a way to prevent this from happening.
I apologize for not presenting an MCVE, I left everything in intentionally so someone could experience cycling through the form and reproduce the issue.
The code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
body {
align-items: center;
width: 100%;
font-size: 2em;
}
#form {
display: flex;
margin: auto;
align-items: center;
text-align: center;
width: 750px;
height: 750px;
border: 1px solid black;
position: relative;
overflow: hidden;
}
#btns {
margin: auto;
text-align: center;
width: 250px;
height: 50px;
}
#back {
float: left;
}
#next {
float: right;
}
table {
margin: auto;
}
.part:not(:first-child) {
display: inline-block;
position: absolute;
right: 0px;
left: 5000px;
}
.part:first-child {
display: inline-block;
position: absolute;
right: 0px;
left: 0px;
}
input[type=text],input[type=number],input[type=date],input[type=time], select {
width: 500px;
padding: 30px 20px;
margin: 8px 0;
border: 1px solid Black;
border-radius: 10px;
box-sizing: border-box;
font-size: 1em;
color: Black;
}
input[type=radio] {
width: 100px;
height: 100px;
}
input[type=checkbox] {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div id="form">
<div id="0" class="part"><h3>Driver Information</h3></div>
<div id="1" class="part">Company:<br><input type="text" name="carrier"></div>
<div id="2" class="part">Station:<br><table>
<tr><td>PDX:</td><td><input type="radio" id="pdx" name="address"></td></tr>
<tr><td>EUG:</td><td><input type="radio" id="pdx" name="address"></td></tr>
<tr><td>SEA:</td><td><input type="radio" id="pdx" name="address"></td></tr>
<tr><td>SFO:</td><td><input type="radio" id="pdx" name="address"></td></tr></table></div>
<div id="3" class="part">Name:<br><input type="text" name="name" placeholder="Your Full Name"></div>
<div id="4" class="part">Employee Number:<br><input type="number" name="employeeNumber" placeholder="Your Employee Number"></div>
<div id="5" class="part">Date:<br><input type="date" id="date" name="date"></div>
<div id="6" class="part">Time:<br><input type="time" id="time" name="time"></div>
<div id="7" class="part"><h3>Vehicle<br>Information</h3></div>
<div id="8" class="part">Tractor/Truck Number:<br><input type="number" id="tractorTruckNumber" name="tractorTruckNumber"></div>
<div id="9" class="part">Odometer:<br><input type="number" id="odometer" name="odometer"></div>
<div id="10" class="part"><h4><p>Vehicle Inspection<br><small></small></p></h4></div>
<div id="11" class="part">
<table>
<tr><td>Air Compressor:</td><td><input type="checkbox" class="truck" id="aircompressor"></td></tr>
<tr><td>Air Lines:</td><td><input type="checkbox" class="truck" id="airlines"></td></tr>
<tr><td>Battery:</td><td><input type="checkbox" class="truck" id="battery"></td></tr>
<tr><td>Belts and Hoses:</td><td><input type="checkbox" class="truck" id="beltsandhoses"></td></tr>
<tr><td>Body:</td><td><input type="checkbox" class="truck" id="body"></td></tr>
</table>
</div>
<div id="12" class="part">
<table>
<tr><td>Brake Accessories:</td><td><input type="checkbox" class="truck" id="brakeaccessories"></td></tr>
<tr><td>Brakes, Parking:</td><td><input type="checkbox" class="truck" id="brakesparking"></td></tr>
<tr><td>Brakes, Service:</td><td><input type="checkbox" class="truck" id="brakesservice"></td></tr>
<tr><td>Clutch:</td><td><input type="checkbox" id="clutch"></td></tr>
<tr><td>Coupling Devices:</td><td><input type="checkbox" class="truck" id="couplingdevices"></td></tr>
</table>
</div>
<div id="13" class="part">
<table>
<tr><td>Defroster/Heater:</td><td><input type="checkbox" class="truck" id="defrosterheater"></td></tr>
<tr><td>Drive Line:</td><td><input type="checkbox" class="truck" id="driveline"></td></tr>
<tr><td>Engine:</td><td><input type="checkbox" class="truck" id="engine"></td></tr>
<tr><td>Exhaust:</td><td><input type="checkbox" class="truck" id="exhaust"></td></tr>
<tr><td>Fifth Wheel:</td><td><input type="checkbox" class="truck" id="fifthwheel"></td></tr>
</table>
</div>
<div id="14" class="part">
<table>
<tr><td>Fluid Levels:</td><td><input type="checkbox" class="truck" id="fluidlevels"></td></tr>
<tr><td>Frame and Assembly:</td><td><input type="checkbox" class="truck" id="frameandassembly"></td></tr>
<tr><td>Front Axle:</td><td><input type="checkbox" class="truck" id="frontaxle"></td></tr>
<tr><td>Fuel Tanks:</td><td><input type="checkbox" class="truck" id="fueltanks"></td></tr>
<tr><td>Horn:</td><td><input type="checkbox" class="truck" id="horn"></td></tr>
</table>
</div>
<div id="15" class="part">
<table>
<tr><td>Lights:</td><td><input type="checkbox" class="truck" id="lights"></td></tr>
</table>
<small><center><p>Head/Stop, Tail/Dash, Turn Indicators, Clearance/Marker</p></center></small>
</div>
<div id="16" class="part">
<table>
<tr><td>Mirrors:</td><td><input type="checkbox" class="truck" id="mirrors"></td></tr>
<tr><td>Muffler:</td><td><input type="checkbox" class="truck" id="muffler"></td></tr>
<tr><td>Oil Pressure:</td><td><input type="checkbox" class="truck" id="oilpressure"></td></tr>
<tr><td>Radiator:</td><td><input type="checkbox" class="truck" id="radiator"></td></tr>
<tr><td>Read End:</td><td><input type="checkbox" class="truck" id="rearend"></td></tr>
<tr><td>Reflectors:</td><td><input type="checkbox" class="truck" id="reflectors"></td></tr>
</table>
</div>
<div id="17" class="part">
<table>
<tr><td>Safety Equipment:</td><td><input type="checkbox" class="truck" id="safetyequipment"></td></tr>
</table>
<small><center><p>Fire Extinguisher, Flags/Flares/Fusees, Reflective Triangles, Spare Bulbs/Fuses, Spare Seal Beam</p></center></small>
</div>
<div id="18" class="part">
<table>
<tr><td>Starter:</td><td><input type="checkbox" class="truck" id="starter"></td></tr>
<tr><td>Steering:</td><td><input type="checkbox" class="truck" id="steering"></td></tr>
<tr><td>Suspension System:</td><td><input type="checkbox" class="truck" id="suspensionsystem"></td></tr>
<tr><td>Tire Chains:</td><td><input type="checkbox" class="truck" id="tirechains"></td></tr>
<tr><td>Tires:</td><td><input type="checkbox" class="truck" id="tires"></td></tr>
<tr><td>Transmission:</td><td><input type="checkbox" class="truck" id="transmission"></td></tr>
</table>
</div>
<div id="19" class="part">
<table>
<tr><td>Trip Recorder:</td><td><input type="checkbox" class="truck" id="triprecorder"></td></tr>
<tr><td>Wheels and Rims</td><td><input type="checkbox" class="truck" id="wheelsandrims"></td></tr>
<tr><td>Windows</td><td><input type="checkbox" class="truck" id="windows"></td></tr>
<tr><td>Windshield Wipers:</td><td><input type="checkbox" class="truck" id="windshieldwipers"></td></tr>
<tr><td>Other:</td><td><input type="checkbox" class="truck" id="other"></td></tr>
</table>
</div>
<div id="20" class="part">Remarks:<br><input type="text" id="truckremarks"></div>
<div id="21" class="part"><h3>Trailer Inspection</h3></div>
<div id="22" class="part">Trailer Number:<br><input type="number" id="trailernumber"><br><h6>(if no trailer, click next)</h6></div>
</div>
<div id="btns"><input type="button" id="back" onclick="nextPrev(-1)" value="<< Back"><input type="button" id="next" onclick="nextPrev(1);" value="Next >>"></div>
</body>
<script>
var part = $('.part')
var currentPart = 0;
checkButtons();
var isSwiping = false;
function startSwipe(){
if (isSwiping){
return false;
}
else {
isSwiping = true;
$('#back, #next').attr('disabled',true);
return true;
}
}
function endSwipe(){
$('#back, #next').removeAttr('disabled');
isSwiping = false;
}
function nextPrev(n){
if (startSwipe()){//this doesn't work when swiping with startSwipe(), but buttons still work
if (n === 1){
if (currentPart !== part.length-1){
$('#'+currentPart).filter(':not(:animated)').animate({'left':'-5000px'},500,function(){
$(this).css({'left':'-5000px'});//set current left
});//move current left
$('#'+(currentPart+n)).delay(200).filter(':not(:animated)').animate({'left':'0'},500,function(){
$(this).css({'left':'0'});//set next centered
currentPart = currentPart + n;
checkButtons();
endSwipe();
});//move next right
}
}
if (n === -1){
if (currentPart !==0){
$('#'+currentPart).filter(':not(:animated)').animate({'left':'5000px'},500,function(){
$('#'+currentPart).css({'left':'5000px'});//set current right
});//move current left
$('#'+(currentPart+n)).delay(200).filter(':not(:animated)').animate({'left':'0'},500,function(){
$('#'+(currentPart+n)).css({'left':'0'});//set next centered
currentPart = currentPart + n;
checkButtons();
endSwipe();
});//move next right
}
}
}
}
function checkButtons(){
if (currentPart == 0){
$('#back').css({'display':'none'});
}
else if (currentPart == part.length-1){
$('#next').css({'display':'none'});
}
else {
$('#back').css({'display':'block'});
$('#next').css({'display':'block'});
}
}
document.getElementById('form').addEventListener('touchstart', handleTouchStart, false);
document.getElementById('form').addEventListener('touchmove', handleTouchMove, false);
document.getElementById('form').addEventListener('touchend', handleTouchEnd, false);
var xDown = null;
var yDown = null;
function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}
function handleTouchStart(evt) {
if (startSwipe()){
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
}
};
function handleTouchMove(evt) {
if (isSwiping){
if ( ! xDown || ! yDown ) {
return;
}
var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;
var xDiff = xDown - xUp;
var yDiff = yDown - yUp;
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
nextPrev(1);
} else {
nextPrev(-1);
}
}
/* reset values */
xDown = null;
yDown = null;
}
};
function handleTouchEnd(evt) {
endSwipe();
};
</script>
</html>
update: ariel's solution is a good one, though it did not fix my problem. This sort of flagging is important, and my code should've already been equipped with it. I am still experiencing issues, though I found something promising here: https://css-tricks.com/full-jquery-animations/
Though it does not fix my problem completely, it is getting very close to a solution and I will update when I have one.
You need to use a flag to prevent the event firing when the animation is happening:
var isSwiping = false;
function startSwipe() {
if (isSwiping) {
return false;
} else {
isSwiping = true;
$("button#back, button#next").attr("disabled", true);
return true;
}
}
function endSwipe() {
$("button#back, button#next").removeAttr("disabled");
isSwiping = false;
}
function nextPrev(n) {
if (startSwipe()) {
...
// Inside animate callback:
endSwipe();
...
}
...
document.getElementById('form').addEventListener('touchstart', handleTouchStart, false);
document.getElementById('form').addEventListener('touchmove', handleTouchMove, false);
document.getElementById('form').addEventListener('touchend', handleTouchEnd, false);
...
function handleTouchStart(evt) {
if (startSwipe()) {
...
}
};
function handleTouchMove(evt) {
if (isSwiping) {
...
}
};
function handleTouchEnd(evt) {
endSwipe();
};
Related
Why is my code not working? How to make a button active after selecting one of the checkboxes? And how to dynamically transfer a text from checkbox to rezBlock_1 block?
CODPEN
https://codepen.io/RJDio/pen/RwPgaaZ
document.addEventListener("DOMContentLoaded", () => {
let radioBtn = document.querySelectorAll('.radioBtn');
let activeBtn = document.querySelector('.activeBtn');
let formRadio = document.querySelector('.formRadio');
let rezBlock_1 = document.querySelector('.rezBlock_1');
function checkRadio(){
for(let i =0; i < radioBtn.length; i++){
if(radioBtn[i].hasAttribute('checked')){
activeBtn.removeAttribute('disabled');
let radioValue = radioBtn[i].innerText();
rezBlock_1.innerText(radioValue);
}
}
}
checkRadio();
});
.blockRez{
width: 200px;
height: 100px;
border:1px solid red;
}
#rezBlock_1 {
width: 150px;
height: 30px;
border:1px solid blue;
}
<div class="block1">
<form class="formRadio" action="handler.php">
<p><b>Make your choose<b></p>
<p><input class="radioBtn" name="dzen" type="radio" value="red">Red</p>
<p><input class="radioBtn" name="dzen" type="radio" value="green">Green</p>
<p><input class="radioBtn" name="dzen" type="radio" value="blue">Blue</p>
<p><button class="activeBtn" disabled value="Choose">Choose</button></p>
</form>
</div>
<div class="blockRez">
<div id="rezBlock_1"></div>
</div>
You can add an eventListener for the click event. To re-activate a button set disabled to false.
document.addEventListener("DOMContentLoaded", () => {
let inputs = document.querySelectorAll(".radioBtn");
inputs.forEach(input => input.addEventListener("click", () => {document.querySelector('.activeBtn').disabled = false;}))
});
.blockRez{
width: 200px;
height: 100px;
border:1px solid red;
}
#rezBlock_1 {
width: 150px;
height: 30px;
border:1px solid blue;
}
<div class="block1">
<form class="formRadio" action="handler.php">
<p><b>Make your choose<b></p>
<p><input class="radioBtn" name="dzen" type="radio" value="red">Red</p>
<p><input class="radioBtn" name="dzen" type="radio" value="green">Green</p>
<p><input class="radioBtn" name="dzen" type="radio" value="blue">Blue</p>
<p><button class="activeBtn" disabled value="Choose">Choose</button></p>
</form>
</div>
<div class="blockRez">
<div id="rezBlock_1"></div>
</div>
I have two forms. I want one of them to be enabled by the user choose through one of the radio buttons above.
What I want to do is to get the value of radio button and through this value make one of the forms enable.
So I try with JavaScript and input radio ID but I had no success:
<script>
window.addEventListener('load', init);
function init(){
var radio = document.getElementsByName ("questions");
for (var i=0; i<radios.length; i++) {
if(radio[i].getElementById.checked == "questions_1") {
radio[i].addEventListener(seleccionar);
}
}
function trigger() {
elementsForm = document.forms['question'].elements;
for (var y=0; y<elementsForm.length; y++) {
elementsForm[y].disabled=false;
}
}
</script>
Here's my code (HTML and CSS):
.category_1 {
height: 50px;
padding-top: 2%;
}
.question {
display: inline-flex;
margin-left: 5%;
}
.q-text {
font-weight: 600;
}
.q1 {
width: 44%;
}
.q2 {
width: 44%;
}
.form {
display: inline-flex;
margin-left: 5%;
}
.form.q1 {
width: 44%;
}
.form.q2 {
width: 44%;
}
.data {
margin-top: 5%;
}
.data label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
<body>
<div class="category_1">
<div class="question q1"><input type="radio" name="question" value="question_1" id="question_1">
<div class="q-text">QUESTION 1</div></div>
<div class="question q2"><input type="radio" name="question" value="question_2" id="question_2">
<div class="q-text">QUESTION 2</div></div>
</div>
<div class="form q1">
<form name="q1" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class="data">
<label for="others">Select an item:</label>
<select name="items-q1" disabled>
<option value="it1">item 1</option>
<option value="it2">item 2</option>
<option value="it3">item 3</option>
<option value="it4">item 4</option>
</select>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
<div class="form q2">
<form name="q2" method="post" action="">
<div class ="data">
<label for="others">Name:</label>
<input type="text" name="name" disabled>
</div>
<div class ="data">
<label for="others">Choose an option:</label><br>
<input type="radio" name="option" value="o1" disabled><label for="others">1</label>
<input type="radio" name="option" value="o2" disabled><label for="others">2</label>
</div>
<div class="data">
<label for="others">Anything else?</label>
<textarea name="more" disabled></textarea>
</div>
<div class="data">
<input type="submit" value="submit" disabled>
</div>
</form>
</div>
</body>
I'd really appreciate any suggestions.
First of all i noticed your are getting the radios by the wrong name
its "question" not "questions"
<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
if(this.value == "questions_1") {
//input logic to display form
//This is where you run isTrue() Function
isTrue(data);
}
else{
//This is where you run isFalse() function
isFalse(data);
}
};
}
//Function to run if its true
function isTrue(data){
//something equals something
}
//Function to run if its false
function isFalse(data){
//something equals something
}
</script>
Reference Link
<script>
var rad = document.getElementsByName('question');
for(var i = 0; i < rad.length; i++) {
rad[i].onclick = function () {
if(this.value == "question_1") {
e1();
}else {
e2();
}
};
}
function e1() {
var eform1 = document.querySelectorAll('.q1 input[type=text], .q1 select, .q1 textarea, .q1 input[type=submit]');
for(var i = 0; i < eform1.length; i++) {
eform1[i].disabled = false;
}
}
function e2() {
var eform2 = document.querySelectorAll('.q2 input[type=text], .q2 input[type=radio], .q2 textarea, .q2 input[type=submit]');
for(var i = 0; i < eform2.length; i++) {
eform2[i].disabled = false;
}
}
</script>
I'm working on a homework assignment where we have to make a simple calculator in JavaScript. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
{
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = document.getElementById("first").value;
var secondValue = document.getElementById("second").value;
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick = "compute();">Compute</button>
</div>
Result:
</form>
</body>
</html>
The calculator won't run, and I think that has something to do with how I've set it up to return. Does returning output print it to the screen? If not, how do I get this to happen? Please help! Thanks.
There was a few things you needed to do.
You needed to get the value inserted into the textbox, not the value of the div.
You also needed to convert the input from a string to a number using parseInt.
Returning the output won't show it on the screen. Instead of returning the output, you needed to add it to the page as an answer by using innerHTML.
Run the code snippet below to see it in action.
<html>
<head>
<meta charset="utf-8" />
<title>Calculator</title>
<style>
div{
display: inline-block;
}
#first{
float: left;
position: relative;
top: 65px;
}
#fieldset{
width: 70px;
{
#second{
}
#compute{
position: relative;
}
</style>
<script>
window.onload = function(){
alert('Welcome to the JavaScript Calculator!');
};
function compute() {
var firstValue = parseInt(document.getElementById("firstValue").value);
var secondValue = parseInt(document.getElementById("secondValue").value);
var output;
if (document.getElementById("plus").checked === true)
{
output = firstValue + secondValue;
}
else if (document.getElementById("minus").checked === true)
{
output = firstValue - secondValue;
}
else if (document.getElementById("times").checked === true)
{
output = firstValue*secondValue;
}
else if (document.getElementById("divide").checked === true)
{
output = firstValue/secondValue;
}
document.getElementById("result").innerHTML = "Result: " + output;
return output;
}
</script>
</head>
<body>
<header>
<h1>Simple Calculator</h1>
</header>
<form>
<div id="first">
First value: <input id="firstValue" type="text" name="FirstValue" />
</div>
<div id="fieldset">
<fieldset id=radio>
<label for="plus">+</label>
<input type="radio" id="plus" name="type" value="plus" checked/><br>
<label for="minus">-</label>
<input type="radio" id="minus" name="type" value="minus"/><br>
<label for="times">x</label>
<input type="radio" id="times" name="type" value="times"/><br>
<label for="divide">÷</label>
<input type="radio" id="divide" name="type" value="divide"/>
</fieldset>
</div>
<div id="second">
Second value: <input id="secondValue" type="text" name="SecondValue" />
</div>
<div id="compute">
<button type="button" onclick="compute();">Compute</button>
</div>
<div id="result">
Result:
</div>
</form>
</body>
</html>
How to limit checkbox selection to one using jquery or javascript and other checkbox should be disabled after one checkbox selected?
<input type="checkbox" name="size[]" id="size" value="Small" />Small
<input type="checkbox" name="size[]" id="size" value="Medium" />Medium
<input type="checkbox" name="size[]" id="size" value="Large" />Large
<input type="checkbox" name="size[]" id="size" value="Xl" />XL
Here The Example But I Want Same Thing In Html Or Php
http://gravitywiz.com/demos/limit-how-many-checkboxes-can-be-checked/
Problem Is Solved Now Here The Final Solution
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('input:checkbox').click(function(){
var $inputs = $('input:checkbox')
if($(this).is(':checked')){
$inputs.not(this).prop('disabled',true);
}else{
$inputs.prop('disabled',false);
}
})
})
</script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" />
$("input[type='checkbox']").on("click" , function(){
$("input[type='checkbox']").not(this).attr("disabled", "disabled");
});
Working Example
If you disable, user can't change his choice after first selection.
Here is a radio button behavior for checkbox.
$("input[type=checkbox]").on('click', function() {
$("input[type=checkbox]").not(this).attr('checked', false);
});
http://jsfiddle.net/BxF4Y/
But to doing that, the best way is to use radio buttons.
Browsing the source code of that page reveals the jQuery they used to achieve that effect. You should just be able to change the checkboxLimit to 1.
<script type="text/javascript">
jQuery(document).ready(function($) {
$.fn.checkboxLimit = function(n) {
var checkboxes = this;
this.toggleDisable = function() {
// if we have reached or exceeded the limit, disable all other checkboxes
if(this.filter(':checked').length >= n) {
var unchecked = this.not(':checked');
unchecked.prop('disabled', true);
}
// if we are below the limit, make sure all checkboxes are available
else {
this.prop('disabled', false);
}
}
// when form is rendered, toggle disable
checkboxes.bind('gform_post_render', checkboxes.toggleDisable());
// when checkbox is clicked, toggle disable
checkboxes.click(function(event) {
checkboxes.toggleDisable();
// if we are equal to or below the limit, the field should be checked
return checkboxes.filter(':checked').length <= n;
});
}
$("#field_11_1 .gfield_checkbox input:checkbox").checkboxLimit(3);
});
</script>
Yes, this is an old thread, however there is no real conclusion here. I have included a fiddle with my version of how check-boxes should work should you wish to limit the number of boxes checked by the user.
/** Begin HTML **/
<div class="cContainer">
<div class="cDropdown">
<div class="downArrow"></div>
<h4>Night Life</h4>
</div>
<div class="multiCheckboxes stick">
<input id="1" class="stick" type="checkbox" value="1" name="l-28">
<label class="stick" for="1">Dive Bar</label>
<br>
<input id="2" class="stick" type="checkbox" value="2" name="l-28">
<label class="stick" for="2">Pub</label>
<br>
<input id="3" class="stick" type="checkbox" value="3" name="l-28">
<label class="stick" for="3">Dance Club</label>
<br>
<input id="4" class="stick" type="checkbox" value="4" name="l-28">
<label class="stick" for="4">Pool Hall</label>
<br>
<input id="5" class="stick" type="checkbox" value="5" name="l-28">
<label class="stick" for="5">Karaoke</label>
<br>
<input id="6" class="stick" type="checkbox" value="6" name="l-28">
<label class="stick" for="6">Sports Bar</label>
<br>
<input id="7" class="stick" type="checkbox" value="7" name="l-28">
<label class="stick" for="7">Trendy</label>
<br>
</div>
/** END HTML **/
/** BEGIN JS **/
$('.cDropdown').on('click', function (e) {
$('.multiCheckboxes').slideUp(50)
e.stopPropagation();
currentDrop = $(this).next();
currentDrop.stop().slideToggle();
});
$('input:checkbox[name="l-28"]').on('change', function () {
var nightLifeLimit = $('input:checkbox[name="l-28"]:checked').length;
if (nightLifeLimit == 2) {
$('input:checkbox[name="l-28"]').each(function () {
if ($(this).is(':checked')) {
return;
}
else {
$(this).prop('disabled', true);
}
});
}
else {
$('input:checkbox[name="l-28"]').each(function () {
$(this).prop('disabled', false);
});
}
});
/** END JS **/
/** BEGIN CSS **/
.cDropdown {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px inset #D3D3D3;
clear: right;
padding: 4px 3px;
width: 150px;
}
.cDropdown h4 {
font-size: 0.86em;
font-weight: normal;
margin: 0 0 0 1px;
padding: 0;
}
.downArrow {
border-left: 8px solid rgba(0, 0, 0, 0);
border-right: 8px solid rgba(0, 0, 0, 0);
border-top: 8px solid #3C3C3C;
float: right;
height: 0;
margin: 3px 0 0 3px;
width: 0;
}
.multiCheckboxes {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #3C3C3C;
display: none;
left: 9px;
max-height: 200px;
overflow: auto;
padding: 5px;
position: absolute;
top: 35px;
width: 146px;
z-index: 999;
}
.multiCheckboxes label {
float: none !important;
font-size: 0.9em;
width: 7.6em !important;
}
http://jsfiddle.net/defmetalhead/9BYrm/1/
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.