Find Out Which Form Does The Clicked Item Belongs From
Solution 1:
It's quite a breeze if you use jQuery:
$(function() {
// Attach click handler to your buttons
$("button, input[type=submit]").click(function(e) {
e.preventDefault();
// Hide the correct formvar thisForm = $(this).parents("form").hide();
// Show the form after this one
thisForm.nextAll("form:first").show();
});
});
That'll handle hiding and showing the forms for you too. It assumes your buttons are either <button> or <input type="submit">, and your form elements are within the same parent.
Of course, if you have buttons elsewhere on the page which don't have this behaviour, then you need to add a class such as formContinue to your buttons of interest, and change the third line in the code above to:
$("button.formContinue, input[type=submit].formContinue").click(function(e) {
Solution 2:
Simplest might be to give each such "continue button" a different id, which makes it trivial to identify (e.g. you could have the id be the form's id concatenated with the string '_cnt' or the like). But if you're using jquery, the .parent() method lets you trivially-easily find an object's "parent", so in that case I'd recommend just making the continue buttons immediate children of their respective forms. (If you're not using some good JS framework, like the popular jquery, to tide you across browser incompatibilities &c, consider doing so... they're really useful!-).
Solution 3:
For every input element you can obtain the parent form by element.form. From inside every element you can locate the next sibling by element.nextSibling.
Here's the math:
<!DOCTYPE html><htmllang="en"><head><title>SO question 3436720</title><script>functionshowNext(form) {
var next = nextSibling(form, 'FORM');
form.style.display = 'none';
if (next) next.style.display = 'block';
}
functionnextSibling(element, tagname) {
var next = element.nextSibling;
while (next && next.tagName != tagname) next = next.nextSibling;
return next;
}
</script><style>.hide { display: none; }
</style></head><body><form>Form 1<buttononclick="showNext(this.form)">next</button></form><formclass="hide">Form 2<buttononclick="showNext(this.form)">next</button></form><formclass="hide">Form 3<buttononclick="showNext(this.form)">next</button></form><formclass="hide">Form 4<inputtype="submit"></form></body></html>You may be just starting with JavaScript. But I'd recommend to end up using a JavaScript library which insanely eases DOM manipulation, like jQuery. Here's how it can look like with help of it:
<!DOCTYPE html><htmllang="en"><head><title>SO question 3436720 with jQuery</title><scriptsrc="http://code.jquery.com/jquery-latest.min.js"></script><script>
$(document).ready(function() {
$('button.next').click(function() {
$(this).closest('form').hide().next('form').show();
});
});
</script><style>.hide { display: none; }
</style></head><body><form>Form 1<buttonclass="next">next</button></form><formclass="hide">Form 2<buttonclass="next">next</button></form><formclass="hide">Form 3<buttonclass="next">next</button></form><formclass="hide">Form 4<inputtype="submit"></form></body></html>
Post a Comment for "Find Out Which Form Does The Clicked Item Belongs From"