Response title
This is preview!
Move this topic
[jQuery] form() plugin revisited
in Using jQuery
•
17 years ago
Here's yet another cut at a form submission plugin. This one
has two important qualities; it gathers up the name/value
pairs in strict page order and only provides the submit
button that was actually clicked. This version seems to be
exactly the same as a non-ajax form submission, as far as
a PHP backend is concerned anyway.
http://markc.renta.net/jquery/form_test.html
Usage: $('#form').form('#target');
The idea of the "evaljs" submit button is so that one option
is available that does not redraw over the target, ie; when
checking input variables then a warning can be returned
somewhere else on the page other than the default target ID.
It's only had minimal testing with FF 1.5 and Konqueror does
not seem to recognize event.explicitOriginalTarget so I suspect
it's a Firefox-only DOM event.
Does anyone know of a cross-browser way to detect which submit
button has been clicked ?
$.fn.form = function(target, callback){
return this.submit(function(e){
var a = [];
var doeval = false;
e.preventDefault();
// e.stopPropagation()
for (i = 0; i < this.childNodes.length; i++) {
var o = this.childNodes[i];
if (o.tagName != 'INPUT'
&& o.tagName != 'SELECT'
&& o.tagName != 'TEXTAREA') { continue; }
if ((o.type == 'checkbox'
|| o.type == 'radio') && !o.checked) { continue; }
if (e.explicitOriginalTarget) { // probably FF only
if (o.type == 'submit'
&& o.name != e.explicitOriginalTarget.name) { continue; }
if (e.explicitOriginalTarget.name == 'evaljs') { doeval = true; }
}
a.push(o.name + '=' + encodeURIComponent(o.value));
}
$.xml(this.method||'POST', this.action||'', a.join('&'), function(h){
if (doeval === true) {
$.eval(h.responseText);
} else {
$(target).html(h.responseText).find("script").each(function(){
try {
$.eval(this.text || this.textContent || this.innerHTML);
} catch(e){}
});
}
if (callback) { callback(h); }
});
});
};
--markc
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
has two important qualities; it gathers up the name/value
pairs in strict page order and only provides the submit
button that was actually clicked. This version seems to be
exactly the same as a non-ajax form submission, as far as
a PHP backend is concerned anyway.
http://markc.renta.net/jquery/form_test.html
Usage: $('#form').form('#target');
The idea of the "evaljs" submit button is so that one option
is available that does not redraw over the target, ie; when
checking input variables then a warning can be returned
somewhere else on the page other than the default target ID.
It's only had minimal testing with FF 1.5 and Konqueror does
not seem to recognize event.explicitOriginalTarget so I suspect
it's a Firefox-only DOM event.
Does anyone know of a cross-browser way to detect which submit
button has been clicked ?
$.fn.form = function(target, callback){
return this.submit(function(e){
var a = [];
var doeval = false;
e.preventDefault();
// e.stopPropagation()
for (i = 0; i < this.childNodes.length; i++) {
var o = this.childNodes[i];
if (o.tagName != 'INPUT'
&& o.tagName != 'SELECT'
&& o.tagName != 'TEXTAREA') { continue; }
if ((o.type == 'checkbox'
|| o.type == 'radio') && !o.checked) { continue; }
if (e.explicitOriginalTarget) { // probably FF only
if (o.type == 'submit'
&& o.name != e.explicitOriginalTarget.name) { continue; }
if (e.explicitOriginalTarget.name == 'evaljs') { doeval = true; }
}
a.push(o.name + '=' + encodeURIComponent(o.value));
}
$.xml(this.method||'POST', this.action||'', a.join('&'), function(h){
if (doeval === true) {
$.eval(h.responseText);
} else {
$(target).html(h.responseText).find("script").each(function(){
try {
$.eval(this.text || this.textContent || this.innerHTML);
} catch(e){}
});
}
if (callback) { callback(h); }
});
});
};
--markc
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Replies(51)
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Good work,
However, 2 points:
- i think i'll strip out your form gather function into a seperate
serialize function to maximize the use of it. I'll see if i can put
this into the ajax SVN code.
- You should use "$.param(a)" instead of a.join('&'). Else you have
some issues with multiple selects if i am correct...
Regards,
Gilles
</font></font>
Mark Constable
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Good work,
However, 2 points:
- i think i'll strip out your form gather function into a seperate
serialize function to maximize the use of it. I'll see if i can put
this into the ajax SVN code.
- You should use "$.param(a)" instead of a.join('&'). Else you have
some issues with multiple selects if i am correct...
Regards,
Gilles
</font></font>
Mark Constable
Leave a comment on gilles2's reply
Re: [jQuery] form() plugin revisited
17 years ago
I think it will be better to loop through form.elements rather than
childNodes (as you would need to change it to be recursive if the form
elements aren't direct children).
Maybe you could add an onclick event to each submit button that sets a
variable before the form is submitted? Hopefully this should work:
$.fn.form = function(target, callback){
$("input[@type=\"submit\"]",
this).click(function(){this.form.clicked = this;});
return this.submit(function(e){
var a = [];
var doeval = false;
e.preventDefault();
// e.stopPropagation()
for (i = 0; i < this.elements.length; i++) {
var o = this.elements[i];
if ((o.type == 'checkbox'
|| o.type == 'radio') && !o.checked) continue;
if(o.type == "submit") {
if(this.clicked != o) continue;
if(this.name == 'evaljs') doeval = true;
}
a.push(o.name + '=' + encodeURIComponent(o.value));
}
$.xml(this.method||'POST', this.action||'', $.param(a),function(h){
if (doeval === true) {
$.eval(h.responseText);
} else {
$(target).html(h.responseText).find("script").each(function(){
try {
$.eval(this.text || this.textContent || this.innerHTML);
} catch(e){}
});
}
if(callback){callback(h);}
});
});
};
childNodes (as you would need to change it to be recursive if the form
elements aren't direct children).
Maybe you could add an onclick event to each submit button that sets a
variable before the form is submitted? Hopefully this should work:
$.fn.form = function(target, callback){
$("input[@type=\"submit\"]",
this).click(function(){this.form.clicked = this;});
return this.submit(function(e){
var a = [];
var doeval = false;
e.preventDefault();
// e.stopPropagation()
for (i = 0; i < this.elements.length; i++) {
var o = this.elements[i];
if ((o.type == 'checkbox'
|| o.type == 'radio') && !o.checked) continue;
if(o.type == "submit") {
if(this.clicked != o) continue;
if(this.name == 'evaljs') doeval = true;
}
a.push(o.name + '=' + encodeURIComponent(o.value));
}
$.xml(this.method||'POST', this.action||'', $.param(a),function(h){
if (doeval === true) {
$.eval(h.responseText);
} else {
$(target).html(h.responseText).find("script").each(function(){
try {
$.eval(this.text || this.textContent || this.innerHTML);
} catch(e){}
});
}
if(callback){callback(h);}
});
});
};
Leave a comment on sam.collett's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
Mark,
This looks pretty darn good. As Sam pointed out on the other thread,
you probably want to add support for input images.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
This looks pretty darn good. As Sam pointed out on the other thread,
you probably want to add support for input images.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
> I've updated these 2 links and if you check out the plain version
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
> And lo n behold, an <input type="image"> is NOT a form element!
Leave a comment on malsup's reply
Re: [jQuery] form() plugin revisited
17 years ago
Do any of these solutions fix the optgroup problem?
I had to hack at it myself:
$.fn.gathervalues = function(a) {
this.find("input,textarea,option")
.filter(":enabled")
.each(function() {
if (((this.parentNode.tagName == 'OPTGROUP') ||
(this.parentNode.type == 'select-one') || (this.parentNode.type ==
'select-multiple')) &&
(!this.selected))
return;
if (((this.type == 'radio') || (this.type == 'checkbox')) &&
(!this.checked))
return;
a[this.name || this.id || this.parentNode.name ||
this.parentNode.id || this.parentNode.parentNode.name ||
this.parentNode.parentNode.id] = this.value;
});
return a;
};
I had to hack at it myself:
$.fn.gathervalues = function(a) {
this.find("input,textarea,option")
.filter(":enabled")
.each(function() {
if (((this.parentNode.tagName == 'OPTGROUP') ||
(this.parentNode.type == 'select-one') || (this.parentNode.type ==
'select-multiple')) &&
(!this.selected))
return;
if (((this.type == 'radio') || (this.type == 'checkbox')) &&
(!this.checked))
return;
a[this.name || this.id || this.parentNode.name ||
this.parentNode.id || this.parentNode.parentNode.name ||
this.parentNode.parentNode.id] = this.value;
});
return a;
};
Leave a comment on jshedd1's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Hello Jack,
I thought i'd been following the list quite good, but i didn't see the
optgroup problem i think ;)
If you can elaborate on this problem, i can put the fix into the SVN
version.
Regards,
Gilles
p.s. Does anybody know if the <b>.filter(":enabled")</b> part is
xpath? I am trying to code without xpath, so you can leave that part
out if you wish...
</font></font>
Jack Shedd wrote:
<blockquote cite="mid5C9D2127-0E32-4093-B9A5-33271098E038@pjdoland.com"
type="cite">
<pre wrap="">Do any of these solutions fix the optgroup problem?
I had to hack at it myself:
$.fn.gathervalues = function(a) {
this.find("input,textarea,option")
.filter(":enabled")
.each(function() {
if (((this.parentNode.tagName == 'OPTGROUP') ||
(this.parentNode.type == 'select-one') || (this.parentNode.type ==
'select-multiple')) &&
(!this.selected))
return;
if (((this.type == 'radio') || (this.type == 'checkbox')) &&
(!this.checked))
return;
a[this.name || this.id || this.parentNode.name ||
this.parentNode.id || this.parentNode.parentNode.name ||
this.parentNode.parentNode.id] = this.value;
});
return a;
};
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Hello Jack,
I thought i'd been following the list quite good, but i didn't see the
optgroup problem i think ;)
If you can elaborate on this problem, i can put the fix into the SVN
version.
Regards,
Gilles
p.s. Does anybody know if the <b>.filter(":enabled")</b> part is
xpath? I am trying to code without xpath, so you can leave that part
out if you wish...
</font></font>
Jack Shedd wrote:
<blockquote cite="mid5C9D2127-0E32-4093-B9A5-33271098E038@pjdoland.com"
type="cite">
<pre wrap="">Do any of these solutions fix the optgroup problem?
I had to hack at it myself:
$.fn.gathervalues = function(a) {
this.find("input,textarea,option")
.filter(":enabled")
.each(function() {
if (((this.parentNode.tagName == 'OPTGROUP') ||
(this.parentNode.type == 'select-one') || (this.parentNode.type ==
'select-multiple')) &&
(!this.selected))
return;
if (((this.type == 'radio') || (this.type == 'checkbox')) &&
(!this.checked))
return;
a[this.name || this.id || this.parentNode.name ||
this.parentNode.id || this.parentNode.parentNode.name ||
this.parentNode.parentNode.id] = this.value;
});
return a;
};
Leave a comment on gilles2's reply
Re: [jQuery] form() plugin revisited
17 years ago
Perhaps that is by design as it is the options that are needed (select
is just a container)? It's the W3C way (else why would it be part of
the DOM spec?). It prevents the need for a recursive loop and returns
only what is needed.
HTMLFormElement:
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-40002357
Control Types:
http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#form-controls
Form Submission:
http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#submit-format
is just a container)? It's the W3C way (else why would it be part of
the DOM spec?). It prevents the need for a recursive loop and returns
only what is needed.
HTMLFormElement:
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-40002357
Control Types:
http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#form-controls
Form Submission:
http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#submit-format
Leave a comment on sam.collett's reply
Re: [jQuery] form() plugin revisited
17 years ago
Fairly simple issue:
Toss an optgroup in a select:
<select name="foo" id="foo">
<optgroup label="Bar">
<option value="example">Hello</option>
</optgroup>
</select>
And the select never gets pushed into the array.
Toss an optgroup in a select:
<select name="foo" id="foo">
<optgroup label="Bar">
<option value="example">Hello</option>
</optgroup>
</select>
And the select never gets pushed into the array.
Leave a comment on jshedd1's reply
Re: [jQuery] form() plugin revisited
17 years ago
I've hit upon a situation where I'd like to short curcuit out of an
each() run. here's the situation:
I've got a set of checkboxes on the page. I'd like to tell if they're
all checked or not. Unfortunately, after some testing, I do not think
there is a reliable way to tell this via CSS or XPath selectors. So I
figure I'll just grab all the checkboxes and see if they're checked.
but I'd like to jump out of the run as soon as I discover that one is
not checked. I've got my answer, and I don't want to run through the
rest of the elements. What I've got right now looks kind of like this
(note that this.checkboxes is the results of a $() query):
allSelected: function() {
var allselected = true;
this.checkboxes.each( function() {
if ( !this.checked)
allselected = false;
});
return allselected;
},
but I envision something more like this, where explicitly returning a
false value shortcurcuits the each loop:
allSelected: function() {
var allselected = true;
this.checkboxes.each( function() {
if ( !this.checked) {
allselected = false;
return false;
}
});
return allselected;
},
I've skimmed the jquery source and I don't see anything in particular
that should prevent this from working:
each: function(f) {
for ( var i = 0; i < this.size(); i++ ) {
if( $.apply( this.get(i), f, [i] ) == false )
return this;
return this;
}
thoughts?
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
each() run. here's the situation:
I've got a set of checkboxes on the page. I'd like to tell if they're
all checked or not. Unfortunately, after some testing, I do not think
there is a reliable way to tell this via CSS or XPath selectors. So I
figure I'll just grab all the checkboxes and see if they're checked.
but I'd like to jump out of the run as soon as I discover that one is
not checked. I've got my answer, and I don't want to run through the
rest of the elements. What I've got right now looks kind of like this
(note that this.checkboxes is the results of a $() query):
allSelected: function() {
var allselected = true;
this.checkboxes.each( function() {
if ( !this.checked)
allselected = false;
});
return allselected;
},
but I envision something more like this, where explicitly returning a
false value shortcurcuits the each loop:
allSelected: function() {
var allselected = true;
this.checkboxes.each( function() {
if ( !this.checked) {
allselected = false;
return false;
}
});
return allselected;
},
I've skimmed the jquery source and I don't see anything in particular
that should prevent this from working:
each: function(f) {
for ( var i = 0; i < this.size(); i++ ) {
if( $.apply( this.get(i), f, [i] ) == false )
return this;
return this;
}
thoughts?
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on stephen4's reply
Re: [jQuery] form() plugin revisited
17 years ago
Hi, Stephen,
It's a very good idea. And it behaves just like event handlers!
Franck.
PS: to be JSLint compliant, you must compare the returned value to
false with === and not ==
2006/6/1, Stephen Howard <stephen@enterity.com>:
It's a very good idea. And it behaves just like event handlers!
Franck.
PS: to be JSLint compliant, you must compare the returned value to
false with === and not ==
2006/6/1, Stephen Howard <stephen@enterity.com>:
Leave a comment on franck.marcia's reply
Leave a comment on dean.jquery2's reply
Leave a comment on dean.jquery2's reply
Re: [jQuery] form() plugin revisited
17 years ago
On 5/31/06, Dean Edwards <dean@edwards.name> wrote:
> Jack Shedd
> Jack Shedd
Leave a comment on malsup's reply
Re: [jQuery] form() plugin revisited
17 years ago
Of course beauty is in the eye of the beholder. I never liked the
idea of using exceptions like goto statements.
Mike
idea of using exceptions like goto statements.
Mike
Leave a comment on malsup's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Mike, you got any thoughts on how
to fix this?
Regards,
Gilles
</font></font>
Mike Alsup wrote:
<blockquote
cite="mide7212c670605311756y2b783352y9c3497c898abb768@mail.gmail.com"
type="cite">
<pre wrap="">On 5/31/06, Dean Edwards <a class="moz-txt-link-rfc2396E" href="mailto:dean@edwards.name"><dean@edwards.name></a> wrote:
</pre>
<blockquote type="cite">
<pre wrap="">Jack Shedd
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Mike, you got any thoughts on how
to fix this?
Regards,
Gilles
</font></font>
Mike Alsup wrote:
<blockquote
cite="mide7212c670605311756y2b783352y9c3497c898abb768@mail.gmail.com"
type="cite">
<pre wrap="">On 5/31/06, Dean Edwards <a class="moz-txt-link-rfc2396E" href="mailto:dean@edwards.name"><dean@edwards.name></a> wrote:
</pre>
<blockquote type="cite">
<pre wrap="">Jack Shedd
Leave a comment on gilles2's reply
Re: [jQuery] form() plugin revisited
17 years ago
The hack code I sent earlier fixes it. Just looks to the parent's
parent for the id.
parent for the id.
Leave a comment on jshedd1's reply
Re: [jQuery] form() plugin revisited
17 years ago
Well, that's fine for Prototype, but I'd love to have something in
JQuery too. I'm personally attracted to using 'return' to short
circuit, since it makes sense to my head semantically. I tend to agree
with Mike that using exceptions for things other than errors doesn't
make much sense to me.
-Stephen
Dean Edwards wrote:
> Stephen Howard
JQuery too. I'm personally attracted to using 'return' to short
circuit, since it makes sense to my head semantically. I tend to agree
with Mike that using exceptions for things other than errors doesn't
make much sense to me.
-Stephen
Dean Edwards wrote:
> Stephen Howard
Leave a comment on stephen4's reply
Re: [jQuery] form() plugin revisited
17 years ago
Yes, that works fine for handling optgroups. Thanks, Jack. Note
however that you need to push elements into the array rather than
treat the array as a hash map.
Carrying over from the other thread, this is a possible updated
formValues method. But it still needs integration with what Mark has
done on this thread.
$.fn.formValues = function(sButton) {
var a = [];
var elp = {INPUT:true, TEXTAREA:true, OPTION:true};
$('*', this).each(function() {
// Skip disabled elements
if (this.disabled)
return;
// Skip elements not of the types in elp
if (!elp[this.tagName.toUpperCase()])
return;
var p = this.parentNode.nodeName.toUpperCase();
// Skip non-selected options
if ((p == 'SELECT' || p == 'OPTGROUP') && (!this.selected))
return;
// Skip non-checked nodes
if ((this.type == 'radio' || this.type == 'checkbox') && !this.checked)
return;
// If we come here, everything is fine, so add the data
var n = this.name || this.id || this.parentNode.name || this.parentNode.id;
if (!n && p == 'OPTGROUP')
n = this.parentNode.parentNode.name || this.parentNode.parentNode.id;
a.push({ name: n, value: this.value });
});
// Add submit button if needed
if (sButton && (sButton !== null))
a.push({ name: sButton, value: 'x' });
return a;
};
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
however that you need to push elements into the array rather than
treat the array as a hash map.
Carrying over from the other thread, this is a possible updated
formValues method. But it still needs integration with what Mark has
done on this thread.
$.fn.formValues = function(sButton) {
var a = [];
var elp = {INPUT:true, TEXTAREA:true, OPTION:true};
$('*', this).each(function() {
// Skip disabled elements
if (this.disabled)
return;
// Skip elements not of the types in elp
if (!elp[this.tagName.toUpperCase()])
return;
var p = this.parentNode.nodeName.toUpperCase();
// Skip non-selected options
if ((p == 'SELECT' || p == 'OPTGROUP') && (!this.selected))
return;
// Skip non-checked nodes
if ((this.type == 'radio' || this.type == 'checkbox') && !this.checked)
return;
// If we come here, everything is fine, so add the data
var n = this.name || this.id || this.parentNode.name || this.parentNode.id;
if (!n && p == 'OPTGROUP')
n = this.parentNode.parentNode.name || this.parentNode.parentNode.id;
a.push({ name: n, value: this.value });
});
// Add submit button if needed
if (sButton && (sButton !== null))
a.push({ name: sButton, value: 'x' });
return a;
};
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Re: [jQuery] form() plugin revisited
17 years ago
On 01/06/06, Stephen Howard <stephen@enterity.com>
Leave a comment on dean.jquery2's reply
Re: [jQuery] form() plugin revisited
17 years ago
I'm sorry, I thought I had been clear in my first post. I looked into
the $().each code, and it looked like it was ignoring the return value
from $.apply(). $.apply() in turn returns the value from the funciton
you supply each. It should be a simple matter of paying attention to
that return value, and short circuiting if it's explicitly false (===)
I hope to have time to test this out soon, but if anyone would like to
beat me to it, go right ahead
-Stephen
Dean Edwards wrote:
> On 01/06/06, Stephen Howard <stephen@enterity.com>
the $().each code, and it looked like it was ignoring the return value
from $.apply(). $.apply() in turn returns the value from the funciton
you supply each. It should be a simple matter of paying attention to
that return value, and short circuiting if it's explicitly false (===)
I hope to have time to test this out soon, but if anyone would like to
beat me to it, go right ahead
-Stephen
Dean Edwards wrote:
> On 01/06/06, Stephen Howard <stephen@enterity.com>
Leave a comment on stephen4's reply
Re: [jQuery] form() plugin revisited
17 years ago
On 01/06/06, Stephen Howard <stephen@enterity.com>
Leave a comment on dean.jquery2's reply
Re: [jQuery] form() plugin revisited
17 years ago
from my first post (corrected to use === instead of ==, thanks to
frank). Note, I haven't actually tested it yet
-Stephen
each: function(f) {
for ( var i = 0; i < this.size(); i++ ) {
if( $.apply( this.get(i), f, [i] ) === false )
return this;
return this;
}
Dean Edwards wrote:
> On 01/06/06, Stephen Howard <stephen@enterity.com>
frank). Note, I haven't actually tested it yet
-Stephen
each: function(f) {
for ( var i = 0; i < this.size(); i++ ) {
if( $.apply( this.get(i), f, [i] ) === false )
return this;
return this;
}
Dean Edwards wrote:
> On 01/06/06, Stephen Howard <stephen@enterity.com>
Leave a comment on stephen4's reply
Re: [jQuery] form() plugin revisited
17 years ago
I tested it. It works well... if you don't forget the closing } :-)
Franck.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Franck.
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on franck.marcia's reply
Leave a comment on stephen4's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">As so processed in SVN :0
</font></font>
Mike Alsup
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">As so processed in SVN :0
</font></font>
Mike Alsup
Leave a comment on gilles2's reply
Leave a comment on dean.jquery2's reply
Re: [jQuery] form() plugin revisited
17 years ago
returining something other than false might be a good idea, true. I'm
unclear on what the advantages of being able to return 'continue' are,
since I would assume that is what the each() loop would expect to do
when nothing else is specified?
-Stephen
Dean Edwards wrote:
> Stephen Howard
unclear on what the advantages of being able to return 'continue' are,
since I would assume that is what the each() loop would expect to do
when nothing else is specified?
-Stephen
Dean Edwards wrote:
> Stephen Howard
Leave a comment on stephen4's reply
Leave a comment on dean.jquery2's reply
Re: [jQuery] form() plugin revisited
17 years ago
Sorry, my last post had the wrong code in it. This is what I meant to
post (note that it still needs integration with Mark's stuff and can
probably be improved by others).
$.fn.formValues = function(butt) {
var a = [];
var ok = {INPUT:true, TEXTAREA:true, OPTION:true};
$('*', this).each(function() {
if (this.disabled || this.type == 'submit' || this.type == 'image')
return;
if (!ok[this.nodeName.toUpperCase()])
return;
var par = this.parentNode;
var p = par.nodeName.toUpperCase();
if ((p == 'SELECT' || p == 'OPTGROUP') && !this.selected)
return;
if ((this.type == 'radio' || this.type == 'checkbox') && !this.checked)
return;
var n = this.name || this.id || par.name || par.id;
if (!n && p == 'OPTGROUP' && (par = par.parentNode))
n = par.name || par.id;
a.push({ name: n, value: this.value });
});
if (butt) {
var el = $(butt).get(0);
a.push({ name: el.name || el.id, value: el.value });
}
return a;
};
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
post (note that it still needs integration with Mark's stuff and can
probably be improved by others).
$.fn.formValues = function(butt) {
var a = [];
var ok = {INPUT:true, TEXTAREA:true, OPTION:true};
$('*', this).each(function() {
if (this.disabled || this.type == 'submit' || this.type == 'image')
return;
if (!ok[this.nodeName.toUpperCase()])
return;
var par = this.parentNode;
var p = par.nodeName.toUpperCase();
if ((p == 'SELECT' || p == 'OPTGROUP') && !this.selected)
return;
if ((this.type == 'radio' || this.type == 'checkbox') && !this.checked)
return;
var n = this.name || this.id || par.name || par.id;
if (!n && p == 'OPTGROUP' && (par = par.parentNode))
n = par.name || par.id;
a.push({ name: n, value: this.value });
});
if (butt) {
var el = $(butt).get(0);
a.push({ name: el.name || el.id, value: el.value });
}
return a;
};
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
FWIW this has a slightly cleaner main loop in getForm, and most
importantly, the returned offset values are correct for both
Firefox and Konqueror when clicking on the image submit button.
The issue of using enter/return to submit the form seems to
just naturally work with the first submit button becoming the
default "clicked" button.
$.fn.getForm = function() {
var a = [];
var f = this.get(0);
for (i = 0; i < f.childNodes.length; i++) {
var o = f.childNodes[i];
if (o.disabled || o.type == 'reset' || o.name == undefined
|| (o.type == 'checkbox' && !o.checked)
|| (o.type == 'radio' && !o.checked)) continue;
if (o.type == 'image') {
if (f.clicked != o) continue;
if (o.name == 'evaljs') this.doeval = true;
a.push({name: o.name+'_x', value: f.clicked_x});
a.push({name: o.name+'_y', value: f.clicked_y});
} else if (o.type == 'submit') {
if (f.clicked != o) continue;
if (o.name == 'evaljs') this.doeval = true;
a.push({name: o.name, value: o.value});
} else if (o.type == "select-multiple") {
for (j = 0; j < o.childNodes.length; j++) {
var p = o.childNodes[j];
if (p.selected) a.push({name: o.name, value: p.value});
}
} else {
a.push({name: o.name, value: o.value});
}
}
this.farray = a;
return this;
};
$.fn.putForm = function(target, callback) {
var f = this.get(0);
var a = f.action || '';
var m = f.method || 'POST';
if (this.doeval) {
$.xml(m, a, $.param(this.farray), function(r){$.eval(r.responseText);});
} else if (target && target.constructor == Function) {
$.xml(m, a, $.param(this.farray), target);
} else {
$(target).load(a, this.farray, callback);
}
return this;
};
$.fn.form = function(target, callback){
$('input[@type="submit"],input[@type="image"]', this)
.click(function(ev){
this.form.clicked = this;
if (ev.offsetX != undefined) {
this.form.clicked_x = ev.offsetX;
this.form.clicked_y = ev.offsetY;
} else {
this.form.clicked_x = ev.pageX - this.offsetLeft;
this.form.clicked_y = ev.pageY - this.offsetTop;
}
});
this.submit(function(e){
e.preventDefault();
$(this).getForm().putForm(target, callback);
});
return this;
};
--markc
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
importantly, the returned offset values are correct for both
Firefox and Konqueror when clicking on the image submit button.
The issue of using enter/return to submit the form seems to
just naturally work with the first submit button becoming the
default "clicked" button.
$.fn.getForm = function() {
var a = [];
var f = this.get(0);
for (i = 0; i < f.childNodes.length; i++) {
var o = f.childNodes[i];
if (o.disabled || o.type == 'reset' || o.name == undefined
|| (o.type == 'checkbox' && !o.checked)
|| (o.type == 'radio' && !o.checked)) continue;
if (o.type == 'image') {
if (f.clicked != o) continue;
if (o.name == 'evaljs') this.doeval = true;
a.push({name: o.name+'_x', value: f.clicked_x});
a.push({name: o.name+'_y', value: f.clicked_y});
} else if (o.type == 'submit') {
if (f.clicked != o) continue;
if (o.name == 'evaljs') this.doeval = true;
a.push({name: o.name, value: o.value});
} else if (o.type == "select-multiple") {
for (j = 0; j < o.childNodes.length; j++) {
var p = o.childNodes[j];
if (p.selected) a.push({name: o.name, value: p.value});
}
} else {
a.push({name: o.name, value: o.value});
}
}
this.farray = a;
return this;
};
$.fn.putForm = function(target, callback) {
var f = this.get(0);
var a = f.action || '';
var m = f.method || 'POST';
if (this.doeval) {
$.xml(m, a, $.param(this.farray), function(r){$.eval(r.responseText);});
} else if (target && target.constructor == Function) {
$.xml(m, a, $.param(this.farray), target);
} else {
$(target).load(a, this.farray, callback);
}
return this;
};
$.fn.form = function(target, callback){
$('input[@type="submit"],input[@type="image"]', this)
.click(function(ev){
this.form.clicked = this;
if (ev.offsetX != undefined) {
this.form.clicked_x = ev.offsetX;
this.form.clicked_y = ev.offsetY;
} else {
this.form.clicked_x = ev.pageX - this.offsetLeft;
this.form.clicked_y = ev.pageY - this.offsetTop;
}
});
this.submit(function(e){
e.preventDefault();
$(this).getForm().putForm(target, callback);
});
return this;
};
--markc
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
The loop needs to be recursive to pick up any form elements that
aren't direct children.
aren't direct children.
Leave a comment on sam.collett's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">"</font></font><em>Thanks to Sam
Collett for pointing out some obvious faults
and to Mike Alsup for feedback and ideas, and of course to John
and everyone on the jQuery mailing-list for their patience.</em><font
size="-1"><font face="Tahoma">"
Bah, i was the one started on this function in the first place :(
Anyway; my feedback:
- I suggest you change the first part of the function, so it doesn't
use xpath [@type=..], this way your version is more flexible.
- Why not do the precb before the gathering of the data? One might want
to alter some form data in your precb function before gathering all
values.
</font></font><font size="-1"><font face="Tahoma">
If you could consider dropping xpath selectors, i think i'll put your
version into svn instead of mine.. I might even drop $.fn.serialize
since your function has all in one.
Regards,
Gilles
</font></font>
Mark Constable wrote:
<blockquote cite="mid200606060239.22800.markc@renta.net" type="cite">
<pre wrap="">On Sunday 04 June 2006 16:57, Sam Collett
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">"</font></font><em>Thanks to Sam
Collett for pointing out some obvious faults
and to Mike Alsup for feedback and ideas, and of course to John
and everyone on the jQuery mailing-list for their patience.</em><font
size="-1"><font face="Tahoma">"
Bah, i was the one started on this function in the first place :(
Anyway; my feedback:
- I suggest you change the first part of the function, so it doesn't
use xpath [@type=..], this way your version is more flexible.
- Why not do the precb before the gathering of the data? One might want
to alter some form data in your precb function before gathering all
values.
</font></font><font size="-1"><font face="Tahoma">
If you could consider dropping xpath selectors, i think i'll put your
version into svn instead of mine.. I might even drop $.fn.serialize
since your function has all in one.
Regards,
Gilles
</font></font>
Mark Constable wrote:
<blockquote cite="mid200606060239.22800.markc@renta.net" type="cite">
<pre wrap="">On Sunday 04 June 2006 16:57, Sam Collett
Leave a comment on gilles2's reply
Re: [jQuery] form() plugin revisited
17 years ago
That's a very good plugin you have done. I'm sure a lot of people will
like and use it.
A week in the making.. (or is it longer?)
like and use it.
A week in the making.. (or is it longer?)
Leave a comment on sam.collett's reply
Re: [jQuery] form() plugin revisited
17 years ago
Very nice, Mark. Great test page too! I think it makes sense to
gather the form data and hand it to the precb method; is saves that
method from having to go get it. The data can still be altered by
that function if need be.
Gilles, if xpath remains part of jQ core is there any reason to remove
it from plugins?
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
gather the form data and hand it to the precb method; is saves that
method from having to go get it. The data can still be altered by
that function if need be.
Gilles, if xpath remains part of jQ core is there any reason to remove
it from plugins?
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Leave a comment on gilles2's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-6" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Mark Constable
<html>
<head>
<meta content="text/html;charset=ISO-8859-6" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
Mark Constable
Leave a comment on gilles2's reply
Re: [jQuery] form() plugin revisited
17 years ago
It's a wonderful plugin, Mark.
I just tried the examples, and the simplicity of the code, i.e., the ease of
use, is admirable. I think it will not be difficult at all to incorporate it
into my code, so I'll be using it as soon as the dev/sane goes stable. Or
maybe before. I'll report bugs if I come to notice anyone.
Greetings.
P.D. I've been using jQuery for 10 days and currently there's not any event
handler embedded in my HTML. I am fully satisfied, though trying to get rid
of occasional issues with 'ready' in MSIE. (not related with
document.write).
Arturo
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
I just tried the examples, and the simplicity of the code, i.e., the ease of
use, is admirable. I think it will not be difficult at all to incorporate it
into my code, so I'll be using it as soon as the dev/sane goes stable. Or
maybe before. I'll report bugs if I come to notice anyone.
Greetings.
P.D. I've been using jQuery for 10 days and currently there's not any event
handler embedded in my HTML. I am fully satisfied, though trying to get rid
of occasional issues with 'ready' in MSIE. (not related with
document.write).
Arturo
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on public4's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
Excellent, Mark. That's a keeper.
One thing I've been wondering is if the pre_cb return test should be
more explicit so that it is consistent with how other events are
canceled?
Rather than:
if (!pre_cb(this.fary))
Should it be:
if (pre_cb(this.fary) === false)
Anyway, great job. I'm moving this right into my current project.
Thanks for all the hard work.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
One thing I've been wondering is if the pre_cb return test should be
more explicit so that it is consistent with how other events are
canceled?
Rather than:
if (!pre_cb(this.fary))
Should it be:
if (pre_cb(this.fary) === false)
Anyway, great job. I'm moving this right into my current project.
Thanks for all the hard work.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Re: [jQuery] form() plugin revisited
17 years ago
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Hey Marc,
I see you've splitted your function into 2 seperate functions... Do you
think your version is stable enough to incorporate this into SVN?
Why have you chosen for "fary" (form array??)</font></font><font
size="-1"><font face="Tahoma"> Isn't "this.vars" more obvious to
people trying to debug the code??
Could you be so kind to add (extensive) docs and comments in the code
a-la-a javadoc style? This makes debugging a lot easier and the packer
of jQuery removes all comments on compilation, so it won't hurt the
size of jQuery.
Regards,
Gilles
</font></font>
Sam Collett wrote:
<blockquote
cite="mid49e4e19b0606051008p6313532fl7f63364a5306f292@mail.gmail.com"
type="cite">
<pre wrap="">That's a very good plugin you have done. I'm sure a lot of people will
like and use it.
A week in the making.. (or is it longer?)
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<font size="-1"><font face="Tahoma">Hey Marc,
I see you've splitted your function into 2 seperate functions... Do you
think your version is stable enough to incorporate this into SVN?
Why have you chosen for "fary" (form array??)</font></font><font
size="-1"><font face="Tahoma"> Isn't "this.vars" more obvious to
people trying to debug the code??
Could you be so kind to add (extensive) docs and comments in the code
a-la-a javadoc style? This makes debugging a lot easier and the packer
of jQuery removes all comments on compilation, so it won't hurt the
size of jQuery.
Regards,
Gilles
</font></font>
Sam Collett wrote:
<blockquote
cite="mid49e4e19b0606051008p6313532fl7f63364a5306f292@mail.gmail.com"
type="cite">
<pre wrap="">That's a very good plugin you have done. I'm sure a lot of people will
like and use it.
A week in the making.. (or is it longer?)
Leave a comment on gilles2's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
You've certainly put a lot of work into this. It's come a long way
since your initial post. Well documented too. Perhaps a compressed
version as well?
since your initial post. Well documented too. Perhaps a compressed
version as well?
Leave a comment on sam.collett's reply
Leave a comment on markc's reply
Re: [jQuery] form() plugin revisited
17 years ago
I did a quick and unscientific test in Safari 2.0.3 and it seems to
be working perfect. Opera 9b (mac) however doesn't show alert boxes
but instead behaves exactly like your final example (the plain form)
in every test case. As if javascript is not even on.
Good luck Mark.
be working perfect. Opera 9b (mac) however doesn't show alert boxes
but instead behaves exactly like your final example (the plain form)
in every test case. As if javascript is not even on.
Good luck Mark.
Leave a comment on j_birch's reply
Re: [jQuery] form() plugin revisited
17 years ago
The Opera problem is due to jQuery's $.eval alias. It has nothing to
do with Mark's plugin. That will need to be fixed in jQuery core.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
do with Mark's plugin. That will need to be fixed in jQuery core.
Mike
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Leave a comment on malsup's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to markc's discussion
{"z2655295":[14737000000150553,14737000000150559,14737000000150577,14737000000150579,14737000000150587,14737000000150609,14737000000150623,14737000000150635,14737000000150647],"z2973083":[14737000000150569,14737000000150585,14737000000150591,14737000000150595,14737000000150599,14737000000150605],"z1920328":[14737000000150549,14737000000150565,14737000000150615,14737000000150621,14737000000150641],"z2950203":[14737000000150571,14737000000150597],"z2973208":[14737000000150561,14737000000150567,14737000000150583],"z2973076":[14737000000150545,14737000000150551,14737000000150555,14737000000150557,14737000000150611,14737000000150613,14737000000150617,14737000000150627,14737000000150633,14737000000150639,14737000000150643],"z2973064":[14737000000150547,14737000000150563,14737000000150581,14737000000150601,14737000000150619,14737000000150625,14737000000150629,14737000000150637],"z2973273":[14737000000150631],"z2941064":[14737000000150645],"z2973167":[14737000000150573,14737000000150575,14737000000150589,14737000000150593,14737000000150603,14737000000150607]}
Statistics
- 51 Replies
- 1674 Views
- 0 Followers