House of Fusion
Search over 2,500 ColdFusion resources here
  
Home of the ColdFusion Community

Mailing Lists
Home / Groups / Javascript

Need help to repeat dynamicly form fields onclick

Author:
David Hannum
07/24/2009 01:02 PM

function doBox(num){ var oldNum = num - 1; if(eval("document.buyer.geog"+oldNum+".value") != ""){   document.getElementById("boxbutton["+oldNum+"]").style.visibility = "hidden";   var newNum = num + 1;   var box = "<input type=\"text\" name=\"geog"+num+"\" size=\"50\" maxlength=\"100\"><div id=\"boxbutton["+num+"]\" style=\"visibility:visible\"><a href=\"javascript:void\" onClick=\"doBox("+newNum+")\"><img src=\"images/button-add-location.gif\" alt=\"\" border=\"0\"></a></div><div id=\"geobox["+newNum+"]\"><\/div>";   document.getElementById("geobox["+num+"]").innerHTML = box; } }     List as many as you wish - when you enter one, click the "Add a Location" button, and another box will appear:    </td>   </tr>   <tr>    <td class="common">    <div id="geobox[0]"><input type="text" name="geog0" size="50" maxlength="100"><div id="boxbutton[0]" style="visibility:visible;"><a href="javascript:void" onClick="doBox(1)"><img src="images/button-add-location.gif" width="120" height="25" alt="" align="bottom" border="0"></a></div></div>    <div id="geobox[1]"></div>    </td>   </tr> > > I have a form with 4+ input fields. > I need these 4+ fields to be repeated every time the user clicks "Add > Additional Topic(s)" > > Can someone please help me with the JS function on that? >    <script> >       function addTopicEvent() { >         var x = document.getElementById('meeting_topics'); >          do I use the innerHTML here? >           or appendChild() how do i make it work, whats the syntax? >       } >       </script> > > <!--- Repeat the div meeting_topics section every time the user clicks on > 'Add Additional Topic' ---> >        <div id="meeting_topics"> >                <tr><td> </td></tr> >                <tr> >                   <td><font color="red">* </font>Meeting > Topic:</td><td><cfinput type="text" size="58" name="meeting_topic"></td> >                </tr> >                <tr> >                         <td>Presenter(s):</td><td><cfinput type="text" > size="58" name="meeting_presenters"></td> >                </tr> >                        etc.... >        </div> >        <tr> >                <td align="left" colspan="2"><a href="javascript:;" > onclick="addTopicEvent();">Add Additional Topic(s)</a></td> >        </tr> > > >


Search javascript

February 12, 2012

<<   <   Today   >   >>
Su Mo Tu We Th Fr Sa
       1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29