Cacher/champ de saisie clair avec prototype

Question

je le script suivant:

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

Et la forme suivante:

<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> 

Je veux écrire une fonction de ce script tel que, lorsque je presse la soumettre sur ce formulaire, et un champ de saisie est ciblé, il cache/efface, de sorte qu'il ne soit pas soumis à la base de données.

Cela fonctionne avec la dernière version de Prototype lib. Je ne connais pas de JavaScript, j'ai donc besoin de votre aide. J'utilise ce formulaire pour ma zone de commentaires WordPress.

Answer 1

Vous n'avez pas à vous inquiéter, les étiquettes ne seront pas soumises.

Ce script supprimera les étiquettes du DOM sur submit tho. Il doit être exécuté après que le DOM soit chargé (enfin, au moins le formulaire) et si vos éléments de formulaire sont à l'intérieur des étiquettes, ils disparaîtront aussi!

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

Ceci n'est pas un script prototype. C'est P lain O ld J avascript.

Answer 2

Les éléments sont pré-remplis avec le texte de l'étiquette. Au focus, le texte par défaut disparaît et réapparaît sur le flou si l'élément est encore vide.

Vous pourriez essayer ceci. Je n'utilise pas de prototype, donc c'est une supposition par endroits.

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 3

J'ai finalement réussi à le faire fonctionner! Voici le code final si quelqu'un d'autre veut l'exécuter:

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