Response title
This is preview!
Move this topic
[jQuery] Will this code enable & disable a submit button?
in Using jQuery
•
14 years ago
Hi, all...
Will the "onInvalid" and "onValid" lines in the code below work
to enable & disable a submit button?
Rick
$(document).ready(function(){
onInvalid: function(form) {
$(form).find("input[@type=submit").attr("disabled",
"disabled");
};
onValid: function(form) {
$(form).find("input[@type=submit").attr("disabled", "");
};
$("#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) })
});
$("#Calculate").click(function() { return
CalculateMortgage(); });
});
Replies(14)
Leave a comment on littlecooldude's reply
Hmmm... can't get it to enable/disable the submit button at all... with
either solution.
Would the code I showed you be likely to work with this code?
<script type="text/javascript">
function CalculateMortgage(){
var Params = {};
$("input:text").each(function(){
Params[$(this).attr("name")] = $(this).val();
});
$.post("callpage_Validate_Mortgage_Inputs.cfm", Params,
function(data){
$("#Result").empty().append(data);
});
return false;
}
$(document).ready(function(){
onInvalid: function(form) {
$("input:submit",form).attr("disabled","disabled");
};
onValid: function(form) {
$("input:submit",form).attr("disabled","");
};
$("#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) })
});
$("#Calculate").click(function() { return CalculateMortgage(); });
});
</script>
The submit button code is:
<INPUT ID="Calculate" Name="Calculate" Type="Submit" Value="Calculate">
Any further thoughts on how this can be done?
Thanks,
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Sean Catchpole
Sent: Monday, April 16, 2007 1:44 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Will this code enable & disable a submit button?
Hi Rick,
Leave a comment on rfaircloth's reply
Leave a comment on littlecooldude's reply
> Why are you declaring functions inside of your $(document).ready
That was just a hangover from where I pulled that code... originally it was
part of Jorn's Validation plug-in...
Since you've created an actual function called "toggleSubmit" to toggle the
button,
how would I trigger that function, say, after this code, *if* the data
return from the
post is a string? (In other words, the posted data was found to be
Invalid...
How would it be combined with this code:
$("#Principal").blur(function(){
$.post("callpage_Validate_Mortgage_Inputs.cfm",
{principal:$("#Principal").val()},
function (data) {$("#Result_Principal").empty().append(data) } ) });
Pseudo-code:
If, after the post (above), the posted data was Invalid, toggle the
button to a
state of "disabled"...
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Sean Catchpole
Sent: Monday, April 16, 2007 7:33 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Will this code enable & disable a submit button?
Rick,
> onInvalid: function(form) {
Did you mean onInvalid = function(form){
Why are you declaring functions inside of your $(document).ready() ?
Below I've attached working code, give it a try:
~Sean
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Toggle Submit</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="main.css" type="text/css" title='main'
media="screen" />
<style type="text/css">
* { margin:0px; padding:0px; }
img { border:0px; }
a {
outline:none;
display:block;
margin:14px;
font:14pt Calibri, Arial, sans-serif;
color:#000;
}
body { text-align:center; margin:30px; }
</style>
<script type="text/javascript"
src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript">
var enabled = true;
toggleSubmit = function(form){
if(enabled)
$("input:submit",form).attr("disabled","disabled");
else
$("input:submit",form).attr("disabled","");
enabled = !enabled;
}
</script>
</head><body>
<form>
<a href="javascript:toggleSubmit($('form'));">Toggle Submit</a>
<input type="submit" value="Submit">
</form>
</body></html>
Leave a comment on rfaircloth's reply
Actually to re-enable a disabled element you need to remove the
disabled attribute altogether - use:
$(form).find("input[@type=submit").removeAttr("disabled"); or $
("input:submit").removeAttr("disabled"); for short.
Leave a comment on daemach's reply
You would probably need to return a more complex object from the
server that contained a boolean in addition to your text. Structures
and JSON/WDDX work well for that kind of thing. You would then use
the boolean to trigger an if () statement. I
Leave a comment on daemach's reply
Check out this demo, Daemach, which uses Sean's
code below:
http://bodaford.whitestonemedia.com/html/test_toggle_submit_button.cfm
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Daemach
Sent: Monday, April 16, 2007 10:11 PM
To: jQuery (English)
Subject: [jQuery] Re: Will this code enable & disable a submit button?
Actually to re-enable a disabled element you need to remove the
disabled attribute altogether - use:
$(form).find("input[@type=submit").removeAttr("disabled"); or $
("input:submit").removeAttr("disabled"); for short.
Leave a comment on rfaircloth's reply
> You would probably need to return a more complex object from the
> server that contained a boolean in addition to your text. Structures
> and JSON/WDDX work well for that kind of thing. You would then use
> the boolean to trigger an if () statement.
Ummm.... could you elaborate a little on that? :o)
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Daemach
Sent: Monday, April 16, 2007 10:14 PM
To: jQuery (English)
Subject: [jQuery] Re: Will this code enable & disable a submit button?
You would probably need to return a more complex object from the
server that contained a boolean in addition to your text. Structures
and JSON/WDDX work well for that kind of thing. You would then use
the boolean to trigger an if () statement. I
Leave a comment on rfaircloth's reply
On 4/17/07, Rick Faircloth <Rick@whitestonemedia.com>
Leave a comment on limodou's reply
Thanks for the test!
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of limodou
Sent: Monday, April 16, 2007 10:58 PM
To: jquery-en@googlegroups.com
Subject: [jQuery] Re: Will this code enable & disable a submit button?
Leave a comment on rfaircloth's reply
You would need to create a structure with structNew() (http://
builder.com.com/5100-6387-1049890.html), and add 2 nodes to it. Your
boolean result from the validation and the html you're returning now.
Then use cfwddx to convert the structure to wddx and return that
instead of the html you're returning now. Download the javascript
wddx.js from openwddx.org (extract the zip, read the docs - reference/
javascript/ wddxdeserializer, include the wddx.js file) and change
your callbacks from this:
function(data){ $("#Result").empty().append(data); }
to something like this:
function(data){
var ds = new WddxDeserializer();
var obj = ds.deserialize(data);
// now you have a javascript object (obj) that looks the same as the
cold fusion structure
if (obj.myBooleanValidateSuccessfulFromColdFusion == true) {
("input:submit").removeAttr("disabled");
} else {
("input:submit").attr("disabled","disabled");
}
$("#Result").empty().append(obj.myHTMLFromColdFusion);
}
More info here: http://livedocs.adobe.com/coldfusion/7/htmldocs/00001523.htm#1207113
Leave a comment on daemach's reply
Thanks, Daemach...
I'll check into it!
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Daemach
Sent: Wednesday, April 18, 2007 12:28 AM
To: jQuery (English)
Subject: [jQuery] Re: Will this code enable & disable a submit button?
You would need to create a structure with structNew() (http://
builder.com.com/5100-6387-1049890.html), and add 2 nodes to it. Your
boolean result from the validation and the html you're returning now.
Then use cfwddx to convert the structure to wddx and return that
instead of the html you're returning now. Download the javascript
wddx.js from openwddx.org (extract the zip, read the docs - reference/
javascript/ wddxdeserializer, include the wddx.js file) and change
your callbacks from this:
function(data){ $("#Result").empty().append(data); }
to something like this:
function(data){
var ds = new WddxDeserializer();
var obj = ds.deserialize(data);
// now you have a javascript object (obj) that looks the same as the
cold fusion structure
if (obj.myBooleanValidateSuccessfulFromColdFusion == true) {
("input:submit").removeAttr("disabled");
} else {
("input:submit").attr("disabled","disabled");
}
$("#Result").empty().append(obj.myHTMLFromColdFusion);
}
More info here:
http://livedocs.adobe.com/coldfusion/7/htmldocs/00001523.htm#1207113
Leave a comment on rfaircloth's reply
Let me back up and ask a question, Daemach, before I get much
deeper into trying to enable/disable a form button...
Is it worth the extra work? Is it something you've used or do you
find it unnecessary?
Rick
-----Original Message-----
From: jquery-en@googlegroups.com [mailto:jquery-en@googlegroups.com] On
Behalf Of Daemach
Sent: Wednesday, April 18, 2007 12:28 AM
To: jQuery (English)
Subject: [jQuery] Re: Will this code enable & disable a submit button?
You would need to create a structure with structNew() (http://
builder.com.com/5100-6387-1049890.html), and add 2 nodes to it. Your
boolean result from the validation and the html you're returning now.
Then use cfwddx to convert the structure to wddx and return that
instead of the html you're returning now. Download the javascript
wddx.js from openwddx.org (extract the zip, read the docs - reference/
javascript/ wddxdeserializer, include the wddx.js file) and change
your callbacks from this:
function(data){ $("#Result").empty().append(data); }
to something like this:
function(data){
var ds = new WddxDeserializer();
var obj = ds.deserialize(data);
// now you have a javascript object (obj) that looks the same as the
cold fusion structure
if (obj.myBooleanValidateSuccessfulFromColdFusion == true) {
("input:submit").removeAttr("disabled");
} else {
("input:submit").attr("disabled","disabled");
}
$("#Result").empty().append(obj.myHTMLFromColdFusion);
}
More info here:
http://livedocs.adobe.com/coldfusion/7/htmldocs/00001523.htm#1207113
Leave a comment on rfaircloth's reply
Well, I wouldn't go about it like you are ;) I would do everything on
the client side - if the validation is done there you already have the
boolean so it's a simple matter to disable an element. To answer your
question directly, if you want to keep someone from submitting a form
you either have to disable a button or kill the submit event itself.
The button provides better user feedback so yes in my opinion it's a
good idea.
In your case, since you're trying to learn ajax, I would say it's
still worth learning how to pass complex data between the browser and
server. It will help you immensely long term. JSON is more compact,
but you have WDDX available to you in cf 4.5 and at the end of the day
they both accomplish the same purpose.
Leave a comment on daemach's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to rfaircloth's discussion
{"z2973414":[14737000000212835],"z923127":[14737000000212827,14737000000212829,14737000000212839,14737000000212845],"z268316":[14737000000212817,14737000000212821,14737000000212825,14737000000212831,14737000000212833,14737000000212837,14737000000212841,14737000000212843],"z2950564":[14737000000212819,14737000000212823]}