[Proto-Scripty] Re: Help me with this
I`m using this script for my wordpress comments form. Here`s the form:
form name=comform action=# method=post id=commentform
div class=input
p
label for=commentType your comment here.../label
textarea name=comment id=comment rows=8 cols=10 class= /
textarea
/p
/div
div class=input
p
label for=authorName (required)/label
input type=text name=author id=author size=22 class=/
/p
/div
div class=input
p
label for=emailEmail (gravatar enabled) (required)/
label
input type=text name=email id=email size=22 class=/
/p
/div
div class=input
p
label for=urlWebsite (optional)/label
input type=text name=url id=url size=22 /
/p
/div
div class=submit
input type=submit name=submit id=sub value=Leave comment /
input type=hidden name=comment_post_ID id=hidden value=
/div
/form
script type=text/javascript
//![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]
/script
The last part, the javascript part, activates the labels on the form
with the #commentform ID.
Basically, i need the url label to be hidden or cleared on submit
because its optional. Everytime i leave it uncompleted , it submits
http://website(optional) to the database.
Sorry about the misunderstanding at the beginning...
At the moment i can`t give you an example of a page, because i haven`t
uploaded my skin or wordpress to my host.
On Jan 18, 1:06 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
(FWIW: Descriptive subjects rather than Help me with this will tend
to be more useful.)
I think I must be misunderstanding the purpose of your script: Labels
aren't submitted when you submit a form, focussed or otherwise.
Labels are a means of connecting descriptive text with form elements,
giving the browser useful information to work with (so that, for
instance, they can interpret a click on a checkbox's label to mean
that you want to change the value of the checkbox; not to mention a
wide variety of assistive technology uses -- screen readers, etc.).
If you can create a **very small, self-contained, but complete**
example of a page with a form that does what it is you don't want it
to do, we can probably help you figure out how to prevent it...
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 18, 12:03 am, Colorblind dust_...@yahoo.com wrote:
Called on form submit, clear all labels so they don't accidentally get
submitted to the server
Something like that
On Jan 18, 1:33 am, kangax kan...@gmail.com wrote:
On Jan 17, 1:18 pm, Colorblind dust_...@yahoo.com wrote:
Hy everyone,
I have the following script :
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return
(l.readAttribute
('for') !== null)}).each(function(l){
Why not just - `$$('label[for]')`?
l.hide();
$(l.readAttribute('for'))._value =
l.innerHTML;
if ($(l.readAttribute('for')).value.empty())
{
$(l.readAttribute('for')).value = $(l.readAttribute
('for'))._value
Executing `$(l.readAttribute('for'))` more than once seems
unnecessary. Why not save it in a variable?
}
$(l.readAttribute('for')).observe
('blur',function(e){if
(Event.element(e).value == '') Event.element(e).value = Event.element
(e)._value;});
$(l.readAttribute('for')).observe
('focus',function(e){if
(Event.element(e).value == Event.element(e)._value) Event.element
(e).value = '';});
});
}
});
I want to write a function from this script that when i press the
You want to write a function from this script. What does that mean?
submit on a form, if an input is focused, it hides/clears it, so it
doesn`t get submitted to the database. Work with the latest Prototype
You can't really track focused elements using native DOM methods.
Instead, you can observe all of the elements for focus/blur events and
mark them as focused accordingly. You can then check which element
is currently focused right before submitting a form.
[...]
--
kangax
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help me with this
I`ve managed to solve the problem a few moments ago...
Here's the final code if someone else wants to run it plus the form :
-
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return (l.readAttribute
('for') !== null)}).each(function(l){
l.hide();
var el = $(l.readAttribute('for'));
el._value = l.innerHTML;
if (el.value.empty()) {
el.value = el._value
}
el.observe('blur',function(e){if(Event.element(e).value ==
'') Event.element(e).value = Event.element(e)._value;});
el.observe('focus',function(e){if(Event.element(e).value
== Event.element(e)._value) Event.element(e).value = '';});
$(el.form).observe( 'submit', (function(thisel) { return function
(e) {
if( thisel.value == thisel._value ) { thisel.value = '' }
}})(el));
});
}});
form name=comform action=# method=post id=commentform
div class=input
p
label for=commentType your comment here.../label
textarea name=comment id=comment rows=8 cols=10 class= /
textarea
/p
/div
div class=input
p
label for=authorName (required)/label
input type=text name=author id=author size=22 class=/
/p
/div
div class=input
p
label for=emailEmail (gravatar enabled) (required)/
label
input type=text name=email id=email size=22 class=/
/p
/div
div class=input
p
label for=urlWebsite (optional)/label
input type=text name=url id=url size=22 /
/p
/div
div class=submit
input type=submit name=submit id=sub value=Leave comment /
input type=hidden name=comment_post_ID id=hidden value=
/div
/form
script type=text/javascript
//![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]
/script
-
Thanks for the assist.
On Jan 18, 3:02 pm, T.J. Crowder t...@crowdersoftware.com wrote:
Hi,
At the moment i can`t give you an example of a page, because i haven`t
uploaded my skin or wordpress to my host.
It doesn't take long to dash off a quick 30-line standalone page to
demonstrate a problem when you're asking for help.
Basically, i need the url label to be hidden or cleared on submit
because its optional.
I think you mean the *field* (the input element), not the label. To
prevent a field from being submitted, you must either remove it from
the form or disable it (disabled form fields are not submitted, per
the HTML spec).
To disable a field with the ID 'fred' with Prototype's
Form.Element#disable function[1]:
$('fred').disable();
If you want to clear it first (you don't have to, even if it has
something in it it will not be sent if the field is disabled), you can
use Form.Element#clear(); you can even chain them:
$('fred').disable().clear();
...because many of the Form.Element and Element methods return the
element instance.
If you also want to hide or show elements (fields, labels, etc.), you
can use Element#hide and Element#show. All of the Element methods are
documented on the Element API page[2], Form.Element methods on the
Form.Element API page[3] (all of the Element methods also apply).
[1]http://prototypejs.org/api/form/element/disable
[2]http://prototypejs.org/api/element
[3]http://prototypejs.org/api/form/element
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Jan 18, 12:10 pm, Colorblind dust_...@yahoo.com wrote:
I`m using this script for my wordpress comments form. Here`s the form:
form name=comform action=# method=post id=commentform
div class=input
p
label for=commentType your comment here.../label
textarea name=comment id=comment rows=8 cols=10 class= /
textarea
/p
/div
div class=input
p
label for=authorName (required)/label
input type=text name=author id=author size=22 class=/
/p
/div
div class=input
p
label for=emailEmail (gravatar enabled) (required)/
label
input type=text name=email id=email size=22 class=/
/p
/div
div class=input
p
label for=urlWebsite (optional)/label
input type=text name=url id=url size=22 /
/p
/div
div class=submit
input type=submit name=submit id=sub value=Leave comment /
input type=hidden name=comment_post_ID id=hidden value=
/div
/form
script type=text/javascript
//![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]
/script
The last part, the javascript part, activates the labels on the form
with the #commentform ID.
Basically, i need the url label to be hidden or cleared on submit
because its optional. Everytime i leave it uncompleted , it
submitshttp://website(optional) to the database.
Sorry about the misunderstanding at the beginning
[Proto-Scripty] Help me with this
Hy everyone,
I have the following script :
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return
(l.readAttribute
('for') !== null)}).each(function(l){
l.hide();
$(l.readAttribute('for'))._value =
l.innerHTML;
if ($(l.readAttribute('for')).value.empty())
{
$(l.readAttribute('for')).value = $(l.readAttribute
('for'))._value
}
$(l.readAttribute('for')).observe
('blur',function(e){if
(Event.element(e).value == '') Event.element(e).value = Event.element
(e)._value;});
$(l.readAttribute('for')).observe
('focus',function(e){if
(Event.element(e).value == Event.element(e)._value) Event.element
(e).value = '';});
});
}
});
I want to write a function from this script that when i press the
submit on a form, if an input is focused, it hides/clears it, so it
doesn`t get submitted to the database. Work with the latest Prototype
lib. I don`t know any javascripting so, I need your help !!
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Help me with this
Called on form submit, clear all labels so they don't accidentally get
submitted to the server
Something like that
On Jan 18, 1:33 am, kangax kan...@gmail.com wrote:
On Jan 17, 1:18 pm, Colorblind dust_...@yahoo.com wrote:
Hy everyone,
I have the following script :
if (Object.isUndefined(Axent)) { var Axent = { } }
Axent.SelfLabeledInput = Class.create({
initialize: function() {
var labelSelector = arguments[0] || 'label';
$$(labelSelector).findAll(function(l) {return
(l.readAttribute
('for') !== null)}).each(function(l){
Why not just - `$$('label[for]')`?
l.hide();
$(l.readAttribute('for'))._value =
l.innerHTML;
if ($(l.readAttribute('for')).value.empty())
{
$(l.readAttribute('for')).value = $(l.readAttribute
('for'))._value
Executing `$(l.readAttribute('for'))` more than once seems
unnecessary. Why not save it in a variable?
}
$(l.readAttribute('for')).observe
('blur',function(e){if
(Event.element(e).value == '') Event.element(e).value = Event.element
(e)._value;});
$(l.readAttribute('for')).observe
('focus',function(e){if
(Event.element(e).value == Event.element(e)._value) Event.element
(e).value = '';});
});
}
});
I want to write a function from this script that when i press the
You want to write a function from this script. What does that mean?
submit on a form, if an input is focused, it hides/clears it, so it
doesn`t get submitted to the database. Work with the latest Prototype
You can't really track focused elements using native DOM methods.
Instead, you can observe all of the elements for focus/blur events and
mark them as focused accordingly. You can then check which element
is currently focused right before submitting a form.
[...]
--
kangax
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Form labels inside inputs with Prototype
Hy all,
I have the following script, works perfectly in Firefox 2/3, but I’m
having a problem with IE7 on WinXP. The text in the label tags remains
visible next to each form field, and the labels within the form fields
don’t appear at first — they show up only after tabbing through them
(or adding, then removing input).
-
var stereolabels = Class.create();
stereolabels.prototype = {
labels: [],
initialize: function(options) {
this.options = Object.extend({
className : 'inside'
}, options || {});
this.labels = $$('label.'+this.options.className);
$A(this.labels).each(function(label) {
this.initLabel(label);
}.bind(this));
$A(document.forms).each(function(form) {
Event.observe(form, submit, function() { this.uninit() }.bind
(this))
}.bind(this));
},
// called on form submit
// - clear all labels so they don't accidentally get submitted to
the server
// - WOULD CAUSE BUG IF FIELD CONTENTS WAS IN FACT MEANT TO EQUAL
LABEL VALUE
uninit: function() {
$A(this.labels).each(function(label) {
var el = $(label.htmlFor);
if (el el.value == el._labeltext) this.hide(el)
}.bind(this));
},
// initialize a single label.
// - only applicable to textarea and input[text] and input[password]
// - arrange for label_focused and label_blurred to be called for
focus and blur
// - show the initial label
// - for other element types, show the default label
initLabel: function(label) {
try {
var input = $(label.htmlFor);
var inputTag = input.tagName.toLowerCase();
var inputType = input.type;
if (inputTag == textarea || (inputType == text || inputType
==
password)) {
Element.setStyle(label, { position: 'absolute', visibility:
'hidden'});
Object.extend(input, {
_labeltext: label.childNodes[0].nodeValue,
_type: inputType
});
Event.observe(input, 'focus', this.focused.bind(this));
Event.observe(input, 'blur', this.blurred.bind(this));
this.blurred({target:input});
} else {
Element.setStyle(label, { position: 'static', visibility:
'visible' });
}
}
catch (e) {
Element.setStyle(label, { position: 'static', visibility:
'visible' });
}
},
focused: function(e) {
var el = Event.element(e);
if (el.value == el._labeltext) el = this.hide(el)
el.select();
},
blurred: function(e) {
var el = Event.element(e);
if (el.value == ) el = this.show(el);
},
hide: function(el) {
if (el._type == password) el = this.setInputType(el, password);
el.value = ;
Element.removeClassName(el, this.options.className);
return el;
},
show: function(el) {
if (el._type == password) el = this.setInputType(el, text);
Element.addClassName(el, this.options.className);
el.value = el._labeltext;
return el;
},
setInputType: function (el, type) {
try {
el.type = type;
return el;
}
catch (e) { //IE can't set the type parameter
var newEl = document.createElement(input);
newEl.type = type;
for (prop in el) {
try {
// crazy bug that still exists in ie 7 with width and
heights,
use class name if necessary instead!
if (prop != type prop != height prop
!= width) {
newEl[prop] = el[prop];
}
}
catch(e) { }
}
Event.observe(newEl, 'focus', this.focused.bind(this));
Event.observe(newEl, 'blur', this.blurred.bind(this));
el.parentNode.replaceChild(newEl, el);
return newEl;
}
}
}
Event.observe(window, 'load', stereolabelsInit, false);
var myLabels = null;
function stereolabelsInit() {
myLabels = new stereolabels();
}
The script uses Prototype framework. After some tests, ive discovered
that with Prototype 1.5 works great on all browsers, but with
Prototype 1.6.0.3 doesnt work on IE. Can anyone help me with this ? :(
I forgot to tell you what this scripts for :)
Stereolabels: Form labels inside inputs with Prototype
stereolabels crawls the DOM for labels with the specified class name
(default is ‘inside’) and places the label text inside the input
field, and adds the class name to the input element. Upon clicking the
field, the label is removed and the class name is
