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

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

• javascript
• jquery
• internet-explorer

• Which version of jQuery? IE forbids changing the type of an input, so this may be your issue. – Nick Craver Commented Sep 22, 2010 at 14:39
• What if you inserted a line alert(parameters.length); just before your $.each statement? What does it reveal? – mkoistinen Commented Sep 22, 2010 at 14:42
• newest one. I refactored this to append in this way: $('#payment_form').append('<input type="hidden" id="' + param.name + '" />'); but it still fails – corroded Commented Sep 22, 2010 at 14:43
• Can you call $('#upgrade_form').submit(); outside of the nyromodal lightbox? Just in case there is a scope / patibility problem with the lightbox? Or what line of code does it hit before the error happens (I think you can see the order the code executed before an error in the IE script debugger call stack)? – Alex KeySmith Commented Sep 23, 2010 at 9:45
• @Alex, I took out the lightbox as said above, and just bound the click to submit the form. It just halts at the nodename error in the IE debugger – corroded Commented Sep 23, 2010 at 9:56

4 Answers 4

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.

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

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

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 e across it before: