Is there a way to duplicate a section in my form by just clicking a button and without using submit?

Question

I have been trying to add a section to my form by clicking the 'and' & 'or' buttons inside of my form but I can't find any way of doing so. This is for a WordPress plugin I'm working on btw. This is the code I want to duplicate:

<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>

I have tried to do it with JavaScript which works for the html parts in it but not the php code. The only things I found online was changing the input type from buttons to submit and using POST but I want to add a submit button at the end that would use post so for adding a section/row I would like to use another method if possible.

Answer 1

Actually there are many ways to do it, but one of them can be:

• Amend the code so that it is with name ending [] (array type), so that the data submitted by the form can be properly processed
• Put the necessary code into a JS variable, with a DIV tag at the end
• Add a "add new row" button to append the variable containing the code to the DIV
• Make sure that the DIV id will be incremented by 1 (one) on each trigger of "add new row" function (so that the code insertion will be to the last DIV, without affecting data input already done by user) - you will see what I have used a hidden field to do the trick

So the HTML will be like (note I have hardcoded the HTML user_meta-list part inside the JS var1 variable , but you can dynamically generate it thru your PHP foreach loop) :

<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>   

and the PHP can be like:

<?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++;
}
?>

You may view the result thru the following fully-working sandbox link:

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

and this further improved sandbox link (with remove button for each row)

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