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
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.
Rate this post
3 of 5 based on 8670 votesComments