Excellent -- I'll set aside this more complex script for a bit, and try binding in something tiny like a single "here I am!" alert box so I can see if my binding is working, and then build back the functionality after that.
Quick update:
I'm now doing what I proposed a little while ago: adding my validation code at the end of the event that loads the html form created by WFB:
------ all my code in here --------
I tried a short version of this, putting in an alert -- and it appears to be working (maybe). Essentially: after the "outer doc" loads (ready event) the form is loaded, and after the form is loaded, my javascript function is defined. In theory, the form should be fully loaded by then, so my references to objects in the form should work at this point.
Next challenge -- either my assumption above is WRONG and the form isn't loaded yet, or I'm not selecting the form elements correctly and/or referring to their values correctly. But I am making progress....
I'm now doing what I proposed a little while ago: adding my validation code at the end of the event that loads the html form created by WFB:
<script type="text/javascript">
$(document).ready(function(){
$('#selectedTarget').load('hlv_calc_form.html',function(){
$("#docContainer").on("submit",function(){.....
$(document).ready(function(){
$('#selectedTarget').load('hlv_calc_form.html',function(){
$("#docContainer").on("submit",function(){.....
------ all my code in here --------
I tried a short version of this, putting in an alert -- and it appears to be working (maybe). Essentially: after the "outer doc" loads (ready event) the form is loaded, and after the form is loaded, my javascript function is defined. In theory, the form should be fully loaded by then, so my references to objects in the form should work at this point.
Next challenge -- either my assumption above is WRONG and the form isn't loaded yet, or I'm not selecting the form elements correctly and/or referring to their values correctly. But I am making progress....
Update 9/7 (Saturday for heaven's sake -- but I DO want to get this working!):
Still get closer to success. The outer doc loads, inner doc (the WFB form) loads - and then the jquery "on submit" function is successfully defined against objects in the form. My script is happily reading most of the fields -- just struggling still with the value of the radio buttons....
UPDATE! I finally figured out some working jquery syntax to read the radio button's checked value (yay!):
In the web form generated by CC WFB, the radio button for which I'm trying to check the value is defined as:
working syntax to read the "married" radio button's checked value:
(big sigh of relief here -- coming down the home stretch!).
Onward and upward!
Still get closer to success. The outer doc loads, inner doc (the WFB form) loads - and then the jquery "on submit" function is successfully defined against objects in the form. My script is happily reading most of the fields -- just struggling still with the value of the radio buttons....
UPDATE! I finally figured out some working jquery syntax to read the radio button's checked value (yay!):
In the web form generated by CC WFB, the radio button for which I'm trying to check the value is defined as:
<div style="FILTER: ; PADDING-BOTTOM: 0px; PADDING-LEFT: 28px; PADDING-RIGHT: 0px; PADDING-TOP: 20px"
id="item11" class="fb-item fb-33-item-column fb-two-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item11_label_0">Are you married?</label>
</div>
<div class="fb-radio">
<label id="item11_0_label"><input id="item11_0_radio" name="married" type="radio" required data-hint="" value="Yes" /><span id="item11_0_span" class="fb-fieldlabel">Yes</span></label>
<label id="item11_1_label"><input id="item11_1_radio" name="married" type="radio" required value="No" /><span id="item11_1_span" class="fb-fieldlabel">No</span></label>
</div>
</div>
id="item11" class="fb-item fb-33-item-column fb-two-column">
<div class="fb-grouplabel">
<label style="DISPLAY: inline" id="item11_label_0">Are you married?</label>
</div>
<div class="fb-radio">
<label id="item11_0_label"><input id="item11_0_radio" name="married" type="radio" required data-hint="" value="Yes" /><span id="item11_0_span" class="fb-fieldlabel">Yes</span></label>
<label id="item11_1_label"><input id="item11_1_radio" name="married" type="radio" required value="No" /><span id="item11_1_span" class="fb-fieldlabel">No</span></label>
</div>
</div>
working syntax to read the "married" radio button's checked value:
$('input[name=married]:radio:checked').val()
(big sigh of relief here -- coming down the home stretch!).
Onward and upward!
Check boxes can be fun.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Yes -- it's all fun! I'm probably *losing* money on this project -- but all of the techniques I've learned are reusable, and will make future projects far easier. My "toolbox" has grown tremendously with all of this. As much time as it's taken for me to learn by doing (with a LOT of time googling and reading "how to" websites), in the end, it's very gratifying! I think I should have a finished site to share pretty soon... Thx again for all the interim help! (and I don't doubt that I'll be coming back for more!).
I'll be interested in your code. Always like it when another user gets geeked on JQuery.

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
OK...I think I'm down to one last issue. I wait to load the form into a div on my page until the page is "ready". I wait until the form is fully loaded before I define the validation routine. I can successfully read all the fields, drop downs and radio buttons and determine whether there are errors on the form. All good so far.
Next - if there ARE errors, I have to prevent the form from actually being submitted -- I need to display errors (an alert works just fine for this), and after the user clicks "ok" in the error alert, let him/her correct the errors and click the submit button again.
I've tried preventing submission two ways:
1) have the form "on submit" handler return false
2) last action of the "on submit handler is to call "preventDefault()"
Both of these will, in fact, prevent the default submit action from occurring. The problem is that AFTER this, the user may go and correct the input - but clicking the submit button does nothing after that -- unless I refresh the page. It appears the either returning false from the first run through the on submit handler, or calling preventDefault(), leaves the form in a "broken" state until it's reloaded.
I've found a bunch of posts online with other folks having similar experiences. I know I'm missing something here, because this is a pretty basic kind of functionality to include. Any suggestions on this one?
BTW: the end of the my submit handler looks like the following (and bear in mind, "result" is set to "true" at the top of the function):
Thanks in advance for any insight into this!
Next - if there ARE errors, I have to prevent the form from actually being submitted -- I need to display errors (an alert works just fine for this), and after the user clicks "ok" in the error alert, let him/her correct the errors and click the submit button again.
I've tried preventing submission two ways:
1) have the form "on submit" handler return false
2) last action of the "on submit handler is to call "preventDefault()"
Both of these will, in fact, prevent the default submit action from occurring. The problem is that AFTER this, the user may go and correct the input - but clicking the submit button does nothing after that -- unless I refresh the page. It appears the either returning false from the first run through the on submit handler, or calling preventDefault(), leaves the form in a "broken" state until it's reloaded.
I've found a bunch of posts online with other folks having similar experiences. I know I'm missing something here, because this is a pretty basic kind of functionality to include. Any suggestions on this one?
BTW: the end of the my submit handler looks like the following (and bear in mind, "result" is set to "true" at the top of the function):
if (errmsg.length > 0) {
errmsg = 'Please fix the following errors:\n\n' + errmsg;
alert(errmsg);
result = false;
};
return result;
});
});
});
errmsg = 'Please fix the following errors:\n\n' + errmsg;
alert(errmsg);
result = false;
};
return result;
});
});
});
Thanks in advance for any insight into this!
Why can't you check for errors before the click submit?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's possible, but would wind up messier for the user. There's nothing forcing the user to enter fields in any sequence. User might update his/her own age, the age of one to six children, and his/her retirement age, and there are validation rules spanning different combinations of these, all relative to each other. I can't use keystroke events, because the fields involved each allow one or two digit values. If I use on blur, I'll wind up showing errors as the user exits the first field but hasn't gotten to the second one yet. It's conceivable to do it this way, but I can make it a lot cleaner if I do the form level validation when the submit button is clicked.
I know it doable... Just haven't made sense of the jquery for it yet.
I know it doable... Just haven't made sense of the jquery for it yet.
Ok I think I'm understanding a little better. I just didn't know how many values you were dealing with or what you were actually validating. I did some validation on submit but I used $SESSION so I could keep the original form values.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.