【问题标题】:Ajax/JQuery form refresh on submit提交时刷新 Ajax/JQuery 表单
【发布时间】:2012-04-26 05:44:30
【问题描述】:

我有一个页面,其中包含三个简单的 html 表单,它们提交到数据库中的各种表(使用 AJAX 和 JQuery)。提交表单后,它目前会消失并发布一条消息:

<div class="success_m" style="display:none;">
   <p>Manufacturer has been added!</p>
   <h4><a href="path/to/the/forms/page">Add another Manufacturer!</a></h4>
</div>

要将另一个制造商发布到数据库中,我单击“添加另一个制造商!”链接并刷新整个页面。我试图设置它,以便在提交表单时消失,显示成功消息一秒钟,然后清除的表单返回......它可以工作,除了现在表单根本没有消失,消息就在它下面闪烁。

我的尝试如下,谢谢你的建议!!

迈克

$(document).ready(function(){
    $("form#submit_m").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var manu_name       = $('#manu_name').attr('value');
    var manu_web        = $('#manu_web').attr('value');
    var manu_email      = $('#manu_email').attr('value');
    var manu_phone      = $('#manu_phone').attr('value'); 
    var manu_phone_ext  = $('#manu_phone_ext').attr('value');
    var manu_info       = $('#manu_info').attr('value'); 

        $.ajax({
            type: "POST",
            url: "process_m.php",
            data:"manu_name="+ manu_name+"&manu_web="+manu_web+"&manu_email="+manu_email+"&manu_phone="+ manu_phone
            +"&manu_phone_ext="+manu_phone_ext+"&manu_info="+manu_info,
            success: function(){
                // reset form, success message, refresh form 
                resetForm($('#submit_m'));
                $('form#submit_m').hide();
                $('div.success_m').fadeIn(250).delay(1000).fadeOut(250);
                $('form#submit_m').show();
            }
        });
    return false;
    });
});

成功队列中的resetform函数来自THIS SO post。

感谢任何帮助!

【问题讨论】:

    标签: jquery ajax forms refresh


    【解决方案1】:

    show() function 的调用中缺少左括号和右括号

    ...
    $('div.success_m').fadeIn(250).delay(1000).fadeOut(250);
    $('form#submit_m').show(); // add parenthesis here
    ...
    

    要使表单隐藏并重新出现,您需要像成功 div 一样将其淡出或使用 setTimeout() 之类的东西。您现在处理它的方式只是隐藏然后显示,中间没有中断。所以它看起来是瞬间的......

    例子:

    setTimeout(function() { $('form#submit_m').show(); }, 1000);
    

    Here is a jsFiddle example

    【讨论】:

    • 好的。它确实有效,只是现在表单永远不会消失。该消息仅显示在其下方并消失。它很实用,但我觉得表单应该消失,以便用户确信他们的输入已被接受。
    • 不,仍然没有得到它...表单不会消失。
    • 传奇。 @Gabe 抱歉耽搁了,不得不赶快班飞机。搞定了,谢谢你牵着我的手。最好的,迈克
    猜你喜欢
    • 2011-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多