0

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?

  • 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 Aug 16 '19 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. – Julian Camilleri Aug 16 '19 at 10:03
  • @SallyCJ updated; it seems like when injected; something is trashing it on the way to submit. - Weird behaviour. – Julian Camilleri Aug 16 '19 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 Aug 16 '19 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. – Julian Camilleri Aug 16 '19 at 12:29
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.