John Davidson

Message:

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.

---

My Answer:
button without having to submit the form. One way to achieve this is by using JavaScript to dynamically add a new section to the form when the button is clicked. Here is an example of how you can do this:

1. Add a button to your form with an onclick event that calls a JavaScript function to duplicate the section:

html
Add Section


2. Create a JavaScript function that duplicates the section:

javascript
function duplicateSection() {
// Get the section you want to duplicate
var originalSection = document.getElementById('originalSection');

// Create a copy of the section
var newSection = originalSection.cloneNode(true);

// Append the new section to the form
document.getElementById('form').appendChild(newSection);
}


3. Make sure to give your original section an id so that the JavaScript function can find it:

html

4. Finally, make sure your form has an id so that the JavaScript function can append the new section to it:

html

With these steps, clicking the "Add Section" button will duplicate the original section in your form without having to submit it.