Передать обновленное значение помощи из формы с помощью AJAX.

Вопрос или проблема

Я работаю с WordPress и хочу получать обновленное значение поля aid из формы каждый раз, когда нажимается кнопка отправки. Есть две кнопки отправки, и я хочу, чтобы id соответствовал нажатой строке.

HTML Форма (показывается динамически с помощью PHP кода)

foreach( $results as $result ) {
$form.= '<form id="voteform" action="" method="post">';
$form.= "<input id='aid' name="aid" type="text" value="$result->aid">";

$form.=" <input class="star" class="star" id='star5'  type="submit"  name="star5" value="5">";
$form.=" <input class="star" class="star" id='star6'  type="submit"  name="star5" value="5"></form";

jQuery

$(document).on("click",".star", function(e) {
    e.preventDefault();
var aidd = jQuery("#aid").val();
sentdata =({

            action: 'star',
            aid:aidd,

        })
$.post(yes.ajaxurl, sentdata, function (res) { //начало функции
         alert(aid);
            $("#myresult").html(res);

            return false;
        } //конец функции
        ,
        'json');    }); //конец внутренней функции
}); //конец главной функции

php код

add_action( 'wp_ajax_star', 'star' );
add_action( 'wp_ajax_nopriv_star', 'star');


function star()
{

    $aid = $_POST['aid'];
echo json_encode($aid);
die();
}

Я немного запутался – почему две кнопки отправки? И вы выводите один и тот же id несколько раз (внутри цикла foreach), что приведет к сбою jQuery. Попробуйте следующее, используя классы:

$form = '';
foreach ( $results as $result ) {
    $value = esc_attr( $result->aid );
    $form .= '<form method="post" class="aid-form">';
        $form .= "<input name="aid" type="text" value="$value" />";
        $form .= "<input name="star5" class="star" type="submit" value="5" />";
    $form .= '</form>';
}

А затем ваш jQuery:

$( document ).on( "submit", ".aid-form",
    function( e ) {
        e.preventDefault();
        var data = {
            action: "star",
            aid: $( this ).find( "input[name=aid]" ).val() // Получить значение "aid" из текущей формы, отправляющей       
        };

        $.post(
            yes.ajaxurl,
            data,
            function( result ) {
                window.alert( result );
                $( "#myresult" ).html( result );
            },
            "json"
        );
    }
);

Ответ или решение

Для решения вашей задачи по передаче обновленного значения поля aid с формы, используя AJAX в WordPress, необходимо внести несколько ключевых изменений во все аспекты кода: HTML, jQuery и PHP. Давайте рассмотрим эти изменения шаг за шагом.

1. Изменение HTML формы

Прежде всего, необходимо убедиться, что каждый экземпляр поля aid имеет уникальный идентификатор. Однако, в данном случае, мы можем обойтись без идентификаторов, используя классы. Также нужно правильно использовать атрибуты формы. Вот обновленный код для генерации формы:

$form = '';
foreach ($results as $result) {
    $value = esc_attr($result->aid);
    $form .= '<form method="post" class="aid-form">';
    $form .= "<input name='aid' type='text' value='$value' />";
    $form .= "<input name='star5' class='star' type='submit' value='5' />";
    $form .= '</form>';
}

2. Обновление jQuery

Теперь, когда мы пересоздали форму, обновим jQuery, чтобы он корректно обрабатывал отправку каждой формы и извлекал значение aid из текущей формы:

$(document).on("submit", ".aid-form", function(e) {
    e.preventDefault();

    var data = {
        action: "star",
        aid: $(this).find("input[name=aid]").val() // Получаем значение "aid" из текущей формы
    };

    $.post(
        yes.ajaxurl,
        data,
        function(result) {
            alert(result); // Выводим результат в алерте
            $("#myresult").html(result); // Обновляем содержимое элемента с ID myresult
        },
        "json"
    );
});

3. PHP-код для обработки AJAX-запроса

Код на стороне сервера, который обрабатывает AJAX-запрос, остается в принципе тем же, но важно убедиться, что он правильно возвращает данные. Вот окончательный вариант PHP-кода:

add_action('wp_ajax_star', 'star');
add_action('wp_ajax_nopriv_star', 'star');

function star() {
    $aid = $_POST['aid']; // Получаем значение aid из запроса
    echo json_encode($aid); // Возвращаем значение в формате JSON
    wp_die(); // Завершаем выполнение
}

Заключение

Теперь при нажатии на любую из кнопок в динамически созданных формах, будет отправлено значение aid, соответствующее конкретной строке. Этот процесс гарантирует, что каждое нажатие кнопки будет работать независимо, благодаря классу, к которому мы привязываем обработчик событий в jQuery.

SEO-оптимизация и читаемость

Чтобы текст был более SEO-оптимизированным, используйте заголовки с ключевыми словами, такими как "AJAX в WordPress", "Передача данных формы", "Динамические формы в PHP", и другие. Примените структурирование через подзаголовки (H2, H3), чтобы сделать текст более читаемым и удобочитаемым для покупателей или разработчиков.

Если у вас возникли дополнительные вопросы или вам нужно более детальное объяснение, не стесняйтесь спрашивать!

Оцените материал
Добавить комментарий

Капча загружается...