Hi Rick,
It doesn't look like you are associating your CalculateMortgage function
with your form. Your form doesn't have and action, so when you click on
the 'Calculate' button it is simply submitting itself to itself and just
refreshes the page.
You need something like this:
<script type="text/javascript">
// Define CalculateMortgage in the global scope so that it is always
accessible
function CalculateMortgage(){
var Params = {};
// select all inputs of type text
$("input:text").each(function(){
Params[$(this).attr("name")] = $(this).val();
}); // closes input:text function
// "post" the form. The Param object mimics form fields
$.post("callpage_Validate_Mortgage_Inputs.cfm", Params,
function(data){
// this is the processing function.
// append what you get back to the element with ID = Result
after clearing its contents
$("#Result").empty().append(data);
} // closes post function
); // closes ( after .post
// Add this line
return false; // stop the forms default action
} // closes { after CalculateMortgage = function() {
//$.validator.defaults.debug = true;
$(document).ready(function(){
$("#Principal").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",
{principal:$("#Principal").val()},
function (data) {$("#Result_Principal").empty().append(data)
} ) });
$("#Interest").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",
{interest:$("#Interest").val()},
function (data) {$("#Result_Interest").empty().append(data)
}) });
$("#Years").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",{years:$("#Years").val()},
function (data) {$("#Result_Years").empty().append(data) })
});
// add this line
$("#Calculate").click(function() { return CalculateMortgage();
});
});
</script>
Regards,
David
Rick Faircloth wrote:
Yes... unfortunately.
At first, I took the approach of complete client-side validation
with jQuery and Jorn's Validation Plug-in and the final mortgage payment
being computed by CF.
Got that working perfectly, but thn I decided it would be better to use
jQuery
to validate the form fields (onblur) using CF, which I've accomplished.
The problem now is, I can't figure out how to get my results back when
submitting the form via the "Calculate" button.
My "CalculatePayment" form doesn't seem to be doing anything and I can't
figure out why.
If I can just get the final calculation processed and returned to the
calling page,
I'll be finished with this technique...got any ideas?
Rick
-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Rey Bango
Sent: Thursday, March 15, 2007 10:23 PM
To: jQuery Discussion.
Subject: Re: [jQuery] Can't figure out how to put this all together...
Rick,
Isn't this the same issue you've been working on for awhile now?
Rey...
Rick Faircloth wrote:
Hi, all...
I'm trying to validate form inputs (individually onblur) and post a form
to calculate a mortgage payment.
This method involves jQuery on the client side
and ColdFusion on the server side for validation.
I've worked out the validation with no lingering problems.
I can't figure out how to submit the form.
Online demo:
http://bodaford.whitestonemedia.com/html/trial_field_validation.cfm
Here's the jQ I've got:
<script type="text/javascript">
// Define CalculateMortgage in the global scope so that it is always
accessible
function CalculateMortgage(){
var Params = {};
// select all inputs of type text
$("input:text").each(function(){
Params[$(this).attr("name")] = $(this).val();
}); // closes input:text function
// "post" the form. The Param object mimics form fields
$.post("callpage_Validate_Mortgage_Inputs.cfm", Params,
function(data){
// this is the processing function.
// append what you get back to the element with ID = Result
after clearing its contents
$("#Result").empty().append(data);
} // closes post function
); // closes ( after .post
} // closes { after CalculateMortgage = function() {
//$.validator.defaults.debug = true;
$(document).ready(function(){
$("#Principal").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",
{principal:$("#Principal").val()},
function (data) {$("#Result_Principal").empty().append(data)
} ) });
$("#Interest").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",
{interest:$("#Interest").val()},
function (data) {$("#Result_Interest").empty().append(data)
}) });
$("#Years").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",{years:$("#Years").val()},
function (data) {$("#Result_Years").empty().append(data) })
});
});
</script>
Here's my HTML:
<Form id="Calculate_Mortgage" Name="Calculate_Mortgage">
<table>
<tr>
<td>
<Span id="Result_Principal"></span>
</td>
</tr>
<tr>
<td>
Principal: <INPUT ID="Principal" Name="Principal"
Type="Text" Value="" Size="20" Class="TextInput01">
</td>
</tr>
<tr>
<td>
<Span id="Result_Interest"></span>
</td>
</tr>
<tr>
<td>
Interest: <INPUT ID="Interest" Name="Interest"
Type="Text" Value="" Size="20" Class="TextInput01">
</td>
</tr>
<tr>
<td>
<Span id="Result_Years"></Span>
</td>
</tr>
<tr>
<td>
Years: <INPUT ID="Years" Name="Years" Type="Text"
Value="" Size="20" Class="TextInput01">
</td>
</tr>
<tr>
<td>
Result:<Span ID="Result"></Span>
</td>
</tr>
<tr>
<td>
<INPUT ID="Calculate" Name="Calculate" Type="Submit"
Value="Calculate">
</td>
</tr>
</table>
</Form>
And here's my CF validation and Calculate Payment page:
<CFSET Principal_Error_Message = "">
<CFSET Interest_Error_Message = "">
<CFSET Years_Error_Message = "">
<CFIF IsDefined("Form.Principal")>
<CFIF Len(Trim(Form.Principal)) and Not
IsNumeric(REReplace(Form.Principal, "[.$,]","","All"))>
<CFSET Principal_Error_Message = "Please enter a
valid dollar amount.">
<CFELSEIF Not Len(Trim(Form.Principal))>
<CFSET Principal_Error_Message = "Please enter a
value for the Principal.">
</CFIF>
<CFOUTPUT>#Principal_Error_Message#</CFOUTPUT>
</CFIF>
<CFIF IsDefined("Form.Interest")>
<CFIF Len(Trim(Form.Interest)) and Not
IsNumeric(REReplace(Form.Interest, "[.]","","All"))>
<CFSET Interest_Error_Message = "Please enter a
valid Interest Rate.">
<CFELSEIF Not Len(Trim(Form.Interest))>
<CFSET Interest_Error_Message = "Please enter a
value for the Interest Rate.">
</CFIF>
<CFOUTPUT>#Interest_Error_Message#</CFOUTPUT>
</CFIF>
<CFIF IsDefined("Form.Years")>
<CFIF Not Len(Trim(Form.Years))>
<CFSET Years_Error_Message = "Please enter the
number of years.">
</CFIF>
<CFIF Len(Trim(REReplace(Form.Years, "[0-9]","","All")))
and Not IsNumeric(REReplace(Trim(Form.Years),
"[0-9]","","All"))>
<CFSET Years_Error_Message = "Please enter a valid
number for years.">
</CFIF>
<CFOUTPUT>#Years_Error_Message#</CFOUTPUT>
</CFIF>
<CFIF IsDefined("Form.Principal")
and IsDefined("Form.Interest")
and IsDefined("Form.Years")>
<CFIF Principal_Error_Message is ""
and Interest_Error_Message is ""
and Years_Error_Message is "">
<CFSET Interest = Form.Interest/(12*100)>
<CFSET
Payment=Form.Principal*(Interest/(1-(1+Interest)^-(Form.Years*12)))>
<CFCONTENT Reset="yes"><CFOUTPUT>#DollarFormat(Payment)#</CFOUTPUT>
<CFELSE>
<CFOUTPUT>0</CFOUTPUT>
</CFIF>
</CFIF>
Why won't this work together?
How can I put it together?
I'd love to use a submitHandler with Jorn's Validation plug-in
to prevent submission of the form as long as there are errors.
Is that possible?
Thanks for any help!
Rick
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
