Hide/clear input field with prototype

Question

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 = '';});
 });
}

});

And the following 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>

//

I want to write a function from this script that when i press the submit on this form, and an input field is focused, it hides/clears it, so it doesnt get submitted to the database. Works with the latest Prototype lib. I dont know any javascripting so, I need your help !! I`m using this form for my wordpress comments area.

Answer 1

I don't quite follow your question. If you click the submit button on a form, it gets the focus so none of the other elements will have focus.
Have I misunderstood?

Answer 2

Called on form submit, clear all labels so they don't accidentally get submitted to the server Something like that

Answer 3

You don't have to worry, labels won't get submitted.

This script will remove the labels from the DOM on submit tho. It has to be run after the DOM is loaded (well, at least the form) and if your form elements are inside the labels they will disappear too!

document.getElementById( 'commentform' ).onsubmit = function() {
    var labels = this.getElementsByTagName( 'label' );
    while( labels[0] ) {
        labels[0].parentNode.removeChild( labels[0] );
    }
    return true;
}

This is not a prototype script. It's Plain Old Javascript.

Answer 4

It still doesnt work. 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. I forgot to mention, in order to activate the labels, you must apply this after the form:

<script type="text/javascript">
//<![CDATA[
new Axent.SelfLabeledInput('#commentform label');
//]]>
</script>

Answer 5

Ok, I see. The elements are pre filled with the label text. On focus the default text disappears and reappears on blur if the elemnt is still empty.

You could try this, I don't use prototype, so it's a guess in places.

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));
        });
}

Answer 6

Damn, it still doesn't work. Says missing ; before statement on line 16

 })(el));\n

I'm trying to solve this problem with the form for weeks now, still didn't found an answer...

Answer 7

Oops, should be

        $(el.form).observe( 'submit', (function(thisel) { return function(e) {
                if( thisel.value == thisel._value ) { thisel.value = '' }
        }})(el));

Answer 8

It works !!! Finally !!!!! Thank you very very much for your help !! I don't know how can i ever repay you...

Here's the final code if someone else wants to run it:

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));
    });
}});

You're my savior man :)