jquery's form submit not working in IE

Question

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)

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.

• 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.

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

$('#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.

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?

Okay I googled for jquery submit not working in IE and found this: 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.

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:

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

Answer 1

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...

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.

$(".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.

Answer 2

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

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