Dudo1985
Dudo1985

Reputation: 289

Dynamically added form field doesn't post to server

I add dynamically a field when a button is clicked, with this code:

jQuery("#yasr-add-field-edit-multiset").on('click', function() {
var newTextBoxDiv = jQuery(document.createElement('tr'))

newTextBoxDiv.html(' \
                    <td colspan="2">Element #' + counter + ' <input type="text" name="edit-multi-set-element-' + counter + ' " value="" > \
                    <input type="hidden" name="stored_field_id_for_row_' + counter + ' " value=" ' + counter + ' "></td> \
                  ');

newTextBoxDiv.appendTo("#yasr-table-form-edit-multi-set");

This is the form and table that is showed

<form action=" <?php echo admin_url('options-general.php?page=yasr_settings_page') ?>" id="form_edit_multi_set" method="post">
    <input type="hidden" name="yasr_edit_multi_set_form" value="<?php echo $set_type ?>" />


        <table id="yasr-table-form-edit-multi-set">
            <tr>

                <td id="yasr-table-form-edit-multi-set-header"> 
                     //Code
                </td>

                 <td id="yasr-table-form-edit-multi-set-remove"> 
                    //code
                 </td>

            </tr>
        </table>
</form>

When I sand a value from the dynamically added input field, it's not send to the server, $_POST totally ignore it. I can't figure it out

Upvotes: 3

Views: 1622

Answers (1)

Matyas
Matyas

Reputation: 13702

I've created a Fiddle based on your code.

It adds the fields, but unfortunately jsFiddle blocks the POSTing forms. Therefore I can only use $.serializeto see what fields would be sent from the form.

According to my tests it $.serialize gathers all the necessary data, and the same should happen when POSTing the form.

Form

form to submit

Console output of $.serialize:

yasr_edit_multi_set_form=1&
edit-multi-set-element-0=hello&
stored_field_id_for_row_0=0&
edit-multi-set-element-1=world&
stored_field_id_for_row_1=1 

My guess is that your issue lies somewhere else. Make sure you examine (Chrome dev tools / Firebug) the actual data that is posted, to see if they are sent from the browser or not.

If they are sent, your problem lies somewhere in the backend.

Upvotes: 2

Related Questions