create input boxes on the fly?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the PHP section within the Web Development category of DaniWeb, a massive community of 425,969 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 1,633 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

Thread Tools Display Modes

Views: 397 | Replies: 3

•

Join Date: Apr 2008

Posts: 8

Reputation: jinx_uk_98 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

jinx_uk_98 jinx_uk_98 is offline

Offline

Newbie Poster

create input boxes on the fly?

May 8th, 2008

Hi guys,

Bit of n00b here but do have some HTML experience.

Anyway I'm working on a small project at the moment where I require the user to enter the details of a varying number of people.

How can I create input boxes on the fly? so that the user can click 'create new person' and a new input box will show up. I plan to have an initial 10 boxes on the screen then ask the users to create any additional after that.

hope that's clear

many thanks
Kevin

•

Join Date: Oct 2006

Posts: 26

Reputation: Rayhan Muktader is an unknown quantity at this point

Rep Power: 3

Solved Threads: 2

Rayhan Muktader Rayhan Muktader is offline

Offline

Light Poster

Re: create input boxes on the fly?

May 8th, 2008

Maybe you can try something like the following example:

Help with Code Tags

(Toggle Plain Text)

$result = mysql_query("select * from name_table");
while ($row = mysql_fetch_array($result)) {
     echo"<label for=\"$row[id]\">$row[name]</label><input name=\"$row[id]\" type=\"text\"> </input>";
}

Last edited by Rayhan Muktader : May 8th, 2008 at 10:08 am.

I don't reply to private messages.

•

Join Date: Mar 2008

Posts: 25

Reputation: blater is an unknown quantity at this point

Rep Power: 1

Solved Threads: 7

blater

Offline

Light Poster

Re: create input boxes on the fly?

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

(Toggle Plain Text)

<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

•

Join Date: Apr 2008

Posts: 8

Reputation: jinx_uk_98 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

jinx_uk_98 jinx_uk_98 is offline

Offline

Newbie Poster

Re: create input boxes on the fly?

May 9th, 2008

thanks blater this is perfect, I;ve managed to adapt it perfectly to my needs.

the only problem I have no have is transferring the new fields data to the mysql table I have. The rest of the form works fine but how do I reference the newly created input boxes to the sql statement know to incorporate them?

cheers