Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 334
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

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