asked on

programatically change html code on a page

I have a Paypal button on my webpage that includes:
<input type="hidden" name="amount" value="100.00">
I would like to change the "100.00" to a value generated by javascript code when the form behind the button is submited. How can I do that?

TIA

leakim971

window.onload = function() {
document.getElementsByTagName("form")[0].submit = function() {
document.getElementsByName("amount")[0].value = "value generated by javascript";
}
}

lightspeedvt

Another variant that works right away (not checking when page will be loaded with all images and etc.)

<input type="hidden" name="amount" value="100.00" id="changeAmount">
<script>
    document.getElementById('changeAmount').value = "500";
</script>

Open in new window

thenelson

ASKER

leakim971,
I am guessing the code you provided will set the "amount" value when the page loads. I need to set the value when the Paypal button is clicked. I assume I would give your function a name and then call it in the onsubmit event of the form as below. Is that correct?
ie:

function SetAmount () {
document.getElementsByTagName("form")[0].submit = function() {
document.getElementsByName("amount")[0].value = "value generated by javascript";
}
}

Ac

<form onsubmit="return SetAmount();" action="https://www.paypal.com/cgi-bin/webscr" method="post">
. . .
<input type="hidden" name="amount" value="100.00">
. . .
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

leakim971

No, the code change the value when you submit the form

ASKER CERTIFIED SOLUTION

lightspeedvt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

try this (please note I changed the name of the submit button) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MY SHOP</title>
<script type="text/javascript">
	window.onload = function() {
		document.getElementById("myform").submit = function() {
			alert("submit the form to paypal"); // remove this line when you're ok
			document.getElementById("amount1").value = "value generated by javascript";
		}
	}
</script>
</head>
<body>
<form id="myform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
. . .
<input type="hidden" name="amount" id="amount1" value="100.00">
. . .
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="mysubmit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</body>
</html>

Open in new window

thenelson

ASKER

I'll check out the two suggestions tomorrow and get back to both of you, Thanks!

thenelson

ASKER

lightspeedvt,
Your code worked. Thanks!

leakim971,
Your last code did not work. The onload function did not fire as the alert("submit the form to paypal"); did not popup.

thenelson

ASKER

Thanks!