Develop Reference

button to be visible after it fulfilled requirements

Requirements:
When more than one button is clicked, users will then be able to click on "proceed-button".
Current situation:
I am making a cinema web page. Users will get to choose their preferred seats. When the seat is chosen, they will then be able to click on "proceed-button" to pay. However, i have difficulty implementing this function. I know that i needed to use the visibility-hidden function.
The following is my code:
var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
buttons[i].addEventListener('click', function() {
buttons[i].classList.toggle('active');
if (this.classList.contains("active")) {
count++;
if (this.classList.contains("active") > 1) {
function proceedButton() {
document.getElementById("pButton").style.display = "visible";
}
} else {
document.getElementById("pButton").style.display = "block";
}
} else {
count--;
}
disp.innerHTML = count;
})
}
function proceedButton() {
var x = document.getElementById("payment-section");
if (x.style.display === "none") {
x.style.display = "block";
}
}
.button {
background-color: #423F3E;
height: 30px;
width: 30px;
margin: 5px;
border-radius: 10px;
border: none;
float: left;
}
.button.active {
background-color: #F7EA00 !important;
}
<div class="seats-layout">
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
<div class="row">
<input type="button" id="button1" class="button" />
<input type="button" id="button2" class="button" />
<input type="button" id="button3" class="button" />
</div>
</div>
<p> Button Clicked <span id="display">0</span> Times</p>
<input type="submit" value="Proceed" onclick="proceedButton()" id="pButton" class="proceed-button" />
```
<div id="payment-section" style="display: none">
<h1>Payment</h1>
</div>
```

Demo page
use document.querySelectorAll to returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
function proceedButton() {
var x = document.getElementById("payment-section");
var item_click = document.querySelectorAll('.active').length;
if (item_click>1) {
x.style.display = "block";
}else{
x.style.display = "none";
}
}

The if/else statement

I want to show a suitable button with if/else statement. For example, when none of the checkboxes are checked I want to display the disabled button, but when one or more checkboxes are checked I want to display another button.
Js
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
Html
<input type="checkbox" id="checkAll" style="margin-left:-10px" />
<input type="checkbox" style="margin-left:5px" />
<input type="checkbox" style="margin-left:5px" />
<div class="ml-2">
if(checked){
<button type="button" class="btn btn-danger ">Delete</button>
}else{
<button type="button" class="btn btn-outline-danger" disabled>Delete</button>
}
</div>

As long the button is right next to the other button you don't even need no javascript for that.
Thats of course quite a simple approach and can easily be 'hacked' via the Inspector. But if you do it with Javascript it can be hacked as well.
.checkbox + .button {
opacity: 0.5;
pointer-events: none;
}
.checkbox:checked + .button {
display: none;
}
.checkbox + .button + .button2 {
display: none;
}
.checkbox:checked + .button + .button2 {
display: block;
}
<input type="checkbox" class="checkbox">
<div class="button">Button 1</div>
<div class="button2">Button 2</div>

