有没有一种方法可以通过单击按钮而不使用提交来复制我的表单中的一个部分？答案

【问题标题】：Is there a way to duplicate a section in my form by just clicking a button and without using submit?有没有一种方法可以通过单击按钮而不使用提交来复制我的表单中的一个部分？
【发布时间】：2022-11-16 04:56:28
【问题描述】：

我一直在尝试通过单击表单内的“和”和“或”按钮向我的表单添加一个部分，但我找不到任何方法。这是我正在使用的 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 所以添加一个部分/行我想尽可能使用另一种方法。

【问题讨论】：

你好。目前尚不清楚你想要完成什么。我在这段代码中没有看到任何试图向表单添加行的内容。我认为你需要详细说明你想做什么以及你想怎么做。

标签： php wordpress forms duplicates wordpress-plugin-creation

【解决方案1】：

实际上有很多方法可以做到，但其中一种可以是：

修改代码，使其name以[]结尾（数组类型），这样才能正确处理表单提交的数据
将必要的代码放入一个JS变量中，末尾有一个DIV标签
添加“添加新行”按钮以将变量附加到 DIV
确保每次触发“添加新行”功能时，DIV id 都会递增 1（一）

所以 HTML 会是这样的（注意我已经在 JS var1 变量中硬编码了 HTML，但是你可以通过你的 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/

【讨论】：