Clearing values without reloading the page

I've got a series of text boxes and drop downs and the user fills these out, hits "generate" which then concatenates the strings in the text boxes and displays the resulting values on the page.

What I'm having trouble doing is clearing these "outputs" if the user hits generate again. for example if someone changes the text or something like that.

There are multiple groups of textboxes on multiple lines and the resulting strings are placed in a <span> at the end of the page. Sample code below:

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

You can see from the jQuery above I've tried to use the each() function (as there can be multiple rows) to clear the spans, but this doesn't work. Hope I'm making sense in this post. Will try and explain it better if people don't get this.

Thanks

Answers


Try using a reset button

     <input type="reset"/>

Otherwise, if you're trying to do this in code, you would do this:

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/


Try this... What I did here was put the input for the button inside the form and set it's type to reset. This allowed me to put the code in the form's onreset attribute so that it will clear out the spans for the current form (which contains the button).

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

See a live example: http://jsfiddle.net/VF2qG/2/


Here's what I came up with: http://jsfiddle.net/Y2JRJ/

You needed to refer to $(this) instead of referring to tag_span again.

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

If there won't be multiple .tag_span's then just do

$('.tag_span').empty()

That removes stuff inside the element but doesn't delete the element from the dom


Need Your Help

Subclass of UITableviewContrller exception in IOS6

objective-c ios xcode ios6

This code snipped worked just fine in iOS5.1, but i'm having an issue win iOS6.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.