Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    I'm trying to dynamicaly create part of a form based on the input given to one part of the form. In this example, I'm asking the user to enter how many prizes there going to be in the competition that user is defining. If they enter 3, then I want 3 new textareas to appear asking for the amounts for 1st, 2nd and 3rd prize.
    I currently have this calling the function in the form:
    <tr>
    <td>How many prizes?:</td>
    <td><input id="numPrizes" name="numPrizes" type="text" size="5" maxlength="1" onChange="prizesForm(this.id)"></td>
    </tr>
    and here is the function as it is now..
    function prizesForm(numPrizes)
    {
    var i = document.getElementById(numPrizes).value;
    for (count=1; count <= i; count++)
    {
    document.write("<tr><td>Prize" + count + "</td>");
    document.write("<td>");
    document.write("<input name='prize" + count + "' type='text' size='10' maxlength='10'>");
    document.write("</td></tr>");
    }
    }
    Right now it does create the right number of textareas and names them correctly, but because I'm kind-a-new to DOM, I don't know how to get this extra part of my table to not open in a new DOM. The screen clears and my textareas appear..
    I'm sure a getElementBy??? something is involved, but I'm not sure..
    Anyway clues?
    Many thanks.

  2.  

  3. #2
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    Try approaching it like this:
    HTML:
    HTML Code:
    <tr>
        <td>How many prixes?: </td>
        <td><input name="numPrizes" type="text" size="5" maxlength="1" onchange="prizesForm(this)" /></td>
    </tr>
    and JS:
    Code:
    function prizesForm( elm ) {
        var count = parseInt( elm.value );
        var table = elm.parentNode.parentNode.parentNode;
        for ( var i = 1; i <= count; ++i ) {
            var tr = document.createElement( "tr" ); // create a new <tr>
            var td1 = document.createElement( "td" ); // create a new <td>
            var td2 = document.createElement( "td" ); // create another new <td>
            var input = document.createElement("input"); // create a new <input>
            td1.appendChild( document.createTextNode( "Prize: " + i ) ); // create a text node containing the appropriate text to show inside td1.
            input.name = "prize"  + i; // set some attributes for <input>
            input.type = "text";
            input.size = 10;
            input.maxLength = 10;
            td2.appendChild( input ); // add input into td2
            tr.appendChild( td1 ); // add td1 into tr
            tr.appendChild( td2 ); // add td2 into tr
            table.appendChild( tr ); // add new tr into the table.
    }
    Hyperair

  4. #3
    Senior Member shoffman3572's Avatar
    Join Date
    Jul 2008
    Location
    Fullerton, CA
    Posts
    137
    Member #
    16990
    That did it - I found something similar online, but this does exactly what I was after. Thank you very much..

  5. #4
    Senior Member hyperair's Avatar
    Join Date
    May 2005
    Posts
    452
    Member #
    9892
    No problem.
    Hyperair


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com