How can I dynamically add input fields to a form? - php

Question

I'm not much of a web programmer, but I'm creating a simple web app that has a form where the user can enter a series of points (x,y,z) but I don't know how many the user is going to enter. I don't want to guess the probable maximum (100 maybe?) and put 100 fields on the form because it would look ugly. What's the easiest way to add more fields (or unhide fields) as the user enters data without contacting the server.
Currently I'm just using html & php, but I assume to do this I'll need javascript?
Currently my code looks like this, as the user enters data, I want another row to appear.
<form action="edit.php" method="post">
<table border=1>
<tr>
<td>
<td>X
<td>Y
<td>Z
</tr>
<tr>
<td>1</td>
<td><input type=text name=x1 size=10 value="0.4318"></td>
<td><input type=text name=y1 size=10 value="0.0000"></td>
<td><input type=text name=z1 size=10 value="0.1842"></td>
</tr>
<tr>
<td>2</td>
<td><input type=text name=x2 size=10 value="0.4318"></td>
<td><input type=text name=y2 size=10 value="0.0000"></td>
<td><input type=text name=z2 size=10 value="-0.1842"></td>
</tr>
<tr>
<td>3</td>
<td><input type=text name=x3 size=10 value="-0.3556"></td>
<td><input type=text name=y3 size=10 value="0.0000"></td>
<td><input type=text name=z3 size=10 value="0.1636"></td>
</tr>
... I want more to appear here...
</table>
<button name="submit" value="submit" type="submit">Save</button>
</form>
Any idea the easiest way? Thanks...

Answer 1

I would use jQuery and append the new inputs.

Answer 2

You will most likely have to use javascript, yes. You can use this or write your own using it as a reference:
http://www.mredkj.com/tutorials/tableaddrow.html

Answer 3

1: HTML :
<div class="form-group app-edu">
<label for="Example Details" class="col-xs-3 col-sm-2 control- label">Example Details</label>
<div class="form-group add-field">
<div class="user">
<select name="xx[]" id="xx" required>
<option value="">Education</option>
<option value="Class 10">Class 10</option>
<option value="Class 12">Class 12</option>
<option value="Diploma">Diploma</option>
<option value="PG Diploma">PG Diploma</option>
<option value="Bachelors Degree">Bachelors Degree</option>
<option value="Masters Degree">Masters Degree</option>
<option value="Other Certifications">Other Certifications</option>
</select>
<input type="text" placeholder="Name of Board" name="xx[]" id="xx" required>
<input type="text" placeholder="Name of Institute" name="xx[]" required id="xx">
<input type="text" placeholder="xx" name="xx[]" required id="xx">
<select name="xx[]" id="xx" required>
<option value="">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
<option value="xx">xx</option>
</select>
<input type="text" placeholder="Year and Month of Exam" name="date[]" required id="date" autocomplete="off">
</div>
<div class="add-more"><span>+</span>Add More</div>
</div>
</div>
2: PHP
if(isset($_POST['submit']))
{
$xx= json_encode($_POST["xx"]);
$xx= json_encode($_POST["xx"]);
$xx= json_encode($_POST["xx"]);
$xx= json_encode($_POST["xx"]);
$xx= json_encode($_POST["xx"]);
$xx= json_encode($_POST["xx"]);
$query=mysql_query("INSERT INTO `xxx` (`xx`, `xxx`, `xxx`) VALUES ('NULL', '$xx','$xx','$xx')");
}
3: JS
var data_fo = $('.add-field').html();
var sd = '<div class="remove-add-more">Remove</div>';
var data_combine = data_fo.concat(sd);
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".user"); //Fields wrapper
var add_button = $(".add-more"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append(data_combine); //add input box
//$(wrapper).append('<div class="remove-add-more">Remove</div>')
}
// console.log(data_fo);
});
$(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
e.preventDefault();
$(this).prev('.user').remove();
$(this).remove();
x--;
})

Answer 4

What you're saying is that you're hand writing the input tags? Or are you saying that you want a dynamic action where a user clicks a button and it adds more table rows?
In anycase, for your code, you just need a loop, like so. I assume $data is whatever data you want to set based on an array that is probably from the database or something:
<?php
for($i=0, $iMaxSize=count($data); $i<$iMaxSize; $i++)
{
?>
<tr>
<td><?= $i+1 ?></td>
<td><input type=text name=x1 size=10 value="<?=$data[$i]['something']"></td>
<td><input type=text name=y1 size=10 value="<?=$data[$i]['somethingelse']"></td>
<td><input type=text name=z1 size=10 value="<?=$data[$i]['somethingelseagain']"></td>
</tr>
<?php
} // end for
?>
Of course you can't copy and past the above, but that's a good starting point.
For dynamically doing it, you can't use php. What it sounds like you want to use is javascript ajax, and php combination.

Answer 5

Appends some HTML to all paragraphs.
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").append("<strong>Hello</`enter code here`strong>");
</script>
</body>
</html>