Question

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

Answer 1

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/