Here's the latest version:
http://stronggroup.com/test/analysis.htm
The "outer" web page loads the html web form generated by WFB. At the tail end of the load, after the form is loaded, my jquery form handler for the form's "submit" method is defined. It appears to work, and reaches the end of the code on either a successful entry (after which it displays the results page with graphs), or blocks the transition to the results page on user error -- this accomplished by having the form's event handler return "false".
BUT...as before, once it has returned "false", I cannot get the form (maybe the button?) to be properly enabled again, and the user can't trying submitting again with fixed entries.
My jquery handler:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#selectedTarget').load('hlv_calc_form.html', function() {
$("form").submit(function(){
var errmsg = '';
var result = true;
var yourage = parseInt($('#item2_number_1').val());
var numkids = parseInt($('#item20_select_1').val());
alert('Entered On Submit handler');
// compare Age is greater than or equal to Retirement Age
if ( yourage >= $('#item4_number_1').val() ) {
errmsg += 'Age must be less than retirement age\n';
};
// If married, and...
if (
( $('input[name=married]:radio:checked').val() === 'Yes') &&
// ...Spouse Age is greater than or equal to Spouse Retirement Age
( $('#item17_number_1').val() >= $('#item13_number_1').val() )
)
{
errmsg += 'Spouse age must be less than spouse retirement age\n';
};
// Must be older than any children (purposely dropping through subsequent cases)
switch (numkids)
{
case 6:
if ( yourage < ($('#item34_number_1').val()) ) {
errmsg += 'Your 6th child appears to be older than you\n';
}
case 5:
if ( yourage < ($('#item33_number_1').val()) ) {
errmsg += 'Your 5th child appears to be older than you\n';
}
case 4:
if ( yourage < ($('#item32_number_1').val()) ) {
errmsg += 'Your 4th child appears to be older than you\n';
}
case 3:
if ( yourage < ($('#item31_number_1').val()) ) {
errmsg += 'Your 3rd child appears to be older than you\n';
}
case 2:
if ( yourage < ($('#item30_number_1').val()) ) {
errmsg += 'Your 2nd child appears to be older than you\n';
}
case 1:
if ( yourage < ($('#item23_number_1').val()) ) {
errmsg += 'Your 1st child appears to be older than you\n';
}
};
if (errmsg.length > 0) {
errmsg = 'Please fix the following and try again:\n\n' + errmsg;
alert(errmsg);
result = false;
}
else {
alert('no errors!');
result = true;
}
alert('about to return a result = ' + result);
return result;
});
});
});
</script>
<script>
$(document).ready(function(){
$('#selectedTarget').load('hlv_calc_form.html', function() {
$("form").submit(function(){
var errmsg = '';
var result = true;
var yourage = parseInt($('#item2_number_1').val());
var numkids = parseInt($('#item20_select_1').val());
alert('Entered On Submit handler');
// compare Age is greater than or equal to Retirement Age
if ( yourage >= $('#item4_number_1').val() ) {
errmsg += 'Age must be less than retirement age\n';
};
// If married, and...
if (
( $('input[name=married]:radio:checked').val() === 'Yes') &&
// ...Spouse Age is greater than or equal to Spouse Retirement Age
( $('#item17_number_1').val() >= $('#item13_number_1').val() )
)
{
errmsg += 'Spouse age must be less than spouse retirement age\n';
};
// Must be older than any children (purposely dropping through subsequent cases)
switch (numkids)
{
case 6:
if ( yourage < ($('#item34_number_1').val()) ) {
errmsg += 'Your 6th child appears to be older than you\n';
}
case 5:
if ( yourage < ($('#item33_number_1').val()) ) {
errmsg += 'Your 5th child appears to be older than you\n';
}
case 4:
if ( yourage < ($('#item32_number_1').val()) ) {
errmsg += 'Your 4th child appears to be older than you\n';
}
case 3:
if ( yourage < ($('#item31_number_1').val()) ) {
errmsg += 'Your 3rd child appears to be older than you\n';
}
case 2:
if ( yourage < ($('#item30_number_1').val()) ) {
errmsg += 'Your 2nd child appears to be older than you\n';
}
case 1:
if ( yourage < ($('#item23_number_1').val()) ) {
errmsg += 'Your 1st child appears to be older than you\n';
}
};
if (errmsg.length > 0) {
errmsg = 'Please fix the following and try again:\n\n' + errmsg;
alert(errmsg);
result = false;
}
else {
alert('no errors!');
result = true;
}
alert('about to return a result = ' + result);
return result;
});
});
});
</script>
If anyone is curious, you can look at the "analysis" page of the website above. If you open the html in an editor, you can scroll down to a Load event where the "hlv_calc_form" is loaded into a div on the page, followed by the javascript above being loaded as well.
I'm hoping somebody has time, patience and some experience with this to share! I could really use another pair of eyes on this, as I really seem stuck right now. I know, btw, that the general technique -- returning false or true in a form's event handler -- is a perfectly valid approach, and works on many simple cases and demos. I'm guessing something is going on in the innards of WFB that I just don't know about, that is mucked up when I return "false" in the submit event handler.
Thx in advance for any perspective on this!
