• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

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
0
thenelson
Asked:
thenelson
  • 4
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
window.onload = function() {
   document.getElementsByTagName("form")[0].submit = function() {
         document.getElementsByName("amount")[0].value = "value generated by javascript";
   }
}
0
 
lightspeedvtCommented:
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

0
 
thenelsonAuthor Commented:
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>
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
leakim971PluritechnicianCommented:
No, the code change the value when you submit the form
0
 
lightspeedvtCommented:
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

0
 
leakim971PluritechnicianCommented:
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

0
 
thenelsonAuthor Commented:
I'll check out the two suggestions tomorrow and get back to both of you, Thanks!
0
 
thenelsonAuthor Commented:
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.
0
 
thenelsonAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now