php 如何将输入字段动态添加到表单中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1279534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I dynamically add input fields to a form?
提问by Roland Rabien
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.
我不是一个网络程序员，但我正在创建一个简单的网络应用程序，它有一个表单，用户可以在其中输入一系列点 (x,y,z) 但我不知道用户有多少要进入。我不想猜测可能的最大值（也许是 100？）并在表单上放置 100 个字段，因为它看起来很难看。当用户在不联系服务器的情况下输入数据时，添加更多字段（或取消隐藏字段）的最简单方法是什么。
Currently I'm just using html & php, but I assume to do this I'll need javascript?
目前我只使用 html 和 php，但我假设这样做我需要 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...
知道最简单的方法吗？谢谢...
回答by cakeforcerberus
You will most likely have to use javascript, yes. You can use this or write your own using it as a reference:
您很可能必须使用 javascript，是的。您可以使用它或编写自己的使用它作为参考：
回答by harish patel
1: HTML:
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
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
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--;
})
回答by Daniel
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:
无论如何，对于您的代码，您只需要一个循环，就像这样。我假设 $data 是您想要基于可能来自数据库或其他东西的数组设置的任何数据：
<?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.
对于动态执行它，您不能使用 php。听起来您想使用的是 javascript ajax 和 php 组合。
回答by Tejas Savaliya
Appends some HTML to all paragraphs.
将一些 HTML 附加到所有段落。
<!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>
