Question

首先，我为打开一个可能被某些人看作基本的问题而道歉，但我自己也在学习，当我遇到困难时，这对我帮助很大，就像现在一样。

我有一个打开模态框的链接，然后我使用一些JQUERY和ajax来阻止模式在用户提交表单后关闭

提交前的图像1表单

enter image description here

图片2表格 AFTER 提交

enter image description here

我的问题

在image1中，打开模态时，不应显示带有的文本。

根据表单提交结果，应显示image2中的文本，显示：

成功提交
提交不成功

HTML表格

 <div id="inline3" style="width:400px;display: none;">
        <h3>Withdraw</h3>
        <form name="withdrawForm" action="" id="withdraw-form" method"post">
        Amount<br /> <input type="text" name="amount" value="" /><br />
        <input type="submit" value="Withdraw" name="withdraw" class="buttono" />
        </form>
        <div class="form-feedback">
        Thank You We will Get Back to you 
        </div>
         <div class="form-feedback">
        Ooops....Something Went Wrong
        </div>
       <div>

JQUERY

$(function(){
    $("#withdraw-form").submit(function(e){
    e.preventDefault(); 

    $form = $(this);

    $.post(document.location.url, $(this).serialize(), function(data){
        $feedback = $("<div>").html(data).find(".form-feedback").hide();
        $form.prepend($feedback)[0].reset();
        $feedback.fadeIn(1500)
    })

    });
})

可能值得一提的是我在模态框中使用花式框

如果有人能就如何修改我的代码以获得上述所需结果给我一些帮助，我们将不胜感激：

Answer 1

第一条消息上显示的消息是由您的html代码

引起的

    <div class="form-feedback">
    Thank You We will Get Back to you 
    </div>
     <div class="form-feedback">
    Ooops....Something Went Wrong
    </div>
   <div>

表格之后。

并更改您的$feedback

$feedback = $('<div></div>').html(data)

Answer 2

我认为您的主要关注点是在表单提交时控制确认消息（或任何其他回调事件）的显示。因此，我们可以通过一系列小步骤来查看您的问题并对其进行攻击。

步骤1.我们应该把重点放在“表单提交状态”上，了解按下之前和之后触发的事件提交表格。
步骤2.更改确认消息的状态（通过CSS）阻止/或您要实施的其他回调事件/操作。
步骤3.构建Web视图的确认消息块（即设置HTML div以在状态之后显示消息改变）。

让我们先解决第1步，

您可以创建一个“提交处理程序”功能来处理表单提交状态，如下所示：

    // Ajax form submission                  
            submitHandler: function(form)
            {
                $(form).ajaxSubmit(
                {
                    beforeSend: function()
                    {
                        $('sample-form button[type="submit"]').attr('disabled', true);
                    },
                    success: function()
                    {
                        $("#sample-form").addClass('submitted');
                    }
                });
            }

步骤2，如前所述，我们已在成功提交表单时为回调分配了“已提交”的CSS类。 “.ajaxSubmit”方法允许您从表单元素中收集信息，以确定如何管理提交过程。您可以在http://jquery.malsup.com/form/

查找更多详细信息

所以现在我们必须设置“初始”和“提交”状态CSS代码以与您的回调函数进行交互。

    /* initial state */
.sample-form .message {
    display: none;
    }

    /* submitted state */
.sample-form.submitted .message {
    display: block;
    padding: 25px 30px;
    background: transparent;
    font: 300 18px/27px 'Open Sans', Helvetica, Arial, sans-serif;
    text-align: center;
    }

最后在第3步中，我们设置了HTML表单代码和消息部分，以符合我们在javascript代码中设置的显示逻辑。

<!-- Sample Form-->
            <form action="sample-form-process.php" method="post" id="sample-form-1" class="sample-form">

                <fieldset>                  
                    <section>
                        <label class="input">
                            <input type="text" name="name" id="name" placeholder="Your name">
                        </label>
                    </section>

                    <section>
                        // next form input field...
                    </section>

                </fieldset>

                <footer>
                    <p class="text-center">
                    <button type="submit">Fill the form to download!</button>
                    </p>

                </footer>

            <!-- Your Message Block -->
                <div class="message">
                    <p>Thank you for your info! Bla bla bla...</p>
                </div>

            </form>         
            <!-- End Sample Form-->

注意我们如何在成功回调表单提交后将“提交”类附加到我们的示例表单，以及我们如何使用CSS来区分消息的“隐藏”和“显示”状态。最后，使用“div”来保存我们的Web视图消息块。

希望这有助于在使用AJAX表单处理事件时为您提供更好的思维方式和解决问题的技巧。

Answer 3

@Daniel感谢您提供非常详细的答案，但针对这个具体问题，我设法通过在表单中将display:none添加到我的div中来解决它。因此，当打开表单时，用户不会看到该消息，但在提交表单后display:none会被覆盖并显示消息

根据提交结果隐藏表单打开显示文本上的文本

3 个答案: