Блог

HTML — это сообщение, загружаемое динамически внутри модального всплывающего окна, я только что понял, что когда я отправляю форму непосредственно в сообщении, она работает, но не работает внутри модального :/

Каждый раз, когда я отправляю форму из модального, я перенаправляюсь на страницу публикации.

Это мой PHP-шаблон, который имеет AJAX и html-код.

 <?php get_header(); ?>

<script>
    jQuery(document).ready(function($){
        $(document).on("submit","#couponform",function(event){
            console.log("hola");
            event.preventDefault();
            var code =  $("#promocode").val(); console.log(code);
            $.ajax({
                type: 'POST',
                url: '/wp-content/themes/buddyboss-theme-child/cpt-functions.php',
                data: {"code": code},
                success: function(data){
                    console.log(data);
                    $('#submit').html(data);
                },
                error: function(jqxhr, status, exception) {
                    alert('Exception:', exception);
                }
            });
            return false;
        });
    });
</script>

<div id="modal-ready">
    <main id="main" class="site-main" role="main" style="width: 70%; margin: auto;">
        <?php
        while ( have_posts() ) : the_post();
        ?>
            <h2 style="text-align: center;">Earn Opportunity</h2>

            <div class="featured-image"><?php the_post_thumbnail(); ?></div>

            <?php
            if ( get_field('require_code_input') ){
            ?>
                <form method="post" id="couponform" action="">
                    <input type="text" placeholder="Enter Promo Code" name="promocode" id="promocode">
                    <div class="action-container" style="display: flex; width: 100%; margin: auto;">
                    <div class="custom-fields" style="width: 50%; line-height: 1.3; text-align: center; vertical-align: middle; margin: auto;">
                        <?php echo 'Earn' . '<br>'; ?>
                        <?php echo ' ' . get_field('points', $current_post_id) . 'pts'; ?>
                    </div>
                    <div class="button-container" style="width: 50%;">
                        <input name="submit" type="submit" value="Submit" id="submit">
                    </div>
                </form>
            </div>
            <?php
            }else{            
            ?>

            <div class="action-container" style="display: flex; width: 100%; margin: auto;">
                <div class="custom-fields" style="width: 50%; line-height: 1.3; text-align: center; vertical-align: middle; margin: auto;">
                    <?php echo 'Earn' . '<br>'; ?>
                    <?php echo ' ' . get_field('points', $current_post_id) . 'pts'; ?>
                </div>
                <div class="button-container" style="width: 50%;">
                    <button onclick="window.location.href='https://w3docs.com';" style="width: 100%; background-color: #FFC51C; color: #ffffff; border-radius: 0; margin: 5% auto;"> GO TO SITE </button>
                </div>
            </div>
            <?php
            }
            ?>

            <h2 class="title"><?php the_title(); ?></h2>

            <div class="content">
                <div id="excerpt"><?php the_excerpt(); ?></div>
                <div id="text-content" style="display: none;"><?php the_content(); ?></div>
                <p class="link-container"><a id="show-more">READ MORE</a></p>
            </div>            

        <?php
        endwhile;
        ?>

    </main><!-- .site-main -->

</div><!-- #modal-ready -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>
 

и это мой cpt-functions.php

     <?php
    if(!empty($_POST)){
      $code = $_POST['code'];
      echo "code :".$code;
    } 
    ?>
 

РЕШАЕМАЯ ЗАДАЧА:
Изменение встроенной функции jQuery в коде на файл .js решило мою проблему.

An id должен быть уникальным.

Вы запускаете while цикл для рендеринга всех записей. В каждом посте будут некоторые элементы, которые не являются уникальными id . Только НЕ используйте идентификаторы в цикле! замените их все классом.

Затем jQuery немного изменится, чтобы настроить таргетинг на классы из отправленной формы.

Часть PHP для изменения:

 if ( get_field('require_code_input') ){
?>
    <form method="post" class="couponform" action="">
        <input type="text" placeholder="Enter Promo Code" name="promocode" class="promocode">
        <div class="action-container" style="display: flex; width: 100%; margin: auto;">
        <div class="custom-fields" style="width: 50%; line-height: 1.3; text-align: center; vertical-align: middle; margin: auto;">
            <?php echo 'Earn' . '<br>'; ?>
            <?php echo ' ' . get_field('points', $current_post_id) . 'pts'; ?>
        </div>
        <div class="button-container" style="width: 50%;">
            <input name="submit" type="submit" value="Submit" class="submit">
        </div>
    </form>
</div>
<?php
}
 

jQuery — это jQuery:

 jQuery(document).ready(function($){
    $(document).on("submit",".couponform",function(event){
        console.log("hola");
        event.preventDefault();
        var code =  $(this).find(".promocode").val(); console.log(code);
        var theInput = $(this).find('.submit')
        $.ajax({
            type: 'POST',
            url: '/wp-content/themes/buddyboss-theme-child/cpt-functions.php',
            data: {"code": code},
            success: function(data){
                console.log(data);
                theInput.val(data); // That is an input! so .val() should be used instead of .html()
            },
            error: function(jqxhr, status, exception) {
                alert('Exception:', exception);
            }
        });
        return false;
    });
});
 

Обратите внимание, что при этом текст кнопки отправки изменится с «Отправить» на отправленный промокод… Довольно странно… Но, может быть, это тест, который вы делаете. 😉