Member Avatar for aharkus

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" >
  • 2 Contributors
  • 4 Replies
  • 1K Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

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"><br>
		<input name="demoA_2" type="text"><br>
	</form>
</div>

<div>
	<input class="showHideForm" type="button" value="VAT" /> 
	<form name="demoB" action="" method="get">
		<input name="demoB_1" type="text"><br>
		<input name="demoB_2" type="text"><br>
	</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 works relative to it to discover the corresponding form. This avoids the need for ids, and is both simple and efficient.

Airshow

Member Avatar for aharkus

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();

});
Member Avatar for aharkus

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.

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

});
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for Airshow

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.