SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Adding elements

  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Adding elements

    Hey,

    I have a page and I want to be able to add form field dynamically to the page with a push of a button. Like when the button is pushed, it automatically inserts predefined HTML just below the last field. Something like this
    Code:
    <span style='float: left;'><input type='text' name='field[]' /></span><br />
    <span style='float: left;'><input type='text' name='field[]' /></span><br />
    <span style='float: left;'><input type='text' name='field[]' /></span><br />
    <!-- place to add new fields -->
    <br /><br />
    <input type='button' value='Add Field' onClick="addField()" />
    I'm sure this is pretty simple, I'm just having a mental block and can't think of anything

    Thanks all

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When in doubt, use innerHTML!

    Code:
    <HTML>
    <HEAD>
    <Script language="JavaScript">
     
    <!-- Written by: Greg Cook -->
    <!-- Website: http://www.html4me.com -->
    <!-- Email: host@html4me.com -->
    
    var textboxNum = 0;
    var checkboxNum = 0;
    var radioNum = 0;
    var textboxIndex = "textbox"+textboxNum;
    var checkboxIndex = "checkbox"+checkboxNum;
    var radioIndex = "radio"+radioNum;
    function insertFE(fieldType, fieldName)
    {
    if (fieldType == 'textbox')
    {
    textboxNum++;
    textboxIndex = "textbox"+textboxNum;
    }
    else if (fieldType == 'checkbox')
    {
    checkboxNum++;
    checkboxIndex = "checkbox"+checkboxNum;
    }
    else if (fieldType == 'radio')
    {
    radioNum++;
    radioIndex = "radio"+radioNum;
    }
    document.getElementById("divTag" ).innerHTML += "<input type='"+fieldType+"' name='"+fieldName+"'>";
    } // end of insertFE() function
    </script>
    </HEAD>
    <BODY>
    <form name="form1"><div id="divTag"></div></form>
    <input type="button" value="Add a textbox!" OnClick="insertFE('textbox', textboxIndex)"><BR><BR>
    <input type="button" value="Add a checkbox!" OnClick="insertFE('checkbox', checkboxIndex)"><BR><BR>
    <input type="button" value="Add a radio button!" OnClick="insertFE('radio', radioIndex)"><BR><BR>
    </BODY>
    </HTML>

  3. #3
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    OK, I've got this code
    Code:
    var i = 6;
    function addField() {
     var fieldHTML = "<tr>
    	<td class='header'>Field " + (i + 1) + "</td>
    	<td><input id='f' type='text' name='fieldDesc[]' /></td>
    	<td><input id='f' type='text' name='fieldName[]' /></td>
       </tr>";
       
     document.all['fields'].innerHTML += fieldHTML;
    }
    and I'm getting this error
    Quote Originally Posted by Javascript
    Unterminated string constant
    and
    Object expected
    The string error is on the function declaration line and the object error is at the end of the table with the ID fields where the HTML is supposed to be added.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude, I just gave you a script that works perfectly.

  5. #5
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Packman:
    1) document.all calls will only work in IE. You'd be better off using getElementById like gregc suggested.
    2) javascript will get freaked out by the newlines in your string. try this instead:
    Code:
    var fieldHTML = "<tr>\n  <td class='header'>Field "
    + (i + 1) 
    + "</td>\n"
    + "  <td><input id='f' type='text' name='fieldDesc[]' /></td>\n"
    + "  <td><input id='f' type='text' name='fieldName[]' /></td>\n"
    + "</tr>";
    Everybody:
    innerHtml will only work in IE and Mozilla-based browsers, I think - anyone else will be stuffed. To be really future-proof, you should be using the proper DOM methods like createElement() and appendChild().

  6. #6
    Non-Member
    Join Date
    Jan 2003
    Posts
    5,748
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yer folks - use the DOM 8)

    Netscape6+ only supports innerHTML out of pity for IE and Microsoft LoL

    ...LoL...

    innerHTML is not part of the DOM standard - thankfully I might add...


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
  •