5

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();
},
Improve this question
7
  • Which version of jQuery? IE forbids changing the type of an input, so this may be your issue. 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? 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 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 / compatibility 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)? 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 Commented Sep 23, 2010 at 9:56

4 Answers 4

Reset to default
14

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

yes! this is exactly the problem I was having, thank you! shakes fist at IE
1

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

Comments

0

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

Improve this answer

Comments

0

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:

Improve this answer

2 Comments

I got to check it and it errors on jquery.js line 29 "return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()" (the minified version)
Hmmm an error deep inside jQuery i'm guessing... a tricky one!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.