提交时刷新Ajax / JQuery表单

时间:2012-04-13 20:37:10

标签: jquery ajax forms refresh

我有一个包含三个简单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。

感谢任何帮助!

1 个答案:

答案 0 :(得分: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