I have a problem in my javascript codes, I'm trying to use next and previous buttons that will next and prev checked radio button.
but when I tried to combine them it doesn't work!
Please help :(
here is my code
javascript
<script>
//this is show and hide//
$(document).ready(function() {
$("input[name$='next[]']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#next" + test).show();
});
});
//this is in the bla bla next and previous -->
var index = 0;
dayNavigation = function (direction) {
var curr = $('.slider input[name="next[]"]:checked');
console.log(curr);
if(direction == 'next'){
if(index > 0){
$('input[name="next[]"]').eq(index-1).prop("checked", true);
curr.prop("checked", false);
index--;
}
}
else{
if(index < $('input[name="next[]"]').length - 1){
$('input[name="next[]"]').eq(index+1).prop("checked", true);
curr.prop("checked", false);
index++;
}
}
};
</script>
HTML
<input type="radio" name="next[]" value="1" checked="checked">
<input type="radio" name="next[]" value="2" />
<input type="radio" name="next[]" value="3" />
<input type="radio" name="next[]" value="4" />
<input type="radio" name="next[]" value="5" />
<div id="next2" class="desc" style="display: none;">
<p> inside of next 2 </p>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
<div id="next3" class="desc" style="display: none;">
<p> inside of next 3 </p>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
<div id="next4" class="desc" style="display: none;">
<p> inside of next 4 </p>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
<div id="next5" class="desc" style="display: none;">
<p> inside of next 5 </p>
<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>
<button type="button" onclick="dayNavigation('prev');" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>
</div>
Try this https://jsfiddle.net/ucostea/4ckqqfd7/2/
$(document).ready(function() {
$("input[name$='next[]']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#next" + test).show();
});
});
//this is in the bla bla next and previous -->
var index = 0;
dayNavigation = function(direction) {
var curr = $('input[name="next[]"]:checked');
if (direction == 'next') {
curr.next().attr("checked", "checked");
curr.next().click();
} else {
curr.prev().attr("checked", "checked");
curr.prev().click();
}
};
Related
I am trying to make my code submit a boolean button with two options. I am trying to trigger the S and K keypress to submit each button. I saw the following code, but when I try it, it doesn't run.
This is my HTML code. Each button has a function that give me a timestamp of the click, submit the page and save the option that the participant chooses (A or B).
<!DOCTYPE html>
<html>
<body>
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1A" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" id="of1B" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
<!--The keypress code-->
<script>
var input = document.getElementById("of1A");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 75) {
event.preventDefault();
document.getElementById("of1A").click();
});
var input = document.getElementById("of1B");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 83) {
event.preventDefault();
document.getElementById("of1B").click();
}
});
//The function that gives me a timestamp
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
</script>
</body>
Without the keypress code the code runs in the next way:
function myFunction() {
var n = Date.now();
document.getElementById("c1").value = n;
}
<p style="text-align: center;">
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="True"> A</button>
<button class="btn btn-primary btn-large"
onclick="myFunction()" name="offer_accepted1" value="False">B</button>
</p>
<input type="hidden" name="timestamp1" value="0" />
{{ form.timestamp1.errors }}
<input type="text" id="c1" name="c1" value="0" />
{{ form.c1.errors }}
I am using the following jQuery to add and take away increments of 1 into an input box.
$(function(){
$('button.quantity-increment').on('click', function(){
var form = $(this).closest('form');
if($(this).hasClass('quantity-left-minus')){
form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) - 1);
} else {
form.find('input.quantity').val(parseInt(form.find('input.quantity').val()) + 1);
}
$('a.add_to_cart_variable').attr('data-quantity', form.find('input.quantity').val());
logDataQuantityAttribute();
});
form.find('input.quantity').on('keyup', function(){
$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
The form below is inside of a Wordpress loop. So when I click the plus and minus increment buttons currently it changes all of the input values.
Is there anyway to just increment the input inside the same form as the plus and minus glyphs are in?
<form class="cart-num" action="index.html" method="post">
<input type="text" name="quantity" class="form-control input-number quantity" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus quantity-increment btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus quantity-increment btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</form>
Since you have mentioned that The form below is inside of a Wordpress loop so i think that the id will be repeated for the form elements. So it is a bad idea to set your JQuery logic by referencing the id of the element. Thus you can use this code to be on the safe side:
$(document).ready(function(){
$('.quantity-right-plus').click(function(e){
// Stop acting like a button
e.preventDefault();
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(inputField).val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
$(".quantity-left-minus").click(function(e) {
// Stop acting like a button
e.preventDefault();
//get the text field to be changed
var inputField = $(this).closest('form').find('input[type="text"]');
// Get its current value
var currentVal = parseInt($(inputField).val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(inputField).val(currentVal - 1);
} else {
// Otherwise put a 0 there
$(inputField).val(0);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
You can notice that i have used input[type="text"] as a selector to find the element. Not an id as in loop this id will be same and will give you incorrect result if you reference the element by id in your JQuery code.
Yes there is a way use jquery selectors, first of all
Select form of clicked glyphicon with:
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
});
Then you can do finding within form, and increment only input within this form.
$(function(){
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
if($(this).hasClass('glyphicon-minus')){
form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) - 1);
} else {
form.find('input#quantity').val(parseInt(form.find('input#quantity').val()) + 1);
}
$('a.add_to_cart_variable').attr('data-quantity', form.find('input#quantity').val());
logDataQuantityAttribute();
});
$('input#quantity').on('keyup', function(){
$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
Working example:
$(function(){
$('span.glyphicon').on('click', function(){
var form = $(this).parents('form.cart-num');
if($(this).hasClass('glyphicon-minus')){
form.find('input').val(parseInt(form.find('input').val()) - 1);
} else {
form.find('input').val(parseInt(form.find('input').val()) + 1);
}
//$('a.add_to_cart_variable').attr('data-quantity', form.find('input').val());
//logDataQuantityAttribute();
});
$('input#quantity').on('keyup', function(){
//$('a.add_to_cart_variable').attr('data-quantity', this.value);
logDataQuantityAttribute();
});
});
button { padding: 0px; border: none; background: transparent; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
<form class="cart-num" action="index.html" method="post">
<input type="text" id="quantity" name="quantity" class="form-control input-number" value="1" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="quantity-left-minus btn btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus">-</span>
</button>
</span>
<span class="input-group-btn">
<button type="button" class="quantity-right-plus btn btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus">+</span>
</button>
</span>
</form>
I have created several input boxes with some logic behind. I need to create a logic for only one input box that if it's the first click, it should increment the value from 0 to 2, and then just a normal increment +1. so to make it clear, the addition should be as follows:
0 > 2 > 3 > 4
If the user clicks on the minus, it should reduce by 1 unless it comes to the value of 2 as than the subtraction should be to 0, so to explain its as follows:
4 > 3 > 2 > 0
$("#1, #2, #3, #4").prop('disabled', true);
$('.add').click(function () {
var value1 = $('#1').val();
var value2 = $('#2').val();
var value3 = $('#3').val();
var value4 = $('#4').val();
var totalValue = parseInt(value1) + parseInt(value2) + parseInt(value3) + parseInt(value4);
if ( totalValue >= 5){
$('.add').prop('disabled', true);
} else {
$(this).prev().val(+$(this).prev().val() + 1);
}
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="field1">field 1
<button type="button" id="sub" class="sub">-</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
<button type="button" id="sub2" class="sub">-</button>
<input type="text" id="2" value="0" class="field" />
<button type="button" id="add2" class="add">+</button>
</div>
<div id="field2">field 3
<button type="button" id="sub3" class="sub">-</button>
<input type="text" id="3" value="0" class="field" />
<button type="button" id="add3" class="add">+</button>
</div>
<div id="field2">field 4
<button type="button" id="sub4" class="sub">-</button>
<input type="text" id="4" value="0" class="field" />
<button type="button" id="add4" class="add">+</button>
</div>
I have created 4 input boxes with plus and minus to increase and decrease the value. I want to make a logic that as soon as the sum of all 4 values adds up to 5, it should disable the plus buttons and do not allow the user to add more.
This is the HTML:
<div id="field1">field 1
<button type="button" id="sub" class="sub">-</button>
<input type="text" id="1" value="0" class="field" />
<button type="button" id="add" class="add">+</button>
</div>
<div id="field2">field 2
<button type="button" id="sub2" class="sub">-</button>
<input type="text" id="2" value="0" class="field" />
<button type="button" id="add2" class="add">+</button>
</div>
<div id="field2">field 3
<button type="button" id="sub3" class="sub">-</button>
<input type="text" id="3" value="0" class="field" />
<button type="button" id="add3" class="add">+</button>
</div>
<div id="field2">field 4
<button type="button" id="sub4" class="sub">-</button>
<input type="text" id="4" value="0" class="field" />
<button type="button" id="add4" class="add">+</button>
</div>
This is the jQuery I am using to increase/decrease the values:
$("input").prop('disabled', true);
$('.add').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});
This should work
$('.add').click(function () {
var value1 = $('#field1').find('input').val();
var value2 = $('#field2').find('input').val();
var value3 = $('#field3').find('input').val();
var value4 = $('#field4').find('input').val();
if ( value1 + value2 + value3 + value4 >= 5){
$('.add').prop('disabled', true);
} else {
$(this).prev().val(+$(this).prev().val() + 1);
}
});
I have created a multi-select dropdown list. Currently when an input is selected, if the user clicks on the label to make a selection, the dropdown list disappears. If they click on the actual checkbox, the list stays in focus. I'd like to keep focus on the dropdown list until the user is finished making their selections and clicks the Submit button; regardless of where they click inside of the list. I've tried various combinations of click/focus listener functions as well as playing with the Bootstrap data attributes, but nothing seems to work.
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked == true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-12">
<div class="button-group" style="padding: 7px 0px 7px 0px; margin-left: 18px;">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> Districts <span class="caret"></span>
</button>
<ul id="ddDistrict" class="dropdown-menu">
<li>
<input type="checkbox" id="inpDist1" value="1">
<label for="inpDist1" class="input small" data-value="1">District 1 (Porter)</label>
</li>
<li>
<input type="checkbox" id="inpDist2" value="2">
<label for="inpDist2" class="input small" data-value="2">District 2 (Jones Jr.)</label>
</li>
<li>
<input type="checkbox" id="inpDist3" value="3">
<label for="inpDist3" class="input small" data-value="3">District 3 (Horne)</label>
</li>
<li>
<input type="checkbox" id="inpDist4" value="4">
<label for="inpDist4" class="input small" data-value="4">District 4 (Haddaway)</label>
</li>
<li>
<input type="checkbox" id="inpDist5" value="5">
<label for="inpDist5" class="input small" data-value="5">District 5 (Duncan)</label>
</li>
<li>
<input type="checkbox" id="inpDist6" value="6">
<label for="inpDist6" class="input small" data-value="6">District 6 (Willner)</label>
</li>
<li>
<input type="checkbox" id="inpDist7" value="7">
<label for="inpDist7" class="input small" data-value="7">District 7 (Brady)</label>
</li>
<li>
<button type="button" class="btn btn-default btn-sm btn-info center-block" onclick="ddInputsChanged('#ddDistrict input', '#lblDistrict');">Submit</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div id="lblDistrict"></div>
</div>
</div>
This seemed to do the trick in a little test. Added stop propagation and added code to close the menu after submit.
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
function ddInputsChanged($inputs, $outputWrapper) {
var $inputs = $('#ddDistrict input');
var $outputWrapper = $('#lblDistrict');
var outputLabel = 'All';
var firstChecked = true;
$inputs.each(function() {
if (this.checked) {
var currentLabel = $(this).next('label').text();
if (firstChecked === true) {
firstChecked = false;
outputLabel = currentLabel;
} else
outputLabel = outputLabel + ', ' + currentLabel;
}
});
$outputWrapper.text(outputLabel);
$(".open").removeClass('open');
}