Solved

programatically change html code on a page

Posted on 2012-12-21
9
328 Views
Last Modified: 2016-03-24
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
Comment
Question by:thenelson
  • 4
  • 3
  • 2
9 Comments
 
LVL 82

Expert Comment

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

Expert Comment

by:lightspeedvt
ID: 38714841
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
 
LVL 39

Author Comment

by:thenelson
ID: 38714847
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 38714851
No, the code change the value when you submit the form
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 500 total points
ID: 38714859
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38714934
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
 
LVL 39

Author Comment

by:thenelson
ID: 38714969
I'll check out the two suggestions tomorrow and get back to both of you, Thanks!
0
 
LVL 39

Author Comment

by:thenelson
ID: 38716209
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
 
LVL 39

Author Closing Comment

by:thenelson
ID: 38717239
Thanks!
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question