CODEWITHSUNDEEP
javascriptinternet-explorer
super9
super9

Reputation: 30101

Javascript not submitting form in IE

This form works in Chrome, FF, Safari. By works I mean I can see the POST request being sent out when I hit the submit button.

However, in developer tools in IE as IE9, I can't see any POST request being made. Any ideas why?

Here is a link to a temporary site to aid in debugging: http://polar-ravine-7414.herokuapp.com/

Steps to reproduce bug:

  1. Load the page
  2. Ignore the popup
  3. Click on the submit button
  4. I see a POST request sent in Chrome dev tools and FF Firebug but not in IE developer tools

Update

As per Eliran's suggestion, I've updated the selector. However, I am still not able to see the POST request made in IE developer's tools network bar.

Update2

I should probably add that this page is hosted on a different server from where the form is getting posted to. Could this now be due to the browser preventing cross browser requests?

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

Updated based on Eliran's answer

$(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;
        }
    });
});

Upvotes: 2

Views: 2605

Answers (5)

Pulkit Mittal
Pulkit Mittal

Reputation: 6076

Okay, so the problem you are facing is that the AJAX call is not returning with a success in IE, instead it is throwing an error. First of all you need to properly code an AJAX call. Here is the updated code for the AJAX call.

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

Now the reason for it throwing an error in IE was "No Transport". This happens because of the cross-domain AJAX call. This is a known bug with jQuery. The jQuery team has "no plans to support this in core and is better suited as a plugin." IE does not use the XMLHttpRequest, but an alternative object named XDomainRequest.

I found a javascript code to take care of this. The code is here.

You will need to copy the code in a file and use it as an external source for your page. Or you can directly embed it in the head of your page. Working example here.

Upvotes: 1

Alex Sebastiano
Alex Sebastiano

Reputation: 67

  1. Do you see POST request in chrome dev tools or attempt to send POST request? In my chrome I see attempt. Read about Cross domain policy. Your form action url and your page are on different domains. And you cannot do cross-domain ajax requests( but there is hack and its name JSONP). So, consider about sending form to same domain or use JSONP, that under hood will be send GET request.

  2. My advice to use instead $.post more flexible $.ajax and use error callback function. 

    


    $.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);
        }
    


    });

http://api.jquery.com/jQuery.ajax/ (page contains info few info about cross domain requests too)

Upvotes: 0

Dawn
Dawn

Reputation: 941

Is there a reason you're using a div and a span rather than a input type="submit" or a button type="submit?

Is there a reason you're listening for clicks on a submit button rather than listening for the form submitting? $("#form").on("submit", function () {etc.etc});

Upvotes: 0

Joshua
Joshua

Reputation: 615

You have two lines with errors on them:

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

should actually be:

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

I'm not sure if that will completely fix the problem, but it's some of it for sure.

Upvotes: 0

Eliran Malka
Eliran Malka

Reputation: 16263

Actually, it's not working in chrome, either.

Your attribute selector produces an error:

Uncaught Error: Syntax error, unrecognized expression: =[name=elqInput31]

Fix it and all will be fine.

A working demo on jsFiddle

Upvotes: 1

Related Questions