How to write the handler for buttons using JQUERY
-
Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties. in case of links this code JQuery works fine:
$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){ // Event of link-click "necxt step"
if (current_step == steps.length-2) { // checking - will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});$("a.back").click(function(){ // Click event on a small window
if (current_step == 1) { // checking - will it the next step is last
$(this).hide(); // hide the link "back"
}$("form input[type=submit]").hide(); // hide the button "OK"
$("a.next").show(); //hide the link "Next step"
current_step--; // increase the counter of the current slide
changeStep(current_step);// change a step
});
function changeStep(i) { // the function of step changing
$(steps).hide(); // hide all steps
$(steps[i]).show(); // show the current
}
});
But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back" My HTML-code
Page
step 1
Name:
step 2
Sourname:
step 3
E-mail:
-
Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties. in case of links this code JQuery works fine:
$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){ // Event of link-click "necxt step"
if (current_step == steps.length-2) { // checking - will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});$("a.back").click(function(){ // Click event on a small window
if (current_step == 1) { // checking - will it the next step is last
$(this).hide(); // hide the link "back"
}$("form input[type=submit]").hide(); // hide the button "OK"
$("a.next").show(); //hide the link "Next step"
current_step--; // increase the counter of the current slide
changeStep(current_step);// change a step
});
function changeStep(i) { // the function of step changing
$(steps).hide(); // hide all steps
$(steps[i]).show(); // show the current
}
});
But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back" My HTML-code
Page
step 1
Name:
step 2
Sourname:
step 3
E-mail:
-
Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties. in case of links this code JQuery works fine:
$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){ // Event of link-click "necxt step"
if (current_step == steps.length-2) { // checking - will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});$("a.back").click(function(){ // Click event on a small window
if (current_step == 1) { // checking - will it the next step is last
$(this).hide(); // hide the link "back"
}$("form input[type=submit]").hide(); // hide the button "OK"
$("a.next").show(); //hide the link "Next step"
current_step--; // increase the counter of the current slide
changeStep(current_step);// change a step
});
function changeStep(i) { // the function of step changing
$(steps).hide(); // hide all steps
$(steps[i]).show(); // show the current
}
});
But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back" My HTML-code
Page
step 1
Name:
step 2
Sourname:
step 3
E-mail:
If you want to use button in place of link , then you have to use id of the button and use .click handler. For instance, you have a button like this
Next
then your click handler could be $('#btnNext').click (.....
-
Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties. in case of links this code JQuery works fine:
$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){ // Event of link-click "necxt step"
if (current_step == steps.length-2) { // checking - will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});$("a.back").click(function(){ // Click event on a small window
if (current_step == 1) { // checking - will it the next step is last
$(this).hide(); // hide the link "back"
}$("form input[type=submit]").hide(); // hide the button "OK"
$("a.next").show(); //hide the link "Next step"
current_step--; // increase the counter of the current slide
changeStep(current_step);// change a step
});
function changeStep(i) { // the function of step changing
$(steps).hide(); // hide all steps
$(steps[i]).show(); // show the current
}
});
But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back" My HTML-code
Page
step 1
Name:
step 2
Sourname:
step 3
E-mail:
you want to use your input button in place of link , then you can use id of the input button and use .click handler. Use HTML instance
of this
and Script
$("#btnNext").click(function () { // Event of link-click "necxt step"
if (current_step == steps.length - 2) { // checking - will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});do same as it is for another button