單擊按鈕時如何顯示文本字段？

Question

我正在嘗試制作一個僅在加載時僅顯示一個文本字段和一個按鈕的表單，但是當我們單擊該按鈕時，它將顯示另一個文本字段和一個按鈕，當我們單擊該按鈕時，它將顯示三個文本字段和一個按鈕，最后一個按鈕將提交表單....可以嗎？.....如果可以，請指導我....這是我的代碼...

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

當我單擊第一個按鈕時它會顯示另一個文本字段和按鈕，但是當我單擊新按鈕時它不會回顯該消息...請幫助

Answer 1

jQuery .append應該會有所幫助。

這是一個例子。

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

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

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

Answer 2

我將從具有一個文本區域的基本表單開始。 請記住，ID不能以數字開頭，因此，您可能必須提出創造性的命名約定。

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

您可以使用jQuery動態創建HTML：

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();
});

然后在您的php文件中，您可以執行以下操作：

<?php

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