SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    canada
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clear content of multiple text boxes

    I have a couple of radio buttons that hide and reveal DIV tags. Here is what I'm trying to do:

    1) radioBTN1 is clicked it reveals DIV1 with multiple text boxes in it
    2) radioBTN2 is clicked it reveals DIV2 below DIV1 with multiple text boxes in it
    3) the user fills in the text boxes in the DIV2
    4) user changes mind and clicks radioBTN1 again to hide DIV2
    5) when DIV2 is hidden it resets and clears all previous information

    IS this possible to do with javascript?

    Here is what I have so far.

    Reveal Javascript:
    Code:
    function RemoveContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function InsertContent(d) {
    document.getElementById(d).style.display = "";
    }
    Radiobuttons
    Code:
    <input name="L3" type="radio" value="1-6" onClick="javascript:InsertContent('revealBox'); RemoveContent('revealBox2') ">
    
    <input name="L3" type="radio" value="1-12" onClick="javascript:InsertContent('revealBox2')">
    text box hidden in the div
    Code:
    <div id="revealBox"  align="center" style="display: n*one" >
      <table border="0" align="center" cellpadding="2" cellspacing="2">
        <tr>
          <td width="15" align="center" class="formTXT">1</td>
          <td width="177" align="center" bgcolor="#EEEEEE"><input name="L3-1" type="text" class="txtBoxSm" id="L3-1" size="25" /></td>
          <td width="14"  align="center" class="formTXT">2</td>
          <td width="177" align="center" bgcolor="#EEEEEE"><input name="L3-2" type="text" class="txtBoxSm" id="L3-2" size="25" /></td>
        </tr>
        <tr>
          <td align="center" class="formTXT">3</td>
          <td align="center" bgcolor="#EEEEEE"><input name="L3-3" type="text" class="txtBoxSm" id="L3-3" size="25" /></td>
          <td align="center" class="formTXT">4</td>
          <td align="center" bgcolor="#EEEEEE"><input name="L3-4" type="text" class="txtBoxSm" id="L3-4" size="25" /></td>
        </tr>
        <tr>
          <td align="center" class="formTXT">5</td>
          <td align="center" bgcolor="#EEEEEE"><input name="L3-5" type="text" class="txtBoxSm" id="L3-5" size="25" /></td>
          <td align="center" class="formTXT">6</td>
          <td align="center" bgcolor="#EEEEEE"><input name="L3-6" type="text" class="txtBoxSm" id="L3-6" size="25" /></td>
        </tr>
      </table>
    </div>
    
    <div id="revealBox2"  align="center" style="display: no*ne" >
                        <table border="0" align="center" cellpadding="2" cellspacing="2">
    
                          <tr>
                            <td align="center" class="formTXT">7</td>
                            <td width="150" align="center" bgcolor="#EEEEEE"><input name="L3-7" type="text" class="txtBoxSm" id="L3-7" size="25" /></td>
                            <td  align="center" class="formTXT">8</td>
                            <td width="150" align="center" bgcolor="#EEEEEE"><input name="L3-8" type="text" class="txtBoxSm" id="L3-8" size="25" /></td>
                            </tr>
                          <tr>
                            <td align="center" class="formTXT">9</td>
                            <td align="center" bgcolor="#EEEEEE"><input name="L3-9" type="text" class="txtBoxSm" id="L3-9" size="25" /></td>
                            <td align="center" class="formTXT">10</td>
                            <td align="center" bgcolor="#EEEEEE"><input name="L3-10" type="text" class="txtBoxSm" id="L3-10" size="25" /></td>
                            </tr>
                          <tr>
                            <td align="center" class="formTXT">11</td>
                            <td align="center" bgcolor="#EEEEEE"><input name="L3-11" type="text" class="txtBoxSm" id="L3-11" size="25" /></td>
                            <td align="center" class="formTXT">12</td>
                            <td align="center" bgcolor="#EEEEEE"><input name="L3-12" type="text" class="txtBoxSm" id="L3-12" size="25" /></td>
                            </tr>
                        </table>
    				  </div>

    Can someone help with this javascript? I believe an array needs to be used, but I'm not sure how to go about it. THANKS.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    It's probably easiest to have an array of the form input id's and iterate through them and set their value="";

    Or you could use something like

    Code JavaScript:
    function getElementsByClassName(node, classname) {
     
        var a = [];
        var re = new RegExp('\\b' + classname + '\\b');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++)
            if(re.test(els[i].className))a.push(els[i]);
        return a;
    }
     
    var inputs = getElementByClassName('txtBoxSm');
    for(var i=0,j=inputs.length; i<j; i++) {
      inputs[i].value = "";
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •