Устранение значений без перезагрузки страницы

Question

У меня есть серия текстовых полей и выпадающих списков, и пользователь заполняет их, удаляет «generate», а затем объединяет строки в текстовых полях и отображает результирующие значения на странице.

У меня возникли проблемы с очисткой этих «выходов», если пользователь снова нажал кнопку генерации. например, если кто-то меняет текст или что-то в этом роде.

Существует несколько групп текстовых полей на нескольких строках, и полученные строки помещаются в <span> в конце страницы. Пример кода ниже:

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

Вы можете видеть из JQuery выше я пытался использовать функцию each() (как может быть несколько строк) чтобы очистить пролеты, но это не сработает. Надеюсь, у меня есть смысл в этом посте. Попробуй и объяснишь это лучше, если люди этого не получат.

Благодаря

Answer 1

Попробуйте использовать кнопку сброса

 <input type="reset"/> 

В противном случае, если вы пытаетесь сделать это в коде, вы могли бы сделать это:

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

Вот что я придумал: http://jsfiddle.net/Y2JRJ/

Вам нужно обратиться к $(this) вместо того, чтобы снова обратиться к tag_span.

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

Answer 3

Если не будет несколько .tag_span тогдашний вобще

$('.tag_span').empty() 

Это удаляет материал внутри элемента, но не удаляет элемент из DOM

Answer 4

Попробуйте это .. . Я сделал здесь вход для кнопки внутри формы и установил ее тип для сброса. Это позволило мне поместить код в атрибут формы onreset, чтобы он очистил промежутки для текущей формы (которая содержит кнопку).

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

Смотрите живой пример: http://jsfiddle.net/VF2qG/2/