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

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>
        <div class="modal-body">
            <?php global $post;   ?>
            <input type="hidden" placeholder="CurrentIssue" name="issue" value="<?php echo $post->ID; ?>"></input>
            <div class="form-group">
                <label for="message-text" class="form-control-label">
                    <?php _e( 'Link to news article (not social media or forum post) that spins it:', 'mediaspintheme' ); ?>
                </label>
                <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'] : '' ); ?>">
            </div>
             
            <div class="g-recaptcha" style="margin:10px 0;" data-sitekey="<?php echo get_theme_mod( 'captcha_key' ) ?>"></div>
            <input type="hidden" name="article_form_mailer_id" value="1"/>
              
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                <?php _e( 'Close', 'mediaspintheme' ); ?>
            </button>
            <button type="submit" class="btn btn-primary">
                <?php _e( 'SUBMIT', 'mediaspintheme' ); ?>
            </button>
        </div>
    </div>
    </form>
        
    <?php endif; ?>
   
</div>
</div>

<?php if( $mailer->processed ) : ?>
    <?php  echo  $mailer->message;  ?>
<?php endif; ?>

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

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

Answer 1

您没有以正确的方式使用 if。在您的结构中，仅当出现错误或从未发送时才会显示表单。为了解决，重构如下：

<?php if( $mailer->processed ) : ?>
    <?php  echo  $mailer->message;  ?>
<?php endif; ?>
<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' )
    ) ); ?>
    <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>
        <div class="modal-body">
            <?php global $post;   ?>
            <input type="hidden" placeholder="CurrentIssue" name="issue" value="<?php echo $post->ID; ?>"></input>
            <div class="form-group">
                <label for="message-text" class="form-control-label">
                    <?php _e( 'Link to news article (not social media or forum post) that spins it:', 'mediaspintheme' ); ?>
                </label>
                <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'] : '' ); ?>">
            </div>
             
            <div class="g-recaptcha" style="margin:10px 0;" data-sitekey="<?php echo get_theme_mod( 'captcha_key' ) ?>"></div>
            <input type="hidden" name="article_form_mailer_id" value="1"/>
              
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                <?php _e( 'Close', 'mediaspintheme' ); ?>
            </button>
            <button type="submit" class="btn btn-primary">
                <?php _e( 'SUBMIT', 'mediaspintheme' ); ?>
            </button>
        </div>
      </div>
    </form> 
  </div>
</div>

Answer 2

你可以处理 jQuery 和 AJAX。

$('.wordpress-ajax-form').on('submit', function(e) {
    // Prevent page reloading
    e.preventDefault();
    
    $.ajax({
        type: 'POST',
        url: 'youScript.php',
        data: { 
            'youWillGetThisValueInPhpWithThisName': $('.your-input').val(),
             // others inputs
        }
     });
});