如何防止用户提交后表单消失？

Question

我在 php 中有一个模态表单（wordpress 网站的 bootstrap4 主题）。用户在此模式中提交表单后，页面将“重新加载”，并且“表单提交成功”消息将替换该表单。这意味着当用户单击按钮再次打开模式时，那里没有表单；只是一条成功消息。我该如何防止这种行为？我想将用户的表单“重置”为干净的表单，以便他们每次都可以一次又一次地提交。这是上下文中的站点代码：https ://github.com/bettersg/mediaspin/blob/master/articlemodal.php

这是表格本身：

<div class="fade modal pg-show-modal" id="article_modal" tabindex="-1" role="dialog" aria-labelledby="article_modal" aria-hidden="true">

<div class="modal-dialog" role="document">

    <?php $mailer = new PG_Article_Form_Mailer(); ?>

    <?php $mailer->process( array(

            'form_id' => 'article_form_mailer_id',

            'send_to_email' => true,

            'save_to_post_type' => true,

            'post_type' => 'article',

            'captcha' => true,

            'captcha_key' => get_theme_mod( 'captcha_key' ),

            'captcha_secret' => get_theme_mod( 'captcha_secret' )

    ) ); ?>

    <?php if( !$mailer->processed || $mailer->error) : ?>

    <form action="#" class="wordpress-ajax-form" method="post" onsubmit="event.stopImmediatePropagation();event.stopPropagation();">

    <div class="modal-content" id="article_form_mailer_id">

        <div class="modal-header">

            <h5 class="modal-title" id="article_modallabel"><?php _e( 'New Article Submission for Current Issue', 'mediaspintheme' ); ?></h5>

            <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                <span aria-hidden="true">×</span>

            </button>

        </div>

我怀疑这是因为 if 语句 (  <?php if( !$mailer->processed || $mailer->error) : ?>) 围绕表单构建的方式，但我不确定正确的方法是什么。关于如何更改 if 语句或移动它以使其不会导致表单在成功提交后消失有什么建议吗？

表单正确提交并且一切正常。但这个界面怪癖很烦人。

Answer 1

您可以使用 jQuery 和 AJAX。$('.wordpress-ajax-form').on('submit', function(e) {&nbsp; &nbsp; // Prevent page reloading&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; url: 'youScript.php',&nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'youWillGetThisValueInPhpWithThisName': $('.your-input').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// others inputs&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;});});

Answer 2

您没有以正确的方式使用 if 。在您的结构中，仅当出现错误或从未发送时才会显示表单。为了解决这个问题，重构如下：<?php if( $mailer->processed ) : ?>&nbsp; &nbsp; <?php&nbsp; echo&nbsp; $mailer->message;&nbsp; ?><?php endif; ?><div class="fade modal pg-show-modal" id="article_modal" tabindex="-1" role="dialog" aria-labelledby="article_modal" aria-hidden="true">&nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; <?php $mailer = new PG_Article_Form_Mailer(); ?>&nbsp; &nbsp; <?php $mailer->process( array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'form_id' => 'article_form_mailer_id',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'send_to_email' => true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'save_to_post_type' => true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'post_type' => 'article',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'captcha' => true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'captcha_key' => get_theme_mod( 'captcha_key' ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'captcha_secret' => get_theme_mod( 'captcha_secret' )&nbsp; &nbsp; ) ); ?>&nbsp; &nbsp; <form action="#" class="wordpress-ajax-form" method="post" onsubmit="event.stopImmediatePropagation();event.stopPropagation();">&nbsp; &nbsp; <div class="modal-content" id="article_form_mailer_id">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="article_modallabel"><?php _e( 'New Article Submission for Current Issue', 'mediaspintheme' ); ?></h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal" aria-label="Close">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">×</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php global $post;&nbsp; &nbsp;?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" placeholder="CurrentIssue" name="issue" value="<?php echo $post->ID; ?>"></input>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="message-text" class="form-control-label">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php _e( 'Link to news article (not social media or forum post) that spins it:', 'mediaspintheme' ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="article1" required placeholder="https://linkhere.com (do not post social media or forum links)" name="article1" value="<?php echo ( isset( $_POST['article1'] ) ? $_POST['article1'] : '' ); ?>">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="g-recaptcha" style="margin:10px 0;" data-sitekey="<?php echo get_theme_mod( 'captcha_key' ) ?>"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="article_form_mailer_id" value="1"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-secondary" data-dismiss="modal">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php _e( 'Close', 'mediaspintheme' ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-primary">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php _e( 'SUBMIT', 'mediaspintheme' ); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </form>&nbsp;&nbsp; </div></div>