JavaScript - Making an image appear after button click

Sean^DCT4 · 08-06-2007 1:06am #1

Hi all,

I have 3 questions that I hope some people can help me with.

Question1:
I have a button on a HTML page that when clicked I want it to set a PayPal button visible.

Here's my code thus far:


// Form Code
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="ppForm" id="ppForm">


// Button Code
<input name="payButton" type="button" id="payButton" value="Pay Here" onClick="unhide(this.form)"/>


// Some PayPal Button Code
<input type="image" name="ppButton" id="ppButton" src="http://images.paypal.com/images/x-click-but6.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" style="visibility:hidden;">


// Inside <SCRIPT> inside <HEAD> is the unhide()
function unhide(form){
		document.ppForm.ppButton.visibility = "visible";
}

This should make the 'ppButton' appear when the 'payButton' is clicked?
I have tried a few slightly different approaches from online tutorials but none of them worked for me.

Before anyone asks.. There is logic behind this button appearing

Question2:
The HTML page in question is an online price calc page. The bulk of the code is written inside the <SCRIPT> inside <HEAD>. The calc works correctly under FireFox but doesn't work at all under IE7.

In FireFox:
The total value is returned to the Total TextField once the CalcPrice button is hit.

In IE7:
The total value is always 0 when the CalcPrice Button is hit.
Another thing is that there is only one checkbox on the form and when it is checked and then the CalcPrice button clicked the value of the Total TextField returns "NaN" (which I believe from my limited Matlab experience stands for Not a Number).

Question3:
Final question is about IE7 and when my site is loaded in IE7 I get a yellow message up the top (near address-bar / toolbar) saying
"The site you are trying to look at uses javascript which may be harmful blah blah some stuff has been blocked.."

Once you click on the message and allow the content the page loads correctly. Does anyone know how I can stop IE7 from blocking this content automatically?
I hope the solution to this resolves Q2 too..

Thanks in advance people.

Seány

Ph3n0m · 08-06-2007 6:20am

try this for your code instead

// Some PayPal Button Code
<input type="image" name="ppButton" id="ppButton" src="http://images.paypal.com/images/x-click-but6.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" style="display:none">


// Inside <SCRIPT> inside <HEAD> is the unhide()
function unhide(form){
		document.ppForm.ppButton.style.display = "block";
}

as for Question2 - would really need to see script to see what the problem is

Question3 - you looking at this offline or online? Check the page online to see if the same message appears

Sean^DCT4 · 08-06-2007 5:22pm

Ph3n0m wrote:
try this for your code instead
// Some PayPal Button Code
<input type="image" name="ppButton" id="ppButton" src="http://images.paypal.com/images/x-click-but6.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" style="display:none">


// Inside <SCRIPT> inside <HEAD> is the unhide()
function unhide(form){
		document.ppForm.ppButton.style.display = "block";
}
as for Question2 - would really need to see script to see what the problem is

Question3 - you looking at this offline or online? Check the page online to see if the same message appears

I have tried the code you mentioned and I still have the same problem.
Here is the output from FireFox's JavaScript console

Error: document.ppForm.ppButton has no properties
Source File: .....PriceCalcTMP.html
Line: 61

Line 61 is:

function unhide(form){
		document.ppForm.ppButton.style.display = "block";
}

As for Q2, Here is the script I have written in the <HEAD>:

<SCRIPT LANGUAGE="JavaScript">
	function calc(form)
	{
		
		var lessons = (document.form1.threeAdults.value*90) + (document.form1.fiveAdults.value*160) + 
		(document.form1.threeChild.value*75) + (document.form1.fiveChild.value*100);
		
		
		var seasonIndex = document.form1.season.selectedIndex;
		if (seasonIndex == 0){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 62;
			//alert(hotelPrice);
		}
		else if (seasonIndex == 1){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 77;
			//alert(hotelPrice);
		}
		else if (seasonIndex == 2){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 92;
			//alert(hotelPrice);
		}
		else if (seasonIndex == 3){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 116;
			//alert(hotelPrice);
		}
		else if (seasonIndex == 4){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 92;
			//alert(hotelPrice);
		}
		else if (seasonIndex == 5){
			var hotelPrice = (document.form1.numRoom.value) * (document.form1.numNight.value) * 62;
			//alert(hotelPrice);
		}
		

		var x = document.form1.numAdults.value;
		var y = document.form1.numChild.value;
		var totalPeople = parseInt(x)+parseInt(y);
		
		var pickUp = 0;
		if(document.form1.checkbox.checked){
			pickUp = (totalPeople)*25;
		}
		
		var total = parseInt(lessons) + parseInt(hotelPrice) + parseInt(pickUp);
		var bookingDep = total/8;
		var bookingDep2 = bookingDep.toFixed(2); 
		
		document.form1.textfield.value = "&#8364; "+total+".00";
		document.form1.textfield2.value = "&#8364; "+bookingDep2;
		
		document.ppForm.amount.value = bookingDep2;
	}
	
	function unhide(form){
		document.ppForm.ppButton.style.display = "block";
	}
</script>

Q3: Yes I have tried the site in IE in both Online and Offline mode

I don't like baby-feeding but I have spent a ridiculous amount of hours over the last 2 days trying to get this form/page finished. I have exhausted all tutorials and searches on Google. Basically, asking for help was a last resort.

Thanks in advance.

Seány.

Ph3n0m · 08-06-2007 5:41pm

this works with no error from firefox

<script>
// Inside <SCRIPT> inside <HEAD> is the unhide()
function unhide(form){
		document.ppForm.ppButton.style.display = "block";
}
</script>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="ppForm" id="ppForm">


// Button Code
<input name="payButton" type="button" id="payButton" value="Pay Here" onClick="unhide(this.form)"/>

// Some PayPal Button Code
<input type="button" name="ppButton" id="ppButton" src="http://images.paypal.com/images/x-click-but6.gif" border="0" alt="Make payments with PayPal, it's fast, free, and secure!" style="display:none" value="bob">

tell you what pm the html to me, and I will sort it out tonight

Sean^DCT4 · 08-06-2007 8:16pm

I sent you that PM Ph3n0m.

Seány

Sean^DCT4 · 09-06-2007 6:43pm

Many thanks for the help. I was so close but yet so far..

Nice one Ph3n0m!

Regards,

Seány

Ph3n0m · 09-06-2007 8:19pm

yay for me

For my next trick, I shall make pi exactly 3

JavaScript - Making an image appear after button click

Comments