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="; 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);    

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./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);    

• javascript
• dom-events

• Try using the DOM API instead. – Keith Commented Mar 15, 2011 at 10:53
• so the error is ing in which browser? – sv_in Commented Mar 15, 2011 at 11:36

6 Answers 6

Try this:

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

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

change

output_data += "document.payment.submit();";

to

output_data += "document.getElementById('payment').submit();";

then it should work for you.

id ="payment" name="payment"

You can refer to this by

getElementById() 
getElementsByName()

If it doesnt work maby you have more Elements in your code with the same name as:

getElementById Returns the Element whose ID is given by elementId. If no such element exists, returns null. Behavior is not defined if more than one element has this ID.

Try this:

var output_data = '<form   id ="payment" name="payment" method="POST" action="https://checkout.google./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>';
document.write(output_data);
document.getElementById('payment').submit();

For those who e to this page looking for solutions of their problem, the problem is document.write. You are accessing a form created using document write and at the time is not available. (I have seen the problem more in https (not in http) and IE11.

Following JavaScript solution works for me. Create a form using createElement

var oForm = document.createElement("FORM");

oForm.id = "taskslabelForm";
oForm.name = "taskslabelForm";
oForm.style.display = "none"; //You might not want to show the form
oForm.target="_self"; //Your target
oForm.method="POST";
oForm.action="YOUR-ACTION-HERE";

document.body.appendChild(oForm);
oForm.submit();
document.body.removeChild(oForm);