I have a personal details form that alows you to enter a certain number of dependants which is determined by
the JSP application.
The first dependant is visible and
the user has
the option to add dependants up to
the maximum number. All other dependants are hidden by default and are displayed when a user clicks
the 'Add another dependant button'.
When
the maximum number of dependants has been reached
the button is greyed out and a message is generated via jQuery and displayed to tell
the user exactly this.
The issue i am having is when
the maximum number of dependants has been reached
the message is displayed but then
the user can click
the button to add more dependants and
the message keeps on generating.
I thought unbinding
the click event would sort this but it seems to still be able to generate a second message.
Here is
the function i wrote to generate
the message:
// Dependant message function
function maxDependMsg(msgElement) {
// number of children can change per product, needs to be dynamic
// count number of dependants in HTML
var $dependLength = $("div.dependant").length;
// add class maxAdd to grey out Button
// create maximum dependants message and display, will not be created if JS turned off
$(msgElement)
.addClass("maxAdd")
.after($('<p>')
.addClass("maxMsg")
.append("
The selected web policy
does not offer cover for more than " + $dependLength + " children, please contact our customer advisers if you wish discuss alternative policies available."));
}
There is a hyperlink with a click event attached like so:
$("a.add").click(function(){
// Show
the next hidden table on clicking add child button
$(this).closest('form').find('div.dependant:hidden:first').show();
// Get
the number of hidden tables
var $hiddenChildren = $('div.dependant:hidden').length;
if ($hiddenChildren == 0) {
// save visible state of system message
$.cookies.set('cpqbMaxDependantMsg', 'visible');
// show system message that you can't add anymore dependants than what is on page
maxDependMsg("a.add");
$(this).unbind("click");
}
// set a cookie for
the visible state of all child tables
$('div.dependant').each(function(){
var $childCount = $(this).index('div.dependant');
if ($(this).is(':visible')) {
$.cookies.set('cpqbTableStatus' + $childCount, 'visible');
} else {
$.cookies.set('cpqbTableStatus' + $childCount, 'hidden');
}
});
return false;
});
All of
the cookies code is for state saving when users are going back and forward through
the process.
