Custom Admin Plugin - Injecting repeatable select fields (add, remove) into an Ordered List

admin管理员组

文章数量:1415695

I'm currently creating my first plugin; I came a long way; although I've stumbled upon a problem.

1. I don't know what's the right way of actually creating fields in wordpress - if there's any validation, if there's security to be added such as nonce etc.

2. My current problem: I've noticed a weird behaviour, when I inject a repeatable form field into a form and I submit the form I don't see the data for the injected ones, even though they're identical in the DOM. - Although when I do add more in the document (without injecting the form field) I get the data submitted together with the form.

Form

<form id='new-form' action="" method="post">
  <tr>
    <td><input type="text" value="AUTO_GENERATED" disabled></td>                
    <td>
        <select name="new-placement" id="new-placement">
            <option value="val">slug</option>
        </select>
    </td>               
    <td><input type="text" id="new-slug" name="new-slug"></td>
    <td>
        <ol id="list-container-new">
            <li>
                <select name="new-items[]">
                   <option value="val">name</option>
                </select>
                <button class="remove-item-new">Remove</button>
            </li>                       
        </ol>                  

        <button id="add-item-to-items-new">Add</button>             
    </td>
    <td>
        <?php wp_nonce_field( "items_save", "items_save") ?>
        <button id="newsubmit" name="newsubmit" type="submit">Create</button>
    </td>
  </tr>
</form> 

jQuery to add

    jQuery('#add-item-to-list-new').on('click', function(e) { 
        e.preventDefault();     

        let html = '<li>';
        html += '<select name="new-items[]">';
        itemsVariable.forEach((element, index, arr) => {
            html += '<option value="' + element.id + '">' + element.name + '</option>';         
        }); 
        html += '</select>';
        html += '<button class="remove-item-new">Remove</button>';
        html += '</li>'

        jQuery('#list-container-new').append(html);
    })

The above doesn't get submitted together with the form data; although if I do add it manually in the page, it does. - Is there a step I'm skipping? such as telling wordpress that I'm adding a new field?

I'm currently creating my first plugin; I came a long way; although I've stumbled upon a problem.

1. I don't know what's the right way of actually creating fields in wordpress - if there's any validation, if there's security to be added such as nonce etc.

2. My current problem: I've noticed a weird behaviour, when I inject a repeatable form field into a form and I submit the form I don't see the data for the injected ones, even though they're identical in the DOM. - Although when I do add more in the document (without injecting the form field) I get the data submitted together with the form.

Form

<form id='new-form' action="" method="post">
  <tr>
    <td><input type="text" value="AUTO_GENERATED" disabled></td>                
    <td>
        <select name="new-placement" id="new-placement">
            <option value="val">slug</option>
        </select>
    </td>               
    <td><input type="text" id="new-slug" name="new-slug"></td>
    <td>
        <ol id="list-container-new">
            <li>
                <select name="new-items[]">
                   <option value="val">name</option>
                </select>
                <button class="remove-item-new">Remove</button>
            </li>                       
        </ol>                  

        <button id="add-item-to-items-new">Add</button>             
    </td>
    <td>
        <?php wp_nonce_field( "items_save", "items_save") ?>
        <button id="newsubmit" name="newsubmit" type="submit">Create</button>
    </td>
  </tr>
</form> 

jQuery to add

    jQuery('#add-item-to-list-new').on('click', function(e) { 
        e.preventDefault();     

        let html = '<li>';
        html += '<select name="new-items[]">';
        itemsVariable.forEach((element, index, arr) => {
            html += '<option value="' + element.id + '">' + element.name + '</option>';         
        }); 
        html += '</select>';
        html += '<button class="remove-item-new">Remove</button>';
        html += '</li>'

        jQuery('#list-container-new').append(html);
    })

The above doesn't get submitted together with the form data; although if I do add it manually in the page, it does. - Is there a step I'm skipping? such as telling wordpress that I'm adding a new field?

• plugin-development

Share Improve this question edited Aug 16, 2019 at 11:08 belthazorNv asked Aug 15, 2019 at 9:41 belthazorNvbelthazorNv 10133 bronze badges 10

• Can you show your form code? And are you sure the select's name (new-items[]) is correct? And have you confirmed that the #list-container-new is actually in the form? Try to inspect the generated source. – Sally CJ Commented Aug 16, 2019 at 9:29
• @SallyCJ yes, it's correct, and it's actually added to the list, and I can see it; although not submitted. - Sure will update question with form code. – belthazorNv Commented Aug 16, 2019 at 10:03
• @SallyCJ updated; it seems like when injected; something is trashing it on the way to submit. - Weird behaviour. – belthazorNv Commented Aug 16, 2019 at 10:07
• I'm actually referring to the full form element (<form>...</form>). But it's possible there's a script which alters the form data upon submitting. Try to find that script/code? – Sally CJ Commented Aug 16, 2019 at 10:42
• 1 Yes I didn't add them to the snippet and the button spelling is in the example because I had to change the names here because of disclosure. Thanks so much. – belthazorNv Commented Aug 16, 2019 at 12:29

 |  Show 5 more comments

1 Answer 1

Sorted by: Reset to default 0

A form is not allowed to be a child element of a table, tbody or tr. Attempting to put one there will tend to cause the browser to move the form to it appears after the table (while leaving its contents — table rows, table cells, inputs, etc — behind).

You can have an entire table inside a form. You can have a form inside a table cell. You cannot have part of a table inside a form.

Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).

Read more here.

本文标签： Custom Admin PluginInjecting repeatable select fields (addremove) into an Ordered List