Effacer les valeurs par défaut en utilisant onsubmit

Question

Je dois effacer les valeurs par défaut des champs de saisie en utilisant js, mais toutes mes tentatives n'ont pas réussi à cibler et effacer les champs. J'espérais utiliser onSubmit pour excuter une fonction pour effacer toutes les valeurs par dfaut (si l'utilisateur ne les avait pas chang) avant que le formulaire ne soit soumis.

<form method='get' class='custom_search widget custom_search_custom_fields__search' onSubmit='clearDefaults' action='http://www.example.com' > 
<input name='cs-Price-2' id='cs-Price-2' class='short_form' value='Min. Price' /> 
<input name='cs-Price-3' id='cs-Price-3' class='short_form' value='Max Price' /> 
<input type='submit' name='search' class='formbutton' value=''/> 
</form> 

Comment voulez-vous accomplir cela?

Answer 1

• Lire les ids + valeurs de tous vos champs lorsque chargement de la page (en utilisant quelque chose comme jquery pour obtenir tous « textarea », balises « entrée » et « select » par exemple)
• On soumettre, comparer le maintenant contenait des valeurs à ce que vous avez stocké sur le chargement de la page
• Remplacez ceux qui n'ont pas changé avec des valeurs vides

Si l'on ignore encore, décrire où vous obtenez coincé et je vais décrire plus profondeur.

Édition: Ajout de code en utilisant jQuery. Il est seulement pour le textarea-tag et il ne répond pas aux événements réels, mais nous espérons qu'il explique l'idée encore plus loin:

// Keep default values here 
var defaults = {}; 

// Run something like this on load 
$('textarea').each(function(i, e) { 
    defaults[$(e).attr('id')] = $(e).text(); 
}); 

// Run something like this before submit 
$('textarea').each(function(i, e){ 
    if (defaults[$(e).attr('id')] === $(e).text()) 
    $(e).text(''); 
}) 

Edit: Ajout d'un peu plus de code pour une aide plus détaillée. Ce code devrait être un peu complet (avec un avertissement de qualité, car je ne suis en aucun cas un expert jQuery) et nécessite juste d'être inclus sur votre page. Rien d'autre doit être fait, sauf donner toutes vos balises d'entrée ids uniques et type = « text » (mais ils devraient avoir que de toute façon):

$(document).ready(function(){ 
    // Default values will live here 
    var defaults = {}; 

    // This reads and stores all text input defaults for later use 
    $('input[type=text]').each(function(){ 
    defaults[$(this).attr('id')] = $(this).text(); 
    }); 

    // For each of your submit buttons, 
    // add an event handler for the submit event 
    // that finds all text inputs and clears the ones not changed 
    $('input[type=submit]').each(function(){ 
    $(this).submit(function(){ 
     $('input[type=text]').each(function(){ 
     if (defaults[$(this).attr('id')] === $(this).text()) 
      $(this).text(''); 
     }); 
    }); 
    }); 
}); 

Si cela ne fonctionne toujours pas de sens, vous devriez lire quelques tutoriels sur jQuery et/ou javascript.

Answer 2

Remarque: Actuellement, cette fonctionnalité est uniquement prise en charge dans Google Chrome et Safari. Je ne pense pas que ce soit une réponse satisfaisante à votre problème, mais je pense qu'il convient de noter comment ce problème peut être abordé en HTML 5.

---

HTML 5 introduit l'attribut placeholder, qui ne soit pas soumis à moins qu'il a été remplacé:

<form> 
    <input name="q" placeholder="Search Bookmarks and History"> 
    <input type="submit" value="Search"> 
</form> 

Pour en savoir plus:

• DiveintoHTML5.ep.io: Live Example... And checking if the placeholder tag is supported
• DiveintoHTML5.ep.io: Placeholder text

Answer 3

1) Au lieu de vérifier les changements côté client, vous pouvez vérifier les changements côté client.

Dans la fonction Page_Init vous aurez des valeurs stockées dans l'état de visualisation & les valeurs dans les champs de texte ou les contrôles que vous utilisez.

Vous pouvez comparer les valeurs et, si elles ne sont pas égales, définir le texte à blanc.

2) Puis-je vous demander quelle fonctionnalité essayez-vous d'atteindre?

Answer 4

U peut y parvenir en utilisant dans votre fonction d'envoi

function clearDefaults() 
{ 
    if(document.getElementById('cs-Price-2').value=="Min. Price") 
     { 
       document.getElementById('cs-Price-2').value=''; 
     } 

}