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="comment">Type your comment here...</label>
<textarea name="comment" id="comment" rows="8" cols="10" class="" ></
textarea>
</p>
</div>
<div class="input">
<p>
<label for="author">Name (required)</label>
<input type="text" name="author" id="author" size="22" class=""/>
</p>
</div>
<div class="input">
<p>
<label for="email">Email (gravatar enabled) (required)</
label>
<input type="text" name="email" id="email" size="22" class=""/>
</p>
</div>
<div class="input">
<p>
<label for="url">Website (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" <[email protected]> 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 <[email protected]> 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="comment">Type your comment here...</label>
> > <textarea name="comment" id="comment" rows="8" cols="10" class="" ></
> > textarea>
> > </p>
> > </div>
> > <div class="input">
> > <p>
> > <label for="author">Name (required)</label>
> > <input type="text" name="author" id="author" size="22" class=""/>
> > </p>
> > </div>
> > <div class="input">
> > <p>
> > <label for="email">Email (gravatar enabled) (required)</
> > label>
> > <input type="text" name="email" id="email" size="22" class=""/>
> > </p>
> > </div>
> > <div class="input">
> > <p>
> > <label for="url">Website (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...
>
> > 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" <[email protected]> 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 <[email protected]> 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 <[email protected]> wrote:
>
> > > > > On Jan 17, 1:18 pm, Colorblind <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
