Passing Dynamic PHP variable to JavaScript

I'm creating dynamic buttons and forms for a website and would like the form hidden when it's corresponding button is clicked.

However, when I pass button and form name variables to my JavaScript that hides the form, the variables are not being recognised unless I explicitly set them. (e.g 1 and 2 as seen below).

In a nutshell the onlick event doesn't seem to like PHP variables !

Could anyone please explain why?

function showhide(button, form)
{
		
	alert('form= ' + form);
	alert('Button= ' + button)
	$('button').click(function()
	{
		$('form').hide();
	});
	
	
}

<?
// Setup Variables
$buttonName = "button" . $year . $period;
$formName = "form" . $year . $period;
?>

// Setup Dynamic Button
<input name="" type="button" id="<? echo $buttonName;?>" onclick="MM_callJS('showhide(1,2)')" value= "VAT" />
                       
// Setup Dynamic form 
<form action="" id="<? echo $formName; ?>" method="get" >

aharkus

Newbie Poster

4 posts since Jul 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Aharkus,

I'm sure your method could be made to work but there's a way to do this without using ids. Hence less to worry about in php.

This demo uses jQuery though the same can be achieved (less concisely) in raw javascript:

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".showHideForm").click(function() {
		$(this).closest("div").find("form").toggle();
	});
});
</script>
</head>

<body>

<div>
	<input class="showHideForm" type="button" value="VAT" /> 
	<form name="demoA" action="" method="get">
		<input name="demoA_1" type="text">
		<input name="demoA_2" type="text">
	</form>
</div>

<div>
	<input class="showHideForm" type="button" value="VAT" /> 
	<form name="demoB" action="" method="get">
		<input name="demoB_1" type="text">
		<input name="demoB_2" type="text">
	</form>
</div>

</body>
</html>

The trick here is to wrap each button/form set in a div (or some other wrapper, eg. a table row). When a button is clicked, the handler worksrelative to it to discover the corresponding form. This avoids the need for ids, and is both simple and efficient.

Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

10 Months Ago

Thank you so much.

This almost worked exactly how I wanted, apart from I need the button displayed by default (which it does), but the form 'Hidden'(when the page loads)

I've tried adding the following code but this hides the button by default.

Is there any way that the form could be hidden by default, So that the 1st time the user entered the screen they just see the button

$(document).ready(function()
{
	$(".showHideForm").hide();

});

aharkus

Newbie Poster

4 posts since Jul 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Cracked it !

Here's the code below.

Once again thank you so much, I've been tying myself in knots over this and am most grateful for your help. Useful bit of knowledge to use in the future too.

Regards

Adam.
[CODE]]$(document).ready(function()
{
$(".showHideForm").closest("div").find("form").hide();

});
[/CODE

aharkus

Newbie Poster

4 posts since Jul 2011

Reputation Points: 10

Solved Threads: 0

10 Months Ago

Yes, that's pretty well what I would do.

You can set both actions (initially hiding the forms and attaching a click handler to the buttons) fairly efficiently as follows:

$(document).ready(function() {
	$(".showHideForm").click(function() {
		$(this).closest("div").find("form").toggle();
	}).closest("div").find("form").hide();
});

It is possible to avoid .closest("div").find("form") appearing twice but the code becomes structurally more complex.Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

This question has already been solved

You