Adding html form fields from user input

Question

I have a form that asks a user to give a device type a name and say how many attributes they would like to assign to that device type. That form calls the below php files which uses a loop to create the desired number of attributes.

I have used the name="attribute".$i in order to be able to identify each attribute on the next php page to send the information to a database.

<?php echo $_POST['device-name']; ?>

    <?php 

        $num=$_POST['number-of-attributes'];
        $num=intval($num);

        for($i=0; $i<$num; $i++) {

            newAttribute($i);

        }

        function newAttribute($i) {

            echo ("<div id=\"new-attribute\">");
            echo ("<h3>New Attribute</h3>");
            echo ("<label for=\"attribute".$i."\">Name</label>");
            echo ("<input id=\"attribute\" type=\"text\" name=\"attribute".$i."\">");
            echo ("</div>");

        }

    ?>

However I also want the user to be able to click for example:

<div id="small-button">New Attribute</div>

and create another set of fields to define an attribute.

How would I do this?

Thanks in advance

Answer 1

You would need JavaScript for said job. In your HTML document, at the end of the body element add the following script element :

<script type="text/javascript">

var numberOfAttributes = 1;

function newAttributeFields(e) {
    // Creates the div
    var div = document.createElement('div');
    div.id = 'new-attribute';

    // Appends the fields
    div.innerHtml = '<h3>New attribute</h3><label for="attribute' + numberOfAttributes + '">Name</label><input id="attribute" type="text" name="attribute' + numberOfAttributes + '">';

    // Appends it to the body element
    document.getElementsByTagName('body')[0].appendChild(div);

    // Increments the number of attributes by one
    numberOfAttributes = numberOfAttributes + 1;
}

var smallButton = document.getElementById('small-button');

// When the 'small button' is clicked, calls the newAttributeFields function
smallButton.addEventListener('click', newAttributeFields, false);

</script>

Answer 2

Using javascript/jquery on the client-side:

var template = "<div class=\"new-attribute\">"
             + "<h3>New Attribute</h3>"
             + "<label for=\"attribute\">Name</label>"
             + "<input id=\"attribute\" type=\"text\" name=\"attribute\">"
             + "</div>";

$(document).ready(function() {
// The DOM has loaded
    $("#small-button").on('click', function() {
    // The user clicked your 'New Attribute' button
        // Append a new attribute to the <body> with `template` we defined above:
        $(body).append(template);
    });
});

Note: I changed id="new-attribute" to class="new-attribute" since there will be more than 1.

Adding html form fields from user input

Question

2 answers

solution1
0 2013-08-27 19:09:31

solution2
0 ACCPTED 2013-08-27 19:09:46

Adding html form fields from user input

Question

2 answers

solution1 0 2013-08-27 19:09:31

solution2 0 ACCPTED 2013-08-27 19:09:46

solution1
0 2013-08-27 19:09:31

solution2
0 ACCPTED 2013-08-27 19:09:46