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

时间:2015-07-11 15:25:53

标签: javascript jquery html ajax forms

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

我有一个打开模态框的链接,然后我使用一些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)
    })

    });
})

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

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

3 个答案:

答案 0 :(得分:2)

第一条消息上显示的消息是由您的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)

答案 1 :(得分: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表单处理事件时为您提供更好的思维方式和解决问题的技巧。

答案 2 :(得分:1)

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