如果表单操作中有 URL,如何避免表单提交后重定向?

发布于 2024-12-07 01:57:52 字数 1534 浏览 3 评论 0原文

我有一个如下所示的表单:

<form name="formi" method="post"  action="http://domain.name/folder/UserSignUp?f=111222&postMethod=HTML&m=0&j=MAS2"  style="display:none">
...
<button type="submit" class="moreinfo-send moreinfo-button" tabindex="1006">Subscribe</button>

在脚本文件中,我有这个代码段,我在其中提交数据,而在模式框中,我在订阅者通过验证后表示感谢。

function () {
                        $.ajax({
                            url: 'data/moreinfo.php',
                            data: $('#moreinfo-container form').serialize() + '&action=send',
                            type: 'post',
                            cache: false,
                            dataType: 'html',
                            success: function (data) {
                                $('#moreinfo-container .moreinfo-loading').fadeOut(200, function () {
                                    $('form[name=formi]').submit();
                                    $('#moreinfo-container .moreinfo-title').html('Thank you!');
                                    msg.html(data).fadeIn(200);
                                });
                            },

不幸的是,在我提交数据后,我被导航到表单操作中给出的域。我尝试在代码中插入 return false; (首先插入表单标签,然后插入 js 代码),但数据没有插入到数据库中。如果我只想发布数据并留在我的网站上并提供我自己的反馈,我需要做什么。

我编辑了 Eric Martin 的 SimpleModal 联系表单,因此如果需要更多代码来解决我的问题,您可以在此处查看原始代码:http://www.ericmmartin.com/projects/simplemodal-demos/(联系表)

I have a form that looks like this:

<form name="formi" method="post"  action="http://domain.name/folder/UserSignUp?f=111222&postMethod=HTML&m=0&j=MAS2"  style="display:none">
...
<button type="submit" class="moreinfo-send moreinfo-button" tabindex="1006">Subscribe</button>

In the script file I have this code segment where I submit the datas, while in a modal box I say thank you for the subscribers after they passed the validation.

function () {
                        $.ajax({
                            url: 'data/moreinfo.php',
                            data: $('#moreinfo-container form').serialize() + '&action=send',
                            type: 'post',
                            cache: false,
                            dataType: 'html',
                            success: function (data) {
                                $('#moreinfo-container .moreinfo-loading').fadeOut(200, function () {
                                    $('form[name=formi]').submit();
                                    $('#moreinfo-container .moreinfo-title').html('Thank you!');
                                    msg.html(data).fadeIn(200);
                                });
                            },

Unfortunately, after I submit the datas, I'm navigated to the domain given in the form's action. I tried to insert return false; in the code (first into the form tag, then into the js code) but then the datas were not inserted into the database. What do I need to do if I just want to post the data and stay on my site and give my own feedback.

I edited Eric Martin's SimpleModal Contact Form, so if more code would be necessary to solve my problem, you can check the original here: http://www.ericmmartin.com/projects/simplemodal-demos/ (Contact Form)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

空气里的味道 2024-12-14 01:57:52

通常返回 false 足以阻止表单提交,因此请仔细检查您的代码。应该是这样的

$('form[name="formi"]').submit(function() {
  $.ajax(...); // do your ajax call here
  return false; // this prevent form submission
});

更新

这是您评论的完整答案

我尝试过这个,但没有成功。我需要在succes部分提交数据,不是吗?

也许,这取决于您的逻辑和您的具体需求。通常,为了完成您要求的操作,我使用 jQuery 表单插件 ,它可以很好地处理这种行为。

从您的评论中我看到您没有使用 $.ajax 调用提交表单本身,但您从该调用中检索了某种数据,不是吗?那么你在这里有两个选择:

使用纯 jQuery(无表单插件)

$('form[name="formi"]').submit(function() {
  $.ajax(...); // your existing ajax call
  // this will post the form using ajax
  $.post($(this).attr('action'), { /* pass here form data */ }, function(data) {
    // here you have server response from form submission in data
  })
  // this prevent form submission
  return false;
});

使用表单插件是相同的,但你不必处理表单数据检索(上面注释的部分)并返回 false,因为插件会为你处理这个。代码就是

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm(function() {
    // this call back is executed when the form is submitted with success
    $.ajax(...); // your existing ajax call
  }); 
});

这样。请记住,使用上述代码,您现有的 ajax 调用将在表单提交后执行。因此,如果这对您的需求来说是一个问题,您应该更改上面的代码并使用接受 选项对象。所以上面的代码可以重写为

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm({
    beforeSubmit: function() { $.ajax(...); /* your existing ajax call */},
    success: function(data) { /* handle form success here if you need that */ }
  }); 
});

Usually returning false is enough to prevent form submission, so double check your code. It should be something like this

$('form[name="formi"]').submit(function() {
  $.ajax(...); // do your ajax call here
  return false; // this prevent form submission
});

Update

Here is the full answer to your comment

I tried this, but it didn't work. I need to submit the data in the succes part, no?

Maybe, it depends from your logic and your exact needs. Normally to do what you asking for I use the jQuery Form Plugin which handle this kind of behavior pretty well.

From your comment I see that you're not submitting the form itself with the $.ajax call, but you retrieve some kind of data from that call, isn't it? Then you have two choices here:

With plain jQuery (no form plugin)

$('form[name="formi"]').submit(function() {
  $.ajax(...); // your existing ajax call
  // this will post the form using ajax
  $.post($(this).attr('action'), { /* pass here form data */ }, function(data) {
    // here you have server response from form submission in data
  })
  // this prevent form submission
  return false;
});

With form plugin it's the same, but you don't have to handle form data retrieval (the commented part above) and return false, because the plugin handle this for you. The code would be

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm(function() {
    // this call back is executed when the form is submitted with success
    $.ajax(...); // your existing ajax call
  }); 
});

That's it. Keep in mind that with the above code your existing ajax call will be executed after the form submission. So if this is a problem for your needs, you should change the code above and use the alternative ajaxForm call which accepts an options object. So the above code could be rewritten as

$(document).ready(function() { 
  // bind 'myForm' and provide a simple callback function 
  $(form[name="formi"]).ajaxForm({
    beforeSubmit: function() { $.ajax(...); /* your existing ajax call */},
    success: function(data) { /* handle form success here if you need that */ }
  }); 
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文