在不重新加载页面的情况下清除值

Clearing values without reloading the page

本文关键字：情况下 清除 加载 新加载      更新时间：2023-09-26

我有一系列文本框和下拉列表，用户填写这些文本框和下拉菜单，点击"生成"，然后连接文本框中的字符串并在页面上显示结果值。

我遇到麻烦的是，如果用户再次点击生成，则清除这些"输出"。 例如，如果有人更改了文本或类似的东西。

多

行上有多组文本框，生成的字符串放置在页面末尾的<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>

j查询：

$(document).ready(function() {
    $('.gp').click(generateOutputs);
});
function clearAll() {
    $('.tag_span').each(function() {
        $('.tag_span').html("");
    });
}

您可以从上面的jQuery中看到，我尝试使用each()函数（因为可以有多行）来清除范围，但这不起作用。希望我在这篇文章中说得通。如果人们不明白这一点，会尝试更好地解释它。

谢谢

尝试使用重置按钮

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

试试这个... 我在这里所做的是将按钮的输入放在表单中，并将其类型设置为重置。 这允许我将代码放在表单的 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/

这是我想出的： http://jsfiddle.net/Y2JRJ/

您需要引用$(this)而不是再次引用tag_span。

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

如果没有多个.tag_span，那就做 

$('.tag_span').empty()

这会删除元素内的内容，但不会从 dom 中删除元素

相关文章：