Solved

programatically change html code on a page

Posted on 2012-12-21
9
327 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

832 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