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

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) {

    // Prevent page reloading

    e.preventDefault();

    

    $.ajax({

        type: 'POST',

        url: 'youScript.php',

        data: { 

            'youWillGetThisValueInPhpWithThisName': $('.your-input').val(),

             // others inputs

        }

     });

});

Answer 2

您没有以正确的方式使用 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>