Сгенерированные jQuery элементы не распознаются в $ _POST

Question

Я разрабатываю плагин Wordpress с использованием PHP и jQuery, функция ниже вызывается при изменении ввода <select>, пока он работает как задумано, и входные данные генерируются правильно, но когда я отправляю форму, сгенерированныйэлементы не определены при вызове в $_POST.

<?php

function random_event() {
    global $wpdb;

    //Table for all the event details
    $tablename = $wpdb->prefix."random_event";

    // Table to store all banner stores
    $tablename2 = $wpdb->prefix."random_event_banner_stores";

    //Table for store all poster
    $tablename4 = $wpdb->prefix."random_event_poster";

    // Table storing all user registrations
    $tablename3 = $wpdb->prefix."random_event_winners";

    //Junction table to map the poster to banner store
    $tablename5 = $wpdb->prefix."random_event_poster_banner";

    //Junction table to map the poster to event
    $tablename6 = $wpdb->prefix."random_event_poster_event";


    $tablename5 = $wpdb->prefix."random_event_poster_banner";

    $sql = "select event.*, banner.name as banner_name, banner.id as banner_id from $tablename as event left join $tablename2 as banner on banner.id = event.store_id";
    $results = $wpdb->get_results($sql);

    $update_this_event = -1;
    $banner_stores = [];
    //Deletion
    if(isset($_POST['delete_event'])) {


        $event_id = esc_sql($_POST['event_id']);

        $sql = "DELETE from $tablename WHERE id= '" . $event_id . "'";

        try{
            $event = $wpdb->query($sql);
        }
        catch (Exception $e) {
            echo "<script>console.log($e);</script>";
        }

    } else if(isset($_POST['update_event'])){

        $update_this_event = intval(esc_sql($_POST['event_id']));
        $banner_store_id = esc_sql($_POST['banner_id']);
        $name = esc_sql($_POST['banner_store_name']);
        $description = esc_sql($_POST['banner_store_description']);
        $location_note = esc_sql($_POST['banner_store_location_note']);
        $address = esc_sql($_POST['banner_store_address']);
        $status = esc_sql($_POST['banner_store_status']);

        $sql = "UPDATE $tablename SET name = '" . $name . "'
        , description = '" . $description . "'
        , location_note = '" . $location_note . "'
        , address = '" . $address . "'
        , status =  '" . $status . "' WHERE id = '" . $banner_store_id . "'";

        try{
            $participants = $wpdb->query($sql);
        }
        catch (Exception $e) {
            echo "<script>console.log($e);</script>";
        }
    } else if(isset($_POST['select_update_event'])){

        $update_this_event = intval(esc_sql($_POST['event_id']));

        // $pssql = "select * from $tablename2";
        // $banner_stores = $wpdb->get_results($pssql);

        $pssql = "select $tablename2.* from $tablename2 left join $tablename on $tablename2.id = $tablename.store_id where $tablename.store_id is null";
        // $pssql = "select * from $tablename2";
        $banner_stores = $wpdb->get_results($pssql);

        $pssql2 = "select $tablename2.* from $tablename2 left join $tablename on $tablename2.id = $tablename.store_id where $tablename.id = '".$update_this_event."'";
        $current_banner_store = $wpdb->get_results($pssql2);

        if(count($current_banner_store) != 0) {
            array_push($banner_stores, $current_banner_store[0]);
        }

        $poster_sql = "select ap.*, a.name as poster_name, ap.qty as qty from $tablename6 as ap inner join  $tablename4 as a on a.id = ap.poster_id where ap.event_id = $update_this_event";

        $poster_event = $wpdb->get_results($poster_sql);

        $poster_petone = [];
        foreach($results as $result) {
            if($result->id == $update_this_event) {
                $poster_sql = "select a.* from $tablename5 as ap inner join $tablename4 as a on a.id = ap.poster_id where banner_store_id = ".$result->store_id;

                $poster_petone = $wpdb->get_results($poster_sql);
            }
        }


    }else if(isset($_POST['cancel_update_event'])){

        $update_this_event = -1;

    }else if (isset($_POST['save_update_event'])) {

        $update_this_event = intval(esc_sql($_POST['event_id']));
        $title = esc_sql($_POST['title']);
        $qty = 0;
        $description = esc_sql($_POST['description']);
        $prize = esc_sql($_POST['prize']);
        $event_code = esc_sql($_POST['event_code']);
        $event_from = esc_sql($_POST['event_from']);
        $event_to = esc_sql($_POST['event_to']);
        $banner_store_id = esc_sql($_POST['banner_store_id']);

        if(isset($_POST['poster_ids'])){
            $poster_ids = $_POST['poster_ids'];
            $poster_qtys = $_POST['poster_qty'];
        }

        $query = "UPDATE $tablename set title='$title',description='$description',event_code='$event_code',valid_from='$event_from',valid_to='$event_to',store_id='$banner_store_id', prize = '$prize' ";
        $query .= "where id = $update_this_event";

        $result_insert = $wpdb->query($query);

        $delete_query = "delete from $tablename6 where event_id =  $update_this_event";
        $wpdb->query($delete_query);

        for($i = 0; $i < count($poster_ids); $i++) {
            $poster_id = esc_sql($poster_ids[$i]);
            $poster_qty = esc_sql($poster_qtys[$i]);

            $poster_query = "INSERT INTO $tablename6 (event_id,poster_id, qty) values ";
            $poster_query .= "('$update_this_event','$poster_id','$poster_qty');";

            $poster_insert = $wpdb->get_results($poster_query);
            $poster_result = $wpdb->insert_id;
        }

        $update_this_event = -1;

        $sql = "select event.*, banner.name as banner_name, banner.id as banner_id from $tablename as event left join $tablename2 as banner on banner.id = event.store_id";
        $results = $wpdb->get_results($sql);
    }

    ?>

    <style type="text/css" emb-not-inline="">

    .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .hidden {
        display: none;
    }

    .banner-button {
        background-color: #ffffff;
        border-radius: 5px;
        padding: 5px;
        font-size: 13px;
        min-width: 75px;
    }

    table {
        border: none;
        text-align: center;
    }

    table tr:nth-child(even) {
        background-color: #dddddd;
    }

    table tr:nth-child(odd) {
        background-color: #ffffff;
    }

    table th {
        background-color: #23282d;
        color: #ffffff;
    }

    table th:first-child{
        border-radius: 20px 0px 0px 0px;
    }

    table th:last-child{
        border-radius: 0px 20px 0px 0px;
    }

    table {
        border-radius: 20px 20px 0px 0px;
    }

    </style>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <h1>View All events</h1>

    <br/>

    <div class="table-container" style="
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    ">

    <table cellpadding="10" border=1 style="border-style: solid #AAA">
        <tr>

            <th>Title</th>
            <th>Description</th>
            <th>Prize</th>
            <th>event Code</th>
            <th>banner Store</th>
            <th>poster Qty</th>
            <th>Validity</th>
            <th>QR code</th>
            <th>Action</th>

        </tr>

        <?php
        foreach($results as $result) {

            if($update_this_event == $result->id) { ?>
                    <tr>
                        <form method="post" name="formtest1" id="formtest1">

                        <td valign="top"><input type="text" name="title" value="<?php echo $result->title ?>"/> </td>
                        <td valign="top"><input type="text" name="description" value="<?php echo $result->description ?>"/> </td>
                        <td valign="top"><input type="text" name="prize" value="<?php echo $result->prize ?>"/> </td>

                        <td valign="top"><input type="text" name="event_code" value="<?php echo $result->event_code ?>"/> </td>
                        <td valign="top">

                            <!-- <select onChange="changebanner(this)" id="banner_store_id" name="banner_store_id"> -->
                            <select id="banner_store_id" name="banner_store_id">
                                <?php
                                foreach($banner_stores as $pstore) {

                                    if($result->banner_id == $pstore->id) {
                                        ?>
                                        <option SELECTED value="<?php echo $pstore->id?>"> <?php echo $pstore->name ?></option>
                                        <?php
                                    }else {
                                        ?>
                                        <option value="<?php echo $pstore->id?>"> <?php echo $pstore->name ?></option>
                                        <?php
                                    }
                                }
                                ?>
                            </select>
                        </td>
                        <td valign="top">
                            <div id="poster_div">

                                <table border="0" cellpadding=5>
                                    <?php
                                    if(count($poster_event) == 0) {

                                        for($i = 0; $i < count($poster_petone); $i++)
                                        {
                                            ?>
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="poster_ids[]" value="<?php echo $poster_petone[$i]->id?>"><?php echo $poster_petone[$i]->name?>
                                                </td>
                                                <td>
                                                    <input type="text" name="poster_qty[]" placeholder= "Qty Allocation" value="<?php echo $poster_petone[$i]->qty ?>">
                                                </td>

                                            </tr>
                                            <?php
                                        }
                                    }else {
                                        for($i = 0; $i < count($poster_event); $i++)
                                        {
                                            ?>
                                            <tr>
                                                <td><input type="hidden" name="poster_ids[]" value="<?php echo $poster_event[$i]->poster_id?>"><?php echo $poster_event[$i]->poster_name?></td>
                                                <td><input type="text" name="poster_qty[]" placeholder= "Qty Allocation" value="<?php echo $poster_event[$i]->qty?>"></td>
                                            </tr>
                                            <?php
                                        }
                                    }?>
                                </table>
                            </div>
                        </td>
                        <td valign="top"><input id="event_from" name="event_from" type="text" value="<?php echo $result->valid_from ?>"/> - <input name="event_to" id="event_to" type="text" value="<?php echo $result->valid_to ?>"/> </td>
                        <td valign="top"></td>
                        <td valign="top">
                            <input type="hidden" name="event_id" value="<?php echo $result->id ?> ">
                            <input type="submit" name="save_update_event" value="save" class="banner-button">
                            <input type="submit" name="cancel_update_event" value="cancel" class="banner-button">
                        </td>

                        </form>
                    </tr>
                <?php
            } else {
                ?>
                <tr>
                    <td valign="top"><?php echo $result->title ?> </td>
                    <td valign="top"><?php echo $result->description ?> </td>
                    <td valign="top"><?php echo $result->prize ?> </td>
                    <td valign="top"><?php echo $result->event_code ?> </td>
                    <td valign="top"><?php echo $result->banner_name ?> </td>
                    <td valign="top"><?php get_poster_of_event($result->id ) ?> </td>
                    <td valign="top"><?php echo $result->valid_from ?> - <?php echo $result->valid_to ?></td>
                    <td valign="top"><?php generate_random("https://generic.com/event/?random=".$result->event_code, $result->title) ?> </td>
                    <td valign="top">
                        <form method="post" name="formtest" id="formtest">
                            <input type="hidden" name="event_id" value="<?php echo $result->id ?> "/>
                            <input type="submit" name="delete_event" value="delete" class="banner-button"/>
                        </form>
                        <form method="post" name="formtest" id="formtest">
                            <input type="hidden" name="event_id" value="<?php echo $result->id ?> "/>
                            <input type="submit" name="select_update_event" value="update" class="banner-button"/>
                        </form>
                    </td>

                </tr>
                <?php
            }
        }
        ?>
    </table>
</div>

<script>

let jQueryNC = jQuery.noConflict();

jQueryNC( function() {
    jQueryNC( "#event_to" ).datepicker({ dateFormat: 'yy-mm-dd' });
    jQueryNC( "#event_from" ).datepicker({ dateFormat: 'yy-mm-dd' });

} );

jQueryNC("body").on("change", "#banner_store_id", function() {
  changebanner(jQueryNC(this));
});

function changebanner(e){
    let jQueryNC = jQuery.noConflict();
            jQueryNC( "#poster_div" ).html("Loading...");
            let formData = new FormData(); // creates an object, optionally fill from <form>
            let value = jQueryNC("#banner_store_id").val();
            console.log(e.value);

            formData.append('poster_id', value);
                formData.append('action', 'get_poster');

                let xhr = new XMLHttpRequest();
                xhr.open("POST", "/admin/admin-post.php");
                xhr.send(formData);

                xhr.onload = () => {
                    let posters = JSON.parse(xhr.response);
                    let htmldiv = '<table border=0 cellpadding=5>';

                    for(let i = 0; i < posters.length; i++)
                    {
                        htmldiv += '<tr>';
                        htmldiv += '<td><input type="hidden" name="poster_ids[]" value="'+posters[i].id+'">'+posters[i].name+'</td>';
                        htmldiv += '<td><input type="text" name="poster_qty[]" placeholder= "Qty Allocation" value="'+posters[i].qty+'"></td>';
                        htmldiv += '</tr>';

                    }
                    htmldiv += '</table>';

                    jQueryNC("#poster_div").html(htmldiv);
                }

        }
</script>

<?php
} ?>

