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: http://stackoverflow.com/questions/445850/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

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

Answer 2

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)?

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.

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

Answer 3

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