Javascript没有在IE中提交表单

时间:2012-09-08 01:34:39

标签: javascript internet-explorer

此表单适用于Chrome,FF,Safari。通过工作,我的意思是当我点击提交按钮时,我可以看到POST请求被发送出去。

但是,在IE中作为IE9的开发人员工具中,我看不到任何POST请求。有什么想法吗?

以下是指向临时站点的链接,以帮助调试:http://polar-ravine-7414.herokuapp.com/

重现错误的步骤:

  1. 加载页面
  2. 忽略弹出窗口
  3. 点击提交按钮
  4. 我在Chrome开发工具和FF Firebug中看到了POST请求 但不是在IE开发人员工具中
  5. 更新

    根据Eliran的建议,我更新了选择器。但是,我仍然无法在IE开发人员的工具网络栏中看到POST请求。

    UPDATE2

    我应该补充一点,这个页面托管在与发布表单的地方不同的服务器上。这可能是因为浏览器阻止了跨浏览器请求吗?

    HTML

    <form name="newsletter-subscription-en" id="form" action="https://abc.com/e/f2" method="post">
    
        <input type="hidden" name="elqFormName" value="newsletter-subscription-en">
        <input type="hidden" name="elqSiteID" value="1795">
        <input type="hidden" id="firstNameField" name="C_FirstName" value="">
        <input type="hidden" id="lastNameField" name="C_LastName" value="">
    
        <div id="step1" class="block">
            <div id="circle_1" class="circle">
                <div id="bullet_1" class="left white is-bold s24"><span class="bullet">1.</span></div>
            </div>
            <div id="bullet_spacer_1" class="left">&nbsp;</div>
            <div class="content">
                <p class="white is-regular s18">This is the email you will be subscribing with, if you'd like to change it, please enter here now.</p>
                <label id="label_email" class="white is-bold s22" for="emailField">YOUR EMAIL: </label>
                <input id="emailField" value="" name="C_EmailAddress" type="text">
            </div>
        </div>
    
        <div class="clearfix"></div>
        <div id="step2" class="block">
            <div id="circle_2" class="circle">
                <div id="bullet_2" class="left white is-bold s24"><span class="bullet">2.</span></div>
            </div>
            <div id="bullet_spacer_2" class="left">&nbsp;</div>
            <div class="content">
                <p class="white is-regular s18">Choose your newsletter:</p>
                <div id="checkbox_customer" class="left">
                    <div class="box">
                        <input id="elqInput31" type="checkbox" name="elqInput31" checked="checked">
                        <label class="white is-bold s20" for="elqInput31">CUSTOMER</label>
                    </div>
                    <div class="arrow-up"></div>
                    <div class="nip_box">
                        <span class="is-bold s12">Customer Newsletter</span>
                        <p class="is-light s115">
                        Monthly collective on latest industry news, technology pieces from experts, product resources, success examples and exclusive customer promotions.
                        </p>
                    </div>
                </div>
    
                <div id="spacer" class="left">&nbsp; </div>
                <div id="checkbox_training" class="left">
                    <div class="box">
                        <input id="elqInput32" type="checkbox" name="elqInput32" checked="checked">
                        <label class="white is-bold s20" for="elqInput32">TRAINING</label>
                    </div>
                    <div class="arrow-up"></div>
                    <div class="nip_box">
                        <span class="is-bold s12">Training Newsletter</span>
                        <p class="is-light s115">
                        Exclusive newsletter for current and aspiring IT professionals. Updated with training tips and tricks, industry news, free online training resources and latest information on available certification and training.
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
            <div id="step3" class="block">
            <div id="circle_3" class="circle">
                <div id="bullet_3" class="left white is-bold s24"><span class="bullet">3.</span></div>
            </div>
            <div id="bullet_spacer_3" class="left">&nbsp;</div>
            <div class="content">
                <div id="submit" class="box right">
                    <span class="right white is-bold s24">SIGN-UP</span>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </form>
    

    的JavaScript

    根据Eliran的回答更新

    $(document).ready(function() {
    
        $('#submit').click(function () {
    
            //Get the data from all the fields
            var email = $('input[name=C_EmailAddress]');
            var trainingNewsletter = $('input[name=elqInput31]');
            var customerNewsletter = $('input[name=elqInput32]');
            var regExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
            var validationPass = true;
            var form = $('#redhat_form');
    
            if (validationPass === true) {
                $.post(form.attr('action'), form.serialize(), function(data) {});
                $('#alert').removeClass('hide');
                $('#alert').removeClass('alert-success');
                $('#alert').removeClass('alert-error');
                $('#alert_text').remove();
                $('#alert').addClass('alert-success');
                $('#alert').append('<p id="alert_text" class="is-regular s16">Thank you for subscribing.</p>');
                $('#emailField').val("");
                //window.location='http://afternoon-leaf-7565.herokuapp.com/thankyou/';
                return false;
            }
        });
    });
    

5 个答案:

答案 0 :(得分:2)

好的,所以你面临的问题是AJAX调用没有在IE中成功返回,而是抛出错误。首先,您需要正确编写AJAX调用代码。这是AJAX调用的更新代码。

$.ajax({
    url: form.attr('action'),
    data: form.serialize(),
    success: function(data){
        alert('success');
    },
    error: function(xhr, textStatus, errorThrown){
        alert(errorThrown);
    },
    dataType: 'json'
});

现在它在IE中抛出错误的原因是“无运输”。这是因为跨域AJAX调用。这是jQuery的一个已知错误。 jQuery团队“没有计划在核心中支持这个,并且更适合作为插件。” IE不使用XMLHttpRequest,而是使用名为XDomainRequest的替代对象。

我找到了一个javascript代码来处理这个问题。代码为here

您需要将代码复制到文件中,并将其用作页面的外部源。或者您可以直接将其嵌入页面的头部。工作示例here

答案 1 :(得分:1)

实际上,它也是not working in chrome

您的属性选择器会产生错误:

  

未捕获错误:语法错误,无法识别的表达式:   = [名称= elqInput31]

修复它,一切都会好的。

<强> A working demo on jsFiddle

答案 2 :(得分:0)

你有两行错误:

    var trainingNewsletter = $('input=[name=elqInput31]');
    var customerNewsletter = $('input=[name=elqInput32]');

实际应该是:

    var trainingNewsletter = $('input[name=elqInput31]');
    var customerNewsletter = $('input[name=elqInput32]');

我不确定这是否能完全解决问题,但肯定会有一些问题。

答案 3 :(得分:0)

你有没有理由使用div和span而不是输入类型=“提交”或按钮类型=“提交?

您是否有理由倾听提交按钮的点击而不是收听表单提交? $(“#form”)。on(“submit”,function(){etc.etc});

答案 4 :(得分:0)

  1. 您是否在chrome dev工具中看到POST请求或尝试发送POST请求?在我的chrome中我看到了尝试。阅读有关跨域策略的信息。您的表单操作网址和您的网页位于不同的域中。而你不能做跨域的ajax请求(但有黑客和它的名字JSONP)。 因此,考虑将表单发送到同一个域或使用JSONP,引擎盖下将发送GET请求。
  2. 我建议使用$ .post更灵活的$ .ajax并使用错误回调函数。

    $.ajax({ type: 'POST', url: form.attr('action'), data: form.serialize(), success: function(p, p1){ }, error: error(jqXHR, textStatus, errorThrown){
    alert("Failed send request. textStatus=" + textStatus); }

    });

  3. http://api.jquery.com/jQuery.ajax/(页面包含有关跨域请求的信息)