Пояснение: когда входное значение select не изменяется, входные данные внутри контейнера div распознаются при отправке без каких-либо ошибок, но когда содержимое контейнера divизменено через changebanner;новые входные данные и таблицы создаются, но если они передаются, входные данные, такие как poster_ids [], не распознаются $ _POST ['poster_ids']

EDIT добавлен весь код в надежде напрояснение проблемы

Answer 1

Я пытался объяснить проблему в своих комментариях, но, возможно, здесь будет легче увидеть.

• Ваша начальная форма при загрузке страницы содержит множество входных данных и т. Д., Включая некоторые poster_ids и poster_qty.

• Если вы отправите эту форму, нажав кнопку «Отправить», произойдет отправка стандартной HTML-формы через POST. Все входные данные, которые существуют в форме при загрузке страницы, будут отправлены в запросе, и ваш PHP получит их все.

• Но если вы не отправите форму, ивместо этого измените выбранную опцию #banner_store_id, некоторые Javascript вступают во владение. Этот JS сделает несколько вещей:

  • Создайте пустой formData объект, , игнорируя все, что в настоящее время находится в вашей форме ;

  • Добавьте к этому 2 новые пары ключ / значение formData

  • POST эти 2 значения в ваш PHP. Обратите внимание, что это не стандартный HTML POST, как тот, который происходит при нажатии кнопки «Отправить», это AJAX POST. Он по существу не зависит от <form> на странице, и он будет отправлять поля формы только в том случае, если вы специально добавите их. Код, который у вас есть, этого не делает, и поэтому не включает ни одно из ваших существующих полей формы .

  • Если вы попытаетесь использовать $_POST['poster_ids'] в PHPкоторый получает этот JS POST, он потерпит неудачу, потому что эти поля не были в запросе. Есть только poster_id и action.

