1

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);    
2
  • Try using the DOM API instead. Commented Mar 15, 2011 at 10:53
  • so the error is coming in which browser? Commented Mar 15, 2011 at 11:36

6 Answers 6

1

Try this:

output_data += "<\/script>";    //notice how the script tag is closed
Sign up to request clarification or add additional context in comments.

1 Comment

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

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.

5 Comments

I have tried this but it just hanging the page not showing any error
@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.
Thanks for help,i have tried the option you suggested but it shows blank page AFTER half second
@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. :-)
Why is it not part of the document, if the code which wants to get it runs after writing the form to the document?
0

change

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

to

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

then it should work for you.

2 Comments

I have tried this also but it shows error document.getElementById('payment') is null
document.payment should work too because document has a namedItem getter
0
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.

1 Comment

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

Try this:

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>';
document.write(output_data);
document.getElementById('payment').submit();

Comments

0

For those who come 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);

2 Comments

What is GetBodyElement? Do you mean document.body?
@Oriol, thanks for feedback, yes, it is document.body. I appended my answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.