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.