Если вы do хотите включить все поля в свойФорма в данных, которые вы POST через JS при изменении #banner_store_id, вам нужно создать formData с самой формой, , как показано в документации :

let myForm = document.getElementById('formtest1');
let formData = new FormData(myForm);

Если высделайте это, тогда все входные данные в вашей форме будут объединены и включены в этот formData, и точно так же, как и при обычном POST, все будут отправлены на ваш PHP.

Вот соответствующая часть вашего кода,прокомментировал, чтобы объяснить это далее:

function changebanner(e) {
    // Create a new FormData object - **NOTE** it is empty!  You have not passed
    // in your existing form, so none of the form inputs already on the page are
    // in FormData.  If you POSTed it right away $_POST would be completely empty.
    let formData = new FormData();

    // Now add 2 items to it
    formData.append('poster_id', value);
    formData.append('action', 'get_poster');

    // Now make your POST, and send formData, which has just those 2 items
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "/admin/admin-post.php");
    xhr.send(formData);

    // The POST is done, you sent poster_id and action and nothing else to your PHP
}

Answer 2

Попробуйте вынуть onchange (this) в select и вместо этого используйте jQuery on. ("Change").

Не видя точной ошибки или того, что вы пробовали, трудно сказать точно, нопопытка получить доступ к переменной, которая еще не была создана, часто приводит к неопределенности, потому что вы пытаетесь получить доступ к ней до того, как она существует. Используя функцию jQuery on, вы можете найти вещи, добавленные после загрузки DOM.

Удачи.

$("body").on("change", "#data_store_id", function() {
  changeSELECTED($(this));
});

function changeSELECTED(e) {

  let jQueryNC = jQuery.noConflict();
  jQueryNC("#container_div").html("Loading...");
  let formData = new FormData(); // creates an object, optionally fill from <form>

  formData.append('data_id', e.value);
  formData.append('action', 'get_data');

  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/adminfolder/admin-post.php");
  xhr.send(formData);

  xhr.onload = () => {

    let datas = JSON.parse(xhr.response);
    let htmldiv = '<table border=0 cellpadding=5>';
    for (let i = 0; i < datas.length; i++) {
      htmldiv += '<tr>';
      htmldiv += '<td><input type="hidden" name="data_ids[]" value="' + datas[i].id + '">' + datas[i].name + '</td>';
      htmldiv += '<td><input type="text" name="data_qty[]" placeholder= "Qty Allocation" value="' + datas[i].qty + '"></td>';
      htmldiv += '</tr>';

    }
    htmldiv += '</table>';

    jQueryNC("#container_div").html(htmldiv);
  }

}

<select id="data_store_id" name="data_store_id">
  <?php
        foreach($data_stores as $dstore) {
        if($result->data_id == $dstore->id) {
            ?>
    <option SELECTED value="<?php echo $dstore->id?>">
      <?php echo $dstore->name ?>
    </option>
    <?php
        }else {
            ?>
      <option value="<?php echo $dstore->id?>">
        <?php echo $dstore->name ?>
      </option>
      <?php
        }
    }
    ?>
</select>