Effacer les valeurs sans recharger la page

Question

J'ai une série de zones de texte et de listes déroulantes que l'utilisateur remplit, frappe "générer" qui concatène ensuite les chaînes dans les zones de texte et affiche les valeurs résultantes sur la page.

Ce que j'ai du mal à faire, c'est d'effacer ces "sorties" si l'utilisateur frappe à nouveau. par exemple si quelqu'un change le texte ou quelque chose comme ça.

Il existe plusieurs groupes de zones de texte sur plusieurs lignes et les chaînes résultantes sont placées dans un <span> à la fin de la page. Exemple de code ci-dessous:

HTML:

<div id="activitytag"> 
     <h3>Activity Tags</h3> 
     <a class="addActivityTag button blue">+</a> <a class="removeActivityTag button blue">-</a> 

    <form id="tag-form" class="tag-form"> 
    <input type="checkbox" class="checkbox nounderscore" name="tfcheck"> 
    <select class="page_type" title="Page Type"> 
     <option value="HPG">HPG – Homepage</option> 
     <option value="LPG">LPG – Landing Page</option> 
     <option value="CNT">CNT – Content</option> 
     <option value="RES">RES – Research</option> 
     <option value="ENG">ENG – Engagement</option> 
     <option value="CNV">CNV – Sale Conversion</option> 
    </select> 
    <input type="text" class="pagedesc nounderscore" value="Page Description" title="Page Description" onfocus="clickclear(this, 'Page Description')" onblur="clickrecall(this,'Page Description')" /> 
    <input type="text" class="tagstartdate numberinput" value="Tag Start Date" title="Tag Start Date" maxlength="8" onfocus="clickclear(this, 'Tag Start Date')" onblur="clickrecall(this,'Tag Start Date')" /> 
    <span class="tag_span"></span> 
    </form> 
</div> 

<div class="dfanames"> 
    <h4>Activity Group</h4> 
    <span id="activitytaggrouptext"></span> 
</div> 

jQuery:

$(document).ready(function() { 
    $('.gp').click(generateOutputs); 
}); 

function clearAll() { 
    $('.tag_span').each(function() { 
     $('.tag_span').html(""); 
    }); 
} 

Vous pouvez voir la jQuery ci-dessus, j'ai essayé d'utiliser la fonction each() (comme il peut y avoir plusieurs lignes) pour effacer les travées, mais cela ne fonctionne pas. J'espère que j'ai du sens dans ce post. Je vais essayer de mieux expliquer si les gens ne comprennent pas cela.

Merci

Answer 1

Essayez d'utiliser un bouton de réinitialisation

 <input type="reset"/> 

Sinon, si vous essayez de le faire dans le code, vous feriez ceci:

function clear_form_elements(ele) { 

    $(ele).find(':input').each(function() { 
     switch(this.type) { 
      case 'password': 
      case 'select-multiple': 
      case 'select-one': 
      case 'text': 
      case 'textarea': 
       $(this).val(''); 
       break; 
      case 'checkbox': 
      case 'radio': 
       this.checked = false; 
     } 
    }); 

} 


clear_form_elements('#tag-form'); 

http://www.electrictoolbox.com/jquery-clear-form/

Answer 2

Voici ce que j'ai trouvé: http://jsfiddle.net/Y2JRJ/

Vous avez dû faire référence à $(this) au lieu de faire à nouveau référence à tag_span.

$('.tag_span').each(function() { 
    $(this).html(""); 
}); 

Answer 3

S'il n'y aura pas plusieurs années .tag_span puis juste faire

$('.tag_span').empty() 

qui enlève des choses à l'intérieur de l'élément, mais ne supprime pas l'élément du dom

Answer 4

Try this .. Ce que j'ai fait ici a été de mettre l'entrée pour le bouton à l'intérieur du formulaire et de définir son type à réinitialiser. Cela m'a permis de mettre le code dans l'attribut onreset du formulaire afin qu'il efface les travées pour le formulaire en cours (qui contient le bouton).

HTML

<div id="activitytag"> 
     <h3>Activity Tags</h3> 
     <a class="addActivityTag button blue">+</a> <a class="removeActivityTag button blue">-</a> 

    <form id="tag-form" class="tag-form" onreset="clearAll()"> 
    <input type="checkbox" class="checkbox nounderscore" name="tfcheck"> 
    <select class="page_type" title="Page Type"> 
     <option value="HPG">HPG – Homepage</option> 
     <option value="LPG">LPG – Landing Page</option> 
     <option value="CNT">CNT – Content</option> 
     <option value="RES">RES – Research</option> 
     <option value="ENG">ENG – Engagement</option> 
     <option value="CNV">CNV – Sale Conversion</option> 
    </select> 
    <input type="text" class="pagedesc nounderscore" value="Page Description" title="Page Description" onfocus="clickclear(this, 'Page Description')" onblur="clickrecall(this,'Page Description')" /> 
    <input type="text" class="tagstartdate numberinput" value="Tag Start Date" title="Tag Start Date" maxlength="8" onfocus="clickclear(this, 'Tag Start Date')" onblur="clickrecall(this,'Tag Start Date')" /> 
    <span class="tag_span">123</span> 
    <input type="reset" value="ClearButton" /> 
    </form> 
</div> 

<div class="dfanames"> 
    <h4>Activity Group</h4> 
    <span id="activitytaggrouptext"></span> 
</div> 

JavaScript

function clearAll() { 
    $(".tag_span").each(function(index,element) { 
     element.innerHTML=""; 
    }); 
}​ 

Voir un exemple en direct: http://jsfiddle.net/VF2qG/2/