如何避免在ajax表单提交时将输入提交到重定向？PHP

HTML是在模式弹出窗口中动态加载的帖子，我刚刚意识到，当我在帖子中直接提交表单时，它可以工作，但在模式中不工作：/

每次我从modal提交表单时，我都会被重定向到post页面

这是我的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(); ?>

jQuery（文档）.ready（函数（$）{
$（文档）。关于（“提交”和“耦合形式”，函数（事件）{
控制台日志（“hola”）；
event.preventDefault（）；
var code=$（“#promocode”）.val（）；console.log（代码）；
$.ajax({
键入：“POST”，
url:“/wp-content/themes/buddyboss-theme-child/cpt-functions.php”，
数据：{“代码”：代码}，
成功：功能（数据）{
控制台日志（数据）；
$（'#submit'）.html（数据）；
},
错误：函数（jqxhr、状态、异常）{
警报（“异常：”，异常）；
}
});
返回false；
});
});
赢得机会
到现场
阅读更多信息

这是我的cpt functions.php

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

已解决：

---

将代码中嵌入的jQuery函数更改为.js文件解决了我的问题。

id必须是唯一的

您正在运行

while

循环来渲染所有帖子。在每个帖子中，都会有一些元素具有非唯一的

id

。不要在循环中使用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
}

---

请注意，这会将提交按钮文本从“提交”更改为已提交的促销代码。。。很奇怪。。。但也许这是你做的测试

提交似乎被阻止了成功回调中的

$（“#提交”）

是什么？@louyspatricebesette对不起，我想我在我的许多测试中删除了它，#提交是输入字段上的id问题中的代码不会导致重定向-只需按“运行代码片段”您可以自己查看并查找任何错误。哈哈哈，是的，在提交按钮中设置促销代码只是一个文本。感谢您的评论，但我在模式中提交时一直被重定向：/n您是否至少在控制台中获得了“hola”和数据？不是在模式中，在帖子页面上它工作得很好，但在模式中它不会生成任何输出-@LouySpatriceBesette，因此您现在可以正确提交多个表单了。我无法确定你的模态是什么。你没有贴出来。无论什么我相信你会自己找到剩下的。

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;
    });
});