Javascript jquery 的表单提交在 IE 中不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3770324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:04:24  来源:igfitidea点击:

jquery's form submit not working in IE

javascriptjqueryinternet-explorer

提问by corroded

What we are trying to do here is that we have a form with an id of upgrade_form. We also have a form called 'paypal_submit' form. This form is blank. 'upgrade_form' has billing detail fields(address, name, expiry etc)

我们在这里尝试做的是我们有一个id为upgrade_form的表单。我们还有一个名为“paypal_submit”的表单。这个表格是空白的。'upgrade_form' 有账单明细字段(地址、姓名、到期日等)

We then have just one submit button, and the logic was that it will submit the form if a credit card radio button is checked, but it will show a nyromodal(http://nyromodal.nyrodev.com) lightbox when you choose the paypal radio button and click submit.

然后我们只有一个提交按钮,逻辑是如果选中信用卡单选按钮它会提交表单,但是当您选择贝宝时它会显示一个 nyromodal( http://nyromodal.nyrodev.com) 灯箱单选按钮并单击提交。

  • EDIT *
  • 编辑 *

Okay, we totally revamped the whole process. We first added 2 hidden fields that are not included in the form. These 2 fields contain urls for credit card and paypal. When you select the credit card radio button, you get the credit card url. When you select the paypal radio button, you get the paypal url.

好的,我们彻底改造了整个过程。我们首先添加了 2 个未包含在表单中的隐藏字段。这两个字段包含信用卡和贝宝的网址。当您选择信用卡单选按钮时,您将获得信用卡网址。当您选择贝宝单选按钮时,您将获得贝宝网址。

When you click on the radio button, we change the action of the form with this:

当您单击单选按钮时,我们会通过以下方式更改表单的操作:

$('#upgrade_form').attr('action', $('#credit-card-target-url').val())

(credit-card-url is the hidden field)

(信用卡网址是隐藏字段)

So when we click on the link in the nyromodal lightbox, we just call

因此,当我们单击 nyromodal 灯箱中的链接时,我们只需调用

$('#upgrade_form').submit();

BUT! IT STILL DOESN'T WORK IN ANY IE. Any help on this? We're in the process of installing the suggested IE script debugger but I'm pessimistic we won't see anything.

但!它仍然不适用于任何 IE。有什么帮助吗?我们正在安装建议的 IE 脚本调试器,但我很悲观,我们不会看到任何东西。

EDIT

编辑

Just retried this one. We took out the lightbox, and the other code. We just started with a basic form with a link that when pressed, calls:

刚刚重试了这个。我们取出了灯箱和其他代码。我们刚开始使用一个带有链接的基本表单,当按下该链接时,会调用:

$('#upgrade_form').submit();

Still doesn't work in IE. So is it because of the submit() of jquery?

在 IE 中仍然不起作用。那么是不是因为jquery的submit()呢?

Okay I googled for jquery submit not working in IE and found this: jQuery form submit() is not working in IE6?

好吧,我用 google 搜索 jquery submit 在 IE 中不起作用,发现这个:jQuery form submit() is not working in IE6?

But I checked our code and our 'submit' button is actually a link, and I searched the generated docment and found no inputs named submit. When the link is clicked, I added an alert to check if the form exists(because of the nodeName null problem) and I do get the alert with the form html. It just halts at submit.

但是我检查了我们的代码,我们的“提交”按钮实际上是一个链接,我搜索了生成的文档并没有找到名为 submit 的输入。单击链接时,我添加了一个警报来检查表单是否存在(因为 nodeName 空问题),并且我确实收到了表单 html 的警报。它只是在提交时停止。

here is the code right now:

这是现在的代码:

$('#paypalbutton').click( function() {
  alert($('form#upgrade_form').html());
  $('form#upgrade_form').submit();
  return true;
}

IE halts on this line in jquery:

IE 在 jquery 中的这一行停止:

nodeName: function( elem, name ) {
  return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
},

回答by Tommy W

I've recently had a similar issue, where I was creating a "pseudo-form" within an ASP.NET server form (so I couldn't use another form tag), which I wanted to post to another domain without needing to write server-side code to do the remote post. Easy answer - create a form on the fly and submit it. Works in good browsers...

我最近遇到了一个类似的问题,我在 ASP.NET 服务器表单中创建了一个“伪表单”(所以我不能使用另一个表单标签),我想将其发布到另一个域而无需编写服务器端代码来执行远程发布。简单回答 - 即时创建表单并提交。在良好的浏览器中工作...

After some trials and tribulations, I realised that IE won't work as expected (what a surprise) unless the form that is being submitted has been added to DOM. So, this was my solution. I hope it helps some of you. Please be aware, all of my inputs and my submit were in the same container. ".post-to" is a hidden input with the URL.

经过一些试验和磨难后,我意识到 IE 将无法按预期工作(真是令人惊讶),除非正在提交的表单已添加到 DOM 中。所以,这是我的解决方案。我希望它可以帮助你们中的一些人。请注意,我的所有输入和提交都在同一个容器中。“.post-to”是带有 URL 的隐藏输入。

$(".post-form").click(function(ev) {

    var postto = $(this).siblings(".post-to").val();    
    var form = document.createElement("form")
    $(form).attr("id", "reg-form").attr("name", "reg-form").attr("action", postto).attr("method", "post").attr("enctype", "multipart/form-data");

    $(this).siblings("input:text").each(function() {
        $(form).append($(this).clone());
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);

    return false;
});

Eventually, it works a treat.

最终,它是一种享受。

回答by Sam

Changing the way you've formatted the .each()method seems to do the trick...

改变你格式化.each()方法的方式似乎可以解决问题......

$('form#paypal-form').submit( function(e) {
  e.preventDefault();
  var parameters = $('form#upgrade_form').serializeArray();
  $(parameters).each(function(i,param){
    $('<input />').attr('type', 'hidden')
    .attr('name', param.name)
    .attr('value', param.value)
    .appendTo('form#paypal-form');
  });     
});

回答by Golmote Kinoko

Would a try...catchstatement inside the each()reveal the error ?

try...catch里面的语句会each()揭示错误吗?

回答by Alex KeySmith

If you haven't already, you could try stepping through it using the built-in IE JavaScript debugger (built in since IE8, or downloadable pre IE8)?

如果您还没有,您可以尝试使用内置的 IE JavaScript 调试器(自 IE8 以来内置,或可下载的 IE8 之前)逐步完成它?

Many people use firebug - because it's awesome :) but many people don't realise the hidden talent of the built in debugger in IE 8.

许多人使用 firebug - 因为它太棒了 :) 但很多人没有意识到 IE 8 中内置调试器的隐藏才能。

It's got the same fundemental features as any other script debugger, but here is a guide for the specific featuresif you haven't come across it before:

它具有与任何其他脚本调试器相同的基本功能,但如果您以前没有遇到过它,这里是特定功能的指南