Javascript document.form.submit not working

Question

I have created a form using JavaScript and tried to submit it but it show error message document.payment is null. Please help me

 var output_data = '<form   id ="payment" name="payment" method="POST" action="https://checkout.google.com/api/checkout/v2/checkoutForm/Merchant/922635804601464" accept-charset="utf-8">'
                                output_data += '<input type="hidden" name="item_name_1" value="Peanut Butter">';
                                output_data +='<input type="hidden" name="item_description_1" value="Chunky peanut butter.">';
                                output_data += '<input type="hidden" name="item_quantity_1" value="1">';
                                output_data += '<input type="hidden" name="item_price_1" value="3.99">';
                                output_data += '<input type="hidden" name="item_currency_1" value="USD">';
                                output_data += '<input type="hidden" name="ship_method_name_1" value="UPS Ground">';
                                output_data += '<input type="hidden" name="ship_method_price_1" value="10.99">';
                                output_data += '<input type="hidden" name="ship_method_currency_1" value="USD">';
                                output_data += '<input type="hidden" name="tax_rate" value="0.0875">';
                                output_data += '<input type="hidden" name="tax_us_state" value="NY">';
                                output_data += '<input type="hidden" name="_charset_">';
                                output_data += '</form>';
                                //alert(output_data);
                                //return false;
                                output_data += "<script>";
                                output_data += "document.getElementById('payment').submit();";
                                output_data += "</script>";                
                                document.write(output_data);    

Solution 1

Try this:

output_data += "<\/script>";    //notice how the script tag is closed

Solution 2

The form still not part of the document when you try to submit it. Change the line to:

output_data += "window.onload = function() { document.getElementById('payment').submit(); }; ";

Edit: another "dirty" option is using timer:

output_data += "window.setTimeout(function() { document.getElementById('payment').submit(); }, 500);";`

This will try to submit in half second delay.

Edit 2: Just now looked deeper - You're doing it in the wrong way.
You need to use AJAX to perform the Checkout, using jQuery AJAX becomes really simple to use.
Give this a try and let us know if you bump into walls. :)

I'm almost sure that Google expose jsonp service that allow cross domain AJAX, if not then you'll have to do it from server side code.

Comments

[mic]

I have tried this also but it shows error document.getElementById('payment') is null

[mic]

I have tried this but it just hanging the page not showing any error

[mic]

i have tried output_data += "<\/script>"; but it shows same error

[mic]

i have tried with another id and name still it gives me same error

[Shadow The Kid Wizard]

@ray after document.write(output_data); add also document.close(); otherwise the onload will never happen. Also, you can try the other option in the edited post.

[mic]

Thanks for help,i have tried the option you suggested but it shows blank page AFTER half second

[Shadow The Kid Wizard]

@ray OK, just now looked deeper. You're doing it in the wrong way. You need to use AJAX to perform the Checkout, using jQuery AJAX becomes really simple to use. Give this a try and let us know if you bump into walls. :-)

[Oriol]

document.payment should work too because document has a namedItem getter

[Oriol]

What is GetBodyElement? Do you mean document.body?

[Oriol]

Why is it not part of the document, if the code which wants to get it runs after writing the form to the document?

[pg20]

@Oriol, thanks for feedback, yes, it is document.body. I appended my answer.