DaniWeb IT Discussion Community - create input boxes on the fly?

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- PHP (http://www.daniweb.com/forums/forum17.html)

- - create input boxes on the fly? (http://www.daniweb.com/forums/thread123196.html)

create input boxes on the fly?

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

Re: create input boxes on the fly?

Maybe you can try something like the following example:

$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>";

}

Re: create input boxes on the fly?

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.

<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>

Re: create input boxes on the fly?

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