CODEWITHSUNDEEP
javascriptjqueryhtmlforms
zik
zik

Reputation: 3085

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

Upvotes: 0

Views: 3340

Answers (4)

Eric
Eric

Reputation: 6345

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/

Upvotes: 1

Luke
Luke

Reputation: 2063

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

Upvotes: 0

Thach Mai
Thach Mai

Reputation: 945

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

Upvotes: 0

Control Freak
Control Freak

Reputation: 13233

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/

Upvotes: 2

Related Questions