How can I add more textboxs to page with php? - php

Question

So I have this snippet of code that i want to insert into my site.
<table border="1">
<col width="130">
<col width="80">
<tr>
<td align = "right">Steps:</td><td align="center">Add as many steps as you need</td>
</tr>
<tr>
<td align = "right">Step 1:</td> <td><textarea style="width: 300px" class="form-control" name="steps[]" rows="3"></textarea></td>
</tr>
<tr>
<td align = "right">Step 2:</td> <td><textarea style="width: 300px" class="form-control" name="steps[]" rows="3"></textarea></td>
</tr>
<!--<tr>
<td align = "right">Step 3:</td> <td><textarea style="width: 300px" class="form-control" name="steps[]" rows="3"></textarea></td>
</tr>
<tr>
<td align = "right">Step 4:</td> <td><textarea style="width: 300px" class="form-control" name="steps[]" rows="3"></textarea></td>
</tr>
-->
</table>
For the most part, I have some commented out since I am testing to make sure that my site can handle multiple text boxs but the problem that I have is how can I insert steps into my site using php? I have these all on .php files in case you are wondering but I would like to insert more boxes with a button that is just under the current boxes. Every time the user clicks it, it should insert another box underneath the current boxes and update the number accordingly. I just am not sure where to start and how to get them in. Any ideas?

Answer 1

You would create new elements in JS and jQuery using the following code:
HTML
<button id="addButton">Add me!</button>
JS
var stepCounter = 3; //Number of the first step to be added
$('#addButton').click(function () {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var textarea = document.createElement("textarea");
$(textarea).attr("name", "steps[]");
$(td1).innerHTML("Step " + stepCounter);
stepCounter++;
$(tr).append(td1);
$(tr).append(td2);
$(td2).append(textarea);
$('#giveTheColAnId').append(tr);
});
Remember to include jQuery for this solution
Note that this code might not be perfect, but it should give you a very good start.

Answer 2

You can add these new Boxes with JavaScript/JQuery, if you dont want to reload the page after adding a new box. I would really recommend to have a look at this, instead of trying to do it with PH.
If you really want to do it just with php, you have to have a submit-button in a form
so add something like
<form method="post" action="?">
<input type="submit" name="submit" value="add row">
</form>
Now the PHP-part:
if(isset($_POST['submit'])) {
echo " [your usual tr-td-structure] ";
}
Keep in mind, that after reloading the page, a variable will lose its value.
So if you want to count up, you have to do it with javascript (or determine somehow which Step is the current and insert it in the echo). Of course set the last step in a hidden field inside the form (or append it as a get-param).

Answer 3

Can you use Jquery, Can't you do something like this ?
$(document).ready(function(){
$('#myButton').click(function(){
$(':input').append('<input type="textbox">');
});
});