是否有一种方法来复制一个节在我的形式只需点击一个按钮，而不使用提交?

Question

我一直在尝试通过点击'and' &'或'按钮在我的形式，但我找不到任何方法这样做。这是一个WordPress插件我正在工作的顺便说一句。这是我要复制的代码:

<form method="post" action="">
<section class="form-row">
<select class="select" name="user_meta-list" >
<?php
$user_count = count_users();
$user_data_select = [];
for($x = 1; $x <= $user_count['total_users']; $x++ ){
$user_data = get_user_meta($x);
foreach(array_keys($user_data) as $value) {
if(! in_array($value, $user_data_select)) {
print_r($value);
array_push($user_data_select, $value);
}
}
}
foreach($user_data_select as $value) {
echo    '<option value="' . $value . '">' . $value . '</option>';
}
?>
</select>
<select class="select" name="" id="">
<option value="is gelijk aan">is gelijk aan</option>
<option value="is niet gelijk aan">is niet gelijk aan</option>
</select>
<input class="input-field" type="text" placeholder="Specificatie">

<input id="and-button" class="button" type="button" value="and">
<input id="or-button" class="button" type="button" value="or">
</section>
</form>

我试过用JavaScript来做，它适用于html部分，但不是php代码。我在网上发现的唯一事情是将输入类型从按钮更改为提交并使用POST，但我想在最后添加一个提交按钮，该按钮将使用POST，因此对于添加部分/行，我想使用另一种方法，如果可能的话。

Answer 1

实际上有很多方法可以做到这一点，但其中之一可以是:

• 修改代码，使其名称以[](数组类型)结尾，以便表单提交的数据可以被正确处理
• 将必要的代码放入JS变量中，并在末尾使用DIV标签
• 添加"添加新行"按钮，将包含代码的变量附加到DIV
• 确保DIV id在每个"add new row"触发器上增加1 (1)函数(这样代码将插入到最后一个DIV，而不会影响用户已经完成的数据输入)—您将看到我使用了一个隐藏字段来完成的技巧

所以HTML就像(注意我已经硬编码了HTMLuser_meta-list部分)在JS的var1变量中，但您可以通过PHP的foreach循环动态生成它):

<form method="post" action="target.php">
<div id=insertnext1></div>
<input type=button value="Insert a row" onclick=gogo()>&nbsp;&nbsp;
<input type=submit value="submit">
</form>
<input type=hidden value="1" id=xcount>

<script>
var var1=' 
<section class="form-row"> 
<select class="select" name="user_meta-list[]" > 
<option value="">Please choose</option> 
<option value="ken">ken</option> 
<option value="ken2">ken2</option> 
<option value="ken3">ken3</option> 
</select> 
<select class="select" name="xequal[]"> 
<option value="is equal to">is equal to</option> 
<option value="is not equal to">is not equal to</option> 
</select> 
<input class="input-field" type="text" placeholder="Specificatie" name="details[]">
<select name="xcondition[]"  id=""> 
<option value=""></option> 
<option value="and">and</option> 
<option value="or">or</option> 
</select> 
</section><div id=insertnext[$special$]></div>';

function gogo(){
currentcount=document.getElementById("xcount").value;
var2 = var1.replace("[$special$]", (currentcount *1) +1 );
document.getElementById('insertnext'+currentcount).innerHTML=var2;
document.getElementById("xcount").value=(document.getElementById("xcount").value*1)+1;
}
// add first row onload
window.onload =gogo();
</script>   

， PHP可以这样写:

<?php
$index=0;
while ($index < count($_POST["user_meta-list"])) {
if ($_POST["user_meta-list"][$index] !="") {
echo $_POST["user_meta-list"][$index]. " " ;
echo $_POST["xequal"][$index]. " " ;
echo $_POST["details"][$index]. " " ;
echo $_POST["xcondition"][$index]. " " ;
echo "<br>";
}
$index++;
}
?>

您可以通过以下完整工作的沙箱链接查看结果:

http://www.createchhk.com/SOanswers/subi

和这个进一步改进的沙盒链接(使用删除按钮)

http://www.createchhk.com/SOanswers/subi/index2.php