When none of the checkboxes are checked I want to display the disabled button, but when 1 or more checkbox are checked I want to display another button.
You can include both buttons in the html with one hidden - then in your js show/hide them as appropriate.
A basic implementation would to check:
if ($("input:checkbox:checked").length == 0) {
then use .show() .hide() on each of the buttons as required.
This can be made more streamlined, eg using .toggle($("input:checkbox:checked").length == 0) but this is to show the explicit if/else as requested in the title.
$("#checkAll").change(function() {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
$("input:checkbox").change(function() {
if ($("input:checkbox:checked").length == 0) {
$(".ml-2>.btn-danger").hide();
$(".ml-2>.btn-outline-danger").show();
} else {
$(".ml-2>.btn-outline-danger").hide();
$(".ml-2>.btn-danger").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />
<div class="ml-2">
<button type="button" class="btn btn-danger " style='display:none;' >Delete</button>
<button type="button" class="btn btn-outline-danger" disabled>Delete (disabled)</button>
</div>

If - as outlined - you want to have two buttons (rather than, say, one button where you change the classes and properties) you can:
listen for when one of the checkboxes changes
then check the collective state of all the checkboxes
then, depending on that collective state, apply:
Element.classList.add('show')
Element.classList.remove('show')
to show and hide the respective buttons.
Working Example:
// DECLARE VARIABLES
const btnDanger = document.querySelector('.btn-danger');
const btnOutlineDanger = document.querySelector('.btn-outline-danger');
const checkBoxes = document.querySelectorAll('input[type="checkbox"]');
// FUNCTION: REVIEW CHECKBOXES
const reviewCheckBoxes = () => {
let allUnchecked = true;
checkBoxes.forEach((checkBox) => {
if (checkBox.checked) {
allUnchecked = false;
}
});
if (allUnchecked === true) {
btnDanger.classList.remove('show');
btnOutlineDanger.classList.add('show');
}
else if (allUnchecked === false) {
btnDanger.classList.add('show');
btnOutlineDanger.classList.remove('show');
}
}
// ADD EVENT LISTENERS TO EACH OF THE CHECKBOXES
checkBoxes.forEach((checkBox) => {
checkBox.addEventListener('change', reviewCheckBoxes);
});
input[type="checkbox"] {
margin-left: 10px;
}
.btn-danger,
.btn-outline-danger,
input[type="checkbox"]#checkAll {
margin-left: 10px;
}
.btn-danger,
.btn-outline-danger {
display: none;
}
.btn-danger.show,
.btn-outline-danger.show {
display: inline-block;
}
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" />
<button type="button" class="btn btn-danger ">Delete</button>
<button type="button" class="btn btn-outline-danger show" disabled>Delete</button>

Trying to add Go Back Function. (Previous) Button to my Multi Steps Form using Javascript

I am trying to add Back buton to my existing Script without success so far. I like this script because it also has a Validation process. I tried another code that has Previous button working, but no validation which made my project useless..
Here is my Javascript code below:
<script>
//Validation & Steps
$(document).ready(function ()
{
var navListItems = $('div.setup-panel div a');
allWells = $('.setup-content');
allNextBtn = $('.nextBtn');
allPrevBtn = $('.prevBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href'));
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function ()
{
var curStep = $(this).closest(".setup-content");
curStepBtn = curStep.attr("id");
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn +
'"]').parent().next().children("a");
curInputs = curStep.find("input[type='url'],input[type='checkbox'],input[type='text'],input[type='email'],input[type='radio']"); //
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++)
{
if (!curInputs[i].validity.valid)
{
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
});
// Back button click action
allPrevBtn.click(function()
{
curStepBtn = curStep.attr("id");
curStep = curStep - 2;
allPrevBtn.trigger('click');
nextStepWizard.removeAttr('disabled').trigger('click');
allWells.hide();
})
$('div.setup-panel div a.btn-success').trigger('click');
});
</script>

I was returned to source of your code, this is full code with back button:
<html >
<head>
<meta charset="utf-8"/>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<style>
body{
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allPrevBtn = $('.prevBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
allPrevBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
</script>
</head>
<body>
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-warning prevBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>

Jquery fuction on multiple elements

As you can see in the Snippet code below, I have two buttons and one input for each container. Now, The input calc and sums up the number of clicks on the 2 buttons in the same container. But, it's only working for the first container. How can I make it work for each container separately without setting an ID for each group of inputs?
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = +$('.val1').val();
var val2 = +$('.val2').val();
$('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

First get the parent of the clicked element, then search for the .valx elements only within this parent.
$('.click').click(function (e) {
var $parent = $(e.currentTarget).parent();
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});
This way, you can have as many counters as you want.
Update:
You can also add the +1 feature in the same click event. Like so:
$('.click').click(function (e) {
var $input = $(e.currentTarget);
var $parent = $input.parent();
// Value ++
$input.val($input.val() + 1);
// Set the total count
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});

Got it working for you!
Use $(this).parent().find();
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = + $(this).parent().find('.val1').val();
var val2 = + $(this).parent().find('.val2').val();
$(this).parent().find('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

Here is the Solution for You:
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.val1').click(function() {
var val1 = +$(this).val();
var val2 = +$($(this).siblings('.val2')).val();
$($(this).siblings('.count')).val(val1+val2);
});
$('.val2').click(function() {
var val1 = +$($(this).siblings('.val1')).val();
var val2 = +$(this).val();
$($(this).siblings('.count')).val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

How to change value of an input with buttons

I have a form in which I want the user to be able to set the value in 15 minute increments with the use of two buttons.
Here is what I have so far:
<div class="form-group">
<label class="control-label " for="time">Authorisation Duration</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control" id="time" name="time" value="00:00">
<span class="input-group-btn">
<button class="btn btn-info" type="button">+ 15 Minutes</button>
<button class="btn btn-danger" type="button">- 15 Minutes</button>
</span>
</div>
</div>
I am wondering how to go about making it change the value according to which button is pressed. Also, how to I make sure it does not go into the negative.
Thank you in advance.

An example with native functions ( stepUp() & stepDown() ):
function incr() {
document.getElementById("myTime").stepUp(15);
}
function decr() {
document.getElementById("myTime").stepDown(15);
}
Time: <input type="time" id="myTime" value="16:32:55">
<p>Click the button to increment the value of the time field by 10 minutes (each time you click).</p>
<button onclick="incr()">+ 15</button>
<button onclick="decr()">- 15</button>
An example ( with jQuery ) - integers:
// Set counter default to zero
var counter = 0
// Display total
$("#counter").text(counter);
// When button is clicked
$("#add").click(function(){
//Add 10 to counter
counter = counter + 15;
// Display total
$("#counter").text(counter);
});
//Subtract
$("#subtract").click(function(){
counter = counter - 15;
$("#counter").text(counter);
});
// Reset
$("#reset").click(function(){
counter = 0;
$("#counter").text(counter);
});
body{
font-size: 1.5em;
font-family: 'Oswald', sans-serif;
font-weight: 700;
}
.button_group{
width: 100%;
display: flex;
}
button {
font-family: 'Oswald', sans-serif;
font-size: 1em;
font-weight: 300;
border: 0;
padding: 1em 2em;
margin: 0.5em 0;
width: 100%;
background: rgba(0,0,0,0.1);
-webkit-transition:.2s;
}
button:nth-child(2){
margin: 0.5em;
}
button:hover{
background: rgba(0,0,0,0.3);
}
button:active{
background: rgba(0,0,0,0.5);
}
#add:active{
-webkit-transform:translateY(-1em);
}
#subtract:active{
-webkit-transform:translateY(1em);
}
#counter{
font-size: 3em;
text-align: center;
width: 100%;
display block;
background: rgba(0,0,0,0.1);
padding: 2em 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter"></div>
<div class="button_group">
<button id="subtract">- 15</button>
<button id="reset">Reset</button>
<button id="add">+ 15</button>
</div>
Sources:
CSS tricks
Good example ( with Bootstrap & jQuery )
Example

This should help
$(function()
{
$(".btn-inc").click(function(){
var v = $(this).data("val");
$("#time").val(addMinutes($("#time").val(), v));
});
/*http://stackoverflow.com/questions/13338960/add-20-minutes-in-string-time-and-populate-it-in-the-textbox-or-alert-it*/
function addMinutes(time/*"hh:mm"*/, minsToAdd/*"N"*/) {
function z(n){
return (n<10? '0':'') + n;
}
var bits = time.split(':');
var mins = bits[0]*60 + (+bits[1]) + parseInt(minsToAdd);
if(mins < 0) return time;
return z(mins%(24*60)/60 | 0) + ':' + z(mins%60);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label " for="time">Authorisation Duration</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control" id="time" name="time" value="00:00">
<span class="input-group-btn">
<button class="btn-inc btn btn-info" data-val="15" type="button">+ 15 Minutes</button>
<button class="btn-inc btn btn-danger" data-val="-15" type="button">- 15 Minutes</button>
</span>
</div>
</div>

You can use native html5 time input:
<input type="time" step="900">
Try it:
<input type="time" step="900">
The disadvantage is that is bad supported on Firefox and Safari so you can use this as alternative:
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="15" step="5">