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

Posted 2023-03-05

【中文标题】根据提交结果隐藏表单打开显示文本

【英文标题】：Hide text on form open show text based on submission result

【发布时间】：2015-09-30 06:17:04

【问题描述】：

首先，我很抱歉提出一个可能被某些人视为基本但我自己学习的问题，当我遇到困难时，SO 对我有很大帮助，就像现在一样。

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

提交前的图片 1 表单

图像 2 表单之后提交

我的问题

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

    );
)

值得一提的是，我正在为模态框使用花式框

如果有人可以就如何修改我的代码以达到上述预期结果提供一些帮助，我们将不胜感激：

【问题讨论】：

success$.post() 的回调中的data 是什么？ $feedback = $("<div>").html(data).find(".form-feedback").hide(); 的预期结果是什么？

尝试删除 HTML 表单上的 <div class="form-feedback"> Thank You We will Get Back to you </div> <div class="form-feedback"> Ooops....Something Went Wrong </div>

【参考方案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)

【参考方案2】：

我相信您主要关心的是在表单提交时控制确认消息（或任何其他回调事件）的显示。因此，我们可以查看您的问题并通过一系列小步骤来解决它们。

第一步，我们应该把重点放在“表单提交状态”上， 了解按下之前和之后触发的事件 提交到表单。

第 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 表单处理事件时为您提供更好的思维方式和解决问题的技能。

【参考方案3】：

@Daniel 谢谢你非常详细的回答，但是对于这个特定的问题，我设法通过简单地将display:none 添加到我的表单中的 div 来解决它。因此，当打开表单时，用户看不到消息，但在提交表单后display:none 被覆盖并显示消息