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/


Need Your Help

Difference in website display depending on domain

apache http firefox browser dns

I'm getting slightly different display of a website depending on which URL I use to access it (two different servers, both serving the same files). One looks "thinner" than the other in Firefox 3....

has_object_permission not being called at all in `(object)-detail` URLS

python django django-rest-framework

I have a problem in that has_object_permission() gets ignored. Even when I access http://127.0.0.1:8000/portfolios/3/ with the correct user logged in, it still defaults to has_permission(). Am I do...