(keyup.enter) triggered twice | Angular - javascript

So I have an HTML with increment and decrement functionality on button/enter click. Button (click) works as expected however on (keyup.enter) increment function is triggered twice.
When I press Tab + enter on keyboard (keyup.enter) and (click) both events are triggered which is calling the function twice
<div class="container">
<div class="row">
<div class="col-sm" style="text-align:center">
<h2> Increment/Decrement Functionality</h2>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm">
Increment All <button (click)="incrementAll()" (keyup.enter)="incrementAll()"> +
</button>
Decrement All
<button (click)="decrementAll()" (keyup.enter)="decrementAll()"> - </button>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
<input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
<button (click)="decrement(i)" (keyup.enter)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
</button>
<button (click)="increment(i)"
(keyup.enter)="increment(i)"> +
</button>
</div>
</div>
Typescript:
increment(index) {
this.countNumbers[index].number += 1;
}
decrement(index) {
if (this.countNumbers[index].number > 0) {
this.countNumbers[index].number -= 1;
}
}
incrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
this.countNumbers[i].number += 1;
}
}
decrementAll() {
for (let i = 0; i < this.countNumbers.length; i++) {
if (this.countNumbers[i].number > 0) {
this.countNumbers[i].number -= 1;
}
}
DEMO

By default, an HTML button can be "clicked" on with enter (e.g. for people who use the keyboard to navigate the form).
In your code, if a button is focused (if you've clicked on it before), and you press enter, these things happen:
The default "click" event is registered, so you get an increment.
your (keyup.enter)="incrementAll()" is registered, so you get a second increment.
A quick fix is to get rid of (keyup.enter)="incrementAll()":
<div class="container">
<div class="row">
<div class="col-sm" style="text-align:center">
<h2> Increment/Decrement Functionality</h2>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm">
Increment All <button (click)="incrementAll()"> +
</button>
Decrement All
<button (click)="decrementAll()"> - </button>
</div>
</div>
<div class="row" style="margin: 40px">
<div class="col-sm" *ngFor="let num of countNumbers; let i = index" style="margin: 20px">
<input name="countNumbers_{{i}}" type="number" [(ngModel)]="num.number" #ngModel>
<button (click)="decrement(i)"[ngClass]="{'disabledIcon': num.number === 0 }"style="margin:20px"> -
</button>
<button (click)="increment(i)"> +
</button>
</div>
</div>
</div>

Related

Maximum call stack size exceeded when click on the card to trigger button inside div

I have a card detail order, I want the whole card to be clickable and it will trigger a button inside the card to bring up the modal details. I've made the code as below but there is a Maximum call stack size exceeded error and also my console.log('clicked') is triggered hundred times.
how to handle this? please help me
$(document).ready(function(){
$(".order-list-detail-container").each(function() {
$(this).on("click", function() {
console.log('clicked')
$(this).find('.order-detail-trigger').click()
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-list-detail-container" style="margin-bottom:30px;">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T123456</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1200</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 6", RBG6</div>
<div class="product-catalog-code">RBG6</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">3 Product</span>
<div class="product-weight">(8 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-list-detail-container">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T127890</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1800</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 8", RBG8</div>
<div class="product-catalog-code">RBG8</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">2 Product</span>
<div class="product-weight">(3 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Working example. You only need to make trigger for a button when you click Container. And when you click button - it's default button behavior. In both ways you will now have hx-get working.
$(document).ready(function() {
$('.order-list-detail-container').on('click.div', function() {
$('.order-detail-trigger').trigger('click.button');
console.log('clicked');
});
Update 1: If you want different buttons and cards to do different stuff, add numbered ID's for buttons and DIV's use this code:
$('#order-list-detail-container-1').on('click.div',function(){
$('#order-detail-trigger-1').trigger('click.button' );
console.log('1 button or DIV clicked');
});
$('#order-list-detail-container-2').on('click.div',function(){
$('#order-detail-trigger-2').trigger('click.button' );
console.log('2 button or DIV clicked');
});
// duplicate the code block for amount of buttons with Divs you are going to have
Update 2: Added functionality to create ID dynamically to every button and DIV. So you won't need to add any ID's manually when you will create more cards! Also, every button or div click will be counted as individual click and button 1 click won't trigger button 2 clicks:
$('.order-detail-trigger').each(function(index) {
$(this).attr('id', 'button-' + index);
});
$('.order-list-detail-container').each(function(index) {
$(this).attr('id', 'container-' + index);
});
$( document ).ready(function() {
$('.order-list-detail-container').each(function(index) {
$('#container-' + index).on('click.div',function() {
$('#button-' + index).trigger('click.button');
let test = $('#container-' + index).attr('id');
let test2 = $('#button-' + index).attr('id');
//console.log('clicked');
console.log(test + ' clicked!');
console.log(test2 + ' AUTO clicked!');
});
});
});
Uncomment //console.log('clicked'); to see that clicking DIV or Button - it only happens 1 time:

Like Count button + Card layout not working properly

enter image description here
I am supposed to have three cards on large screens, 2 in tablets, 1 in mobile and all without hard coded html. Only through javascript. However, when I try to add three cards in the same row, it takes the same movie for the entire row and then the next one for the second row and so on..
Also the button only works for the first card...
There must be smth wrong in my loop..
This is my code so far:
var parsedMovies = JSON.parse(movies);
for (let i = 0; i < parsedMovies.length; i++) {
document.getElementById("cards").innerHTML += `
<div class="card-group">
<div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
<div class="row g-0 ">
<div class="col-md-4 ">
<img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${parsedMovies[i].title}</h5>
<p class="card-text">${parsedMovies[i].plot}</p>
<p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
<div class="voting">
<button id="likebtn">
<i>👍</i>
</button>
<input type="number" id="input1" value="${parsedMovies[i].likes}">
<button id="dislikebtn">
<i>👎</i>
</button>
<input type="number" id="input2" value="${parsedMovies[i].dislikes}">
</div>
</p>
</div>
</div>
</div>
</div>
<div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
<div class="row g-0 ">
<div class="col-md-4 ">
<img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${parsedMovies[i].title}</h5>
<p class="card-text">${parsedMovies[i].plot}</p>
<p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
<div class="voting">
<button id="likebtn">
<i>👍</i>
</button>
<input type="number" id="input1" value="${parsedMovies[i].likes}">
<button id="dislikebtn">
<i>👎</i>
</button>
<input type="number" id="input2" value="${parsedMovies[i].dislikes}">
</div>
</p>
</div>
</div>
</div>
</div>
<div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
<div class="row g-0 ">
<div class="col-md-4 ">
<img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${parsedMovies[i].title}</h5>
<p class="card-text">${parsedMovies[i].plot}</p>
<p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
<div class="voting">
<button id="likebtn">
<i>👍</i>
</button>
<input type="number" id="input1" value="${parsedMovies[i].likes}">
<button id="dislikebtn">
<i>👎</i>
</button>
<input type="number" id="input2" value="${parsedMovies[i].dislikes}">
</div>
</p>
</div>
</div>
</div>
</div>
</div>
`;
let likebtn = document.querySelector("#likebtn");
let dislikebtn = document.querySelector("#dislikebtn");
let input1 = document.querySelector("#input1");
let input2 = document.querySelector("#input2");
likebtn.addEventListener("click", () => {
input1.value = parseInt(input1.value) + 1;
});
dislikebtn.addEventListener("click", () => {
input2.value = parseInt(input2.value) + 1;
});
Your loop is creating multiple time the same ids... An id must be unique.
So, remove all id in the HTML "template" and use a class (I used like-action below) on both the like and dislike buttons.
Then, set ONE event handler for those button, since the action is the same (increment by one). See below:
let likebtns = document.querySelectorAll(".like-action");
likebtns.forEach((button)=>{
button.addEventListener("click", (element) => {
input = element.nextElementSibling
input.value = parseInt(input.value) + 1;
});
});
Have a look at nextElementSibling.

Javascript faceted search

I have this page I'm working on, I'm trying to make a facted search for it. (only issue is I have no json as I'm looping through via django.)
What I currently have is this:
var wood = []
$(".checkbar").click(function() {
id = this.id
$('.spe_' + id).toggleClass("filteredlabel");
$('.flr').addClass("hide");
$('.flr_spe_' + id).removeClass("flr hide").addClass("flrcheck");
if (this.classList[1] == 'checked') {
if (wood.length > 0) {
debugger;
$('.flr_spe_' + this.id).removeClass("hide").addClass("flr");
for (var i = 0; i < wood.length; i++)
if (wood[i] === this.id) {
if (wood.length > 1) {
$('.flr_spe_' + this.id).addClass("hide");
}
if (wood.length == 1) {
$('.flr').removeClass("hide");
}
wood.splice(i, 1);
break;
}
}
$(this).toggleClass("checked");
} else {
$(this).toggleClass("checked");
wood.push(this.id)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbar" id="1">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Oak (1)
</div>
</div>
<div class="checkbar" id="2">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Pine (1)
</div>
</div>
<div class="col-md-4 flr flr_spe_1 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/st_tobacco2x.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Oak</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flr flr_spe_2 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/straightwood_CfuTJb4.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Pine</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
The problem is when I have to start adding more checkboxes to filter on. If i add another set of checkboxes for range, how would I go about making this so that they filter correctly together?
e.g. if I check Old Wood, And then Check Pine, How can I get just the results that have "Old Wood" and "Pine" and not return Oak?
Many Thanks

Removal of added div should result in decrease of counter and next subsequent divs should be renamed as per the order

On click of add button, I can able to add 7 divs in an order. And when I try to remove a div in between, then, sebsequent divs should be renamed/updated as per the order.
My HTML
<div class="container">
<div class="row">
<div id="driver<%=i%>" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%=i%>" aria-expanded="false">
<a class="accordion-toggle driver-title<%=i%>">Driver <%=i%></a>
<div class="pull-right"><span class="glyphicon glyphicon-plus"></span></div>
</h4>
</div>
<div id="collapse<%=i%>" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname<%=i%>" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm looping this content 7 times so that I can add divs 7 times in a sequential order like 1 2 3 4 5 6 7.
My javascript code is as follows.
var valueItemCount = 2;
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var isRemove = false;
var isAdded = false;
$('#hdItemCount').val(valueItemCount);
function addValueItem() {
//alert(isRemove);
//$('#errmessage').html("");
console.log("valueItemCount addValueItem : "+valueItemCount);
console.log("isRemove : "+isRemove);
if(valueItemCount <8) {
if (isRemove && !isAdded) ++valueItemCount;
// alert(valueItemCount);
$('#driver' + valueItemCount).show();
++valueItemCount;
$('#hdItemCount').val(valueItemCount);
isAdded = true;
} else {
//$('#errmessage').html("Maximm Limit Reached");
}
// alert(isAdded);
console.log("isAdded : "+isAdded);
}
function removeValueItem(cnt) {
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
if (isAdded && !isRemove) {--valueItemCount;}
alert(cnt);
console.log(" removeValueItem cnt : "+cnt);
console.log("valueItemCount removeValueItem : "+valueItemCount);
var count=Number(cnt)+1
//alert('count1111'+count);
$('#driver' + cnt).hide();
if (isAdded && isRemove) { --valueItemCount; }
$('#hdItemCount').val(valueItemCount);
//alert(count);
console.log("count : "+count);
var i;
for (i = count; i <8; i++) {
var j=i-1;
$('#'+i).attr('id',j);
$('#driver' + i).attr('id','driver'+j);
$('.driver-title' + i).text('Driver '+j);
}
isRemove = true;
console.log(" isRemove remove : "+isRemove);
console.log(" isAdded remove : "+isAdded);
if (valueItemCount == 2) {
isRemove = false;
isAdded = false;
}
}
if($('#hdItemCount').val()!='2'){
valueItemCount =$('#hdItemCount').val();
}
var itemcnt = '<%=cntvalue%>';
for(var i=valueItemCount;i<=8;i++){
$('#driver'+i).hide();
}
for (var i=1;i<valueItemCount;i++){
console.log("valueItemCount : "+valueItemCount);
$('#driver'+i).show();
$('#hdItemCount').val(valueItemCount);
}
With this code, I can able to add divs upto 7 which is correct. when I try to delete one particular div in between the order, subsequent divs got renamed but later, i'm unable to add / remove further. Remove is working only once.
Can anyone help on this.
Can add up to 7 drivers in total by clicking add Icon
Removing any driver removes particular driver, thereby reordering all Ids.
Removing each driver, will give space to add another driver at last, such that their total count won't exceed 7;
function addValueItem() {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
var templateDiv = $('.driver-template').clone(true);
templateDiv.removeClass('driver-template hidden').addClass('container driverContainer');
templateDiv.clone(true).insertAfter($('div.driverContainer:last'));
reAssignIDs();
}
}
function removeValueItem(elem) {
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length == 1) {
addValueItem();
}
$(elem).closest('div.driverContainer').remove();
reAssignIDs();
}
function reAssignIDs() {
var Index = 1;
$('div.driverContainer div.knowledge[id*=driver]').each(function() {
if (!$(this).hasClass('hidden')) {
$(this).attr('id', 'driver' + Index);
$(this).find('h4').attr('data-target', '#collapse' + Index);
$(this).find('h4 a').text('Driver ' + Index);
$(this).find('div[id*=collapse]').attr('id', 'collapse' + Index);
$(this).find('input[id*=drname]').attr('id', 'drname' + Index);
$(this).find('.remove_wrap_but a.btn-yellow').attr('id', Index);
Index++;
}
});
$(".glyphicon.glyphicon-plus").addClass('hidden');
if ($('div.driverContainer div.knowledge[id*=driver]:not(.hidden)').length < 7) {
$(".glyphicon.glyphicon-plus:last").removeClass('hidden');
}
}
$(".panel-title").click(function(e) {
if (!$(e.target).is('.glyphicon.glyphicon-plus'))
$(this).closest('.row').find('.panel-collapse').toggleClass('collapse');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="driver-template hidden">
<div class="row">
<div id="driver" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver X</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container driverContainer">
<div class="row">
<div id="driver1" class="panel panel-default knowledge">
<div class="panel-heading2">
<h4 class="panel-title collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1" aria-expanded="false">
<a class="accordion-toggle driver-title1">Driver 1</a>
<div class="pull-right"><span class="glyphicon glyphicon-plus" onclick="addValueItem()"></span></div>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="gap gap-mini"></div>
<div class="form-group">
<label class="col-sm-4 control-label">Full Name</label>
<div class="col-sm-6">
<input type="text" id="drname1" name="drname" class="form-control" placeholder="Full Name">
</div>
</div>
<div class="remove_wrap_but">
- remove driver
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
*Please note that I've created a template div with class 'driver-template'. Whils clicking 'Add' option, I just inserted this template at end, and renamed all ids. You can even keep 7 drivers initially using your loop. Further working like removing and adding will work accordingly using this logic.*
If still this is not what you are required, please explain more.

Progress bar with step answers in a form

I try to make my progress bar step when I click on a next button from a survey.
But I think I missed something in the actual code.
My survey is composed with slider that validate the answer in a output after the click button.
Could be great if help, thanks !
Here is my html :
<form class="form" name="frm" method="post" action="quest_A_rec.asp" onKeydown="testClavier();" >
<input name="ID" value="<%=Data_Questions("ID_Resultat")%>" type="hidden">
<div class="col-sm-12">
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent" id="question">
<div class="left">
<p class="requestBig"><%=Data_Questions("LibQuestion")%></p>
</div>
<output><%=initOutput%></output>
</div>
</div>
</div>
<div class="mySlider">
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<div class="col-sm-3" id="jamais">
<p><%=session("LibLow")%><br />
|</p>
</div>
</div>
</div>
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<input type="range" value="<%=valBornes("valMin")-1%>" step="1" min="<%=valBornes("valMin")%>" max="<%=valBornes("valMax")%>">
<br />
</div>
</div>
<div class="row col-sm-offset-2">
<div class="col-sm-8 cent">
<div class="col-sm-3" id="toujours">
<p>|<br />
<%=libBornes("libHigh")%></p>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<p class="avancement"><%=GetTexteFBA("avancement")%></p>
</div>
<div class="col-sm-5">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 boutons">
<div class="col-sm-6 col-sm-push-6">
<button type="button" class="btn myBtnRight" href="<%=urlNext%>" onClick="document.frm.submit();" id="btnNext"><%=GetTexteFBA("btn_valider")%><span class="iconInsideButtonRight icon-chevron-right"></span></button>
<button type="button" class="action submit btn myBtnRight">Submit</button>
</div>
<div class="col-sm-6 col-sm-pull-6">
<button type="button" class="btn myBtnnobs" href="#" role="button" onClick="document.frm_nobs.submit();"><%=GetTexteFBA("btn_nobs")%></button>
here is my JS
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".myBtnRight");
//btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
/*
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
*/
// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});
$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name : "required"
},
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
btnnext.hide();
btnsubmit.show();
}
}

Categories