programatically change html code on a page

thenelson
thenelson used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

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

Commented:
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

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>
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

leakim971Multitechnician
Top Expert 2014

Commented:
No, the code change the value when you submit the form
Top Expert 2012
Commented:
Ok. Here is updated version:

<script>
    function updateAmount(){
		document.getElementById('changeAmount').value = "500";
    }
</script>

<form onsubmit="updateAmount();" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="amount" value="100.00" id="changeAmount">

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
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

I'll check out the two suggestions tomorrow and get back to both of you, Thanks!
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.
Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial