How to show textfields when we click a button?

Question

I am trying to make a form which will show only one text field and a button when its load, but when we click that button it will show one more text field and a button under it and when we click that button it will show three text field and one button and this latest button will submit the form....is it possible?.....if it then please guide me....this is my code...

<div id="envelope">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<center><h1>Edit an existing generic drug</h1></center><br>
<label>Generic Drug Name</label>
<select name = "position" type = "option">
<?php 
$query = "SELECT * FROM brand_generic.generic_drug WHERE 1";
$result =  mysqli_query($connection, $query);
if(!$result){
    die("Database query failed.");
}?><?php
while ($row =  mysqli_fetch_assoc($result)) {?>
     <option value = "<?php echo $row['generic_drug_name'] ?>"
     <?php echo((isset($_POST['position']) && $_POST['position'] == $row['generic_drug_name']) ? 'selected="selected"' : ' ');?>
     ><?php echo $row['generic_drug_name'];?></option>
<?php }

?>
</select>
<input type="submit" name = "edit" value="Edit" id="submit"/>
<?php
    if(isset($_POST['edit'])){ ?>
        <label>New Name</label>
        <input type="text" name="drug_name" value="<?php echo $_POST['position']; ?>" width="100px;"/>
        <input type="submit" name = "submit" value="Submit" id="submit"/>
   <?php 
      if(isset($_POST['submit'])){
        $edited_drug_name = $_POST['drug_name'];
        echo "Hello world";         
      } 
   }

?>  
</form>
</div>

it works when I click on first button it shows another text field and button but when I click new button it doesn't echo out the message...please help

Answer 1

jquery .append should help.

heres an example.

    <script type="text/javascript">
        $( function() {
            $("#button").click( function(){

                var textarea = $("<textarea></textarea>").prop({
                    name: 'ExampleName'
                    style: ''
                }).addClass( 'classesHere' );

                $("form").append(textarea);
            })
        })
    </script>

Answer 2

I would start with a basic form that had one textarea. Remember, ID's cannot start with a number so, you might have to come up with a creative naming convention.

<form id="myform" action="foo" method="post">
<fieldset>
    <p><label for="comments0">Comments</label>
    <textarea id="comments0" name="comments" cols="11" rows="4"></textarea></p>
    <p><a id="addItem" href="#">+ Add another item</a></p>
</fieldset>
<fieldset>
    <input type="submit" value="Submit" />
</fieldset>

You could dynamically create the HTML using jQuery:

var i = 1;
$('#addItem').click(function(event) {
    var markup = '<p><label for="comments' + i + '">Comments<label><textarea id="comments' + i + '" name="comments" cols="11" rows="4" /></textarea></p>';

    $(this).before(markup);
    i++;
    event.preventDefault();
});

Then in your php file, you could do something like this:

<?php

for ($i=0; $i<$_POST['comments'].length; $i++) {
    // handle each text-area accordingly.
}