有沒有一種方法可以通過單擊按鈕而不使用提交來復制我的表單中的一個部分？

我一直在嘗試通過單擊表單內的“和”和“或”按鈕向我的表單添加一個部分，但我找不到任何方法。這是我正在使用的 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 所以添加一個部分/行我想盡可能使用另一種方法。

uj5u.com熱心網友回復：

實際上有很多方法可以做到，但其中一種可以是：

• 修改代碼，使其name以[]結尾（陣列型別），這樣才能正確處理表單提交的資料
• 將必要的代碼放入一個JS變數中，最后加一個DIV標簽
• 添加“添加新行”按鈕以將包含代碼的變數附加到 DIV
• 確保每次觸發“添加新行”功能時 DIV id 都會增加 1（一）（以便代碼插入到最后一個 DIV，而不會影響用戶已經完成的資料輸入）——你會看到我使用隱藏欄位來解決問題

所以 HTML 會是這樣的（注意我已經在 J??S var1 變數中硬編碼了 HTML user_meta-list 部分，但是你可以通過你的 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 > \
<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  name="xequal[]"> \
<option value="is equal to">is equal to</option> \
<option value="is not equal to">is not equal to</option> \
</select> \
<input  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 onl oad
  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.createchk.com/SOanswers/subi

這個進一步改進的沙箱鏈接（每行都有洗掉按鈕）

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

標籤：PHPWordPress的形式重复wordpress插件创建

上一篇：BindProperty不適用于物件

下一篇：在django表單的后臺保存客戶