User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the PHP section within the Web Development category of DaniWeb, a massive community of 429,760 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,961 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our PHP advertiser: Lunarpages PHP Web Hosting

create input boxes on the fly?

•
•
Join Date: Mar 2008
Posts: 25
Reputation: blater is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 7
blater's Avatar
blater blater is offline Offline
Light Poster

Re: create input boxes on the fly?

  #3  
May 8th, 2008
If you want to add the input boxes dynamically then you should use javascript to add them into the innerHTML of a div on your page.
The example below should do what you want, it adds new input boxes into the inner HTML of the div called "inputBoxes" whenever you click on the "Create Person" button.

Help with Code Tags 
<html>
<head>

<script type="text/javascript">
    var personCount=11;

    createBoxes = function(el, numberBoxes) {
        var innerHTML = "";
        var n;
        var inputBoxDiv = document.getElementById(el);
        var innerHTML = inputBoxDiv.innerHTML;

        for (n=0;n<numberBoxes;n++) {
            innerHTML=innerHTML+"<label for='person"+personCount+"'>Name:</label><input name='person"+personCount+"' type='text' /><br/>";
            personCount++;
        }
        inputBoxDiv.innerHTML = innerHTML;
    }
</script>
</head>

<body>
<form name="input" action="saveTheData.php" method="post">
    <label for="person1" >Name:</label><input type="text" name="person1"  /><br />
    <label for="person2" >Name:</label><input type="text" name="person2"  /><br />
    <label for="person3" >Name:</label><input type="text" name="person3"  /><br />
    <label for="person4" >Name:</label><input type="text" name="person4"  /><br />
    <label for="person5" >Name:</label><input type="text" name="person5"  /><br />
    <label for="person6" >Name:</label><input type="text" name="person6"  /><br />
    <label for="person7" >Name:</label><input type="text" name="person7"  /><br />
    <label for="person8" >Name:</label><input type="text" name="person8"  /><br />
    <label for="person9" >Name:</label><input type="text" name="person9"  /><br />
    <label for="person10">Name:</label><input type="text" name="person10" /><br />

    <div id="inputBoxes"><!-- initially empty.  The input boxes will go in here --></div>

    <button onClick="createBoxes('inputBoxes',1);">Create A New Person</button><br />

    <input type="submit" value="Submit">
</form>

</body>
</html>
http://www.inverse2.com
Reply With Quote  
Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 3:28 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC