How to hide a form when a link is clicked

varai

Hello,

How do I hide a form when a link is clicked?

Basically I have 2 functions, cr_card_disp1 and cr_card_disp2. When the <Add New Credit Card> link is clicked, the form in cr_card_disp2 should be displayed and the form in cr_card_disp1 should be hidden.

However, when I click Add New Credit Card link the form in cr_card_disp2 is getting displayed and the form in cr_card_disp1 is still visible.

The setVisibility javascript function is not working.

The following is my code:

<script language="javascript" type="text/javascript">
[COLOR="blue"]function setVisibility()[/COLOR]{
var frm_element = document.getElementById('cr_card_disp1_frm');
frm_element.style.display='none';
}
</script>

if (@$_GET['action']=="add_cr_card")
   {$_SESSION['add_cr_card_flag']="true";
   echo "add credit card flag: ".$_SESSION['add_cr_card_flag'];
   cr_card_disp2();
   }

[COLOR="blue"]function cr_card_disp1() [/COLOR]//CUST WITH RECORD IN DATABASE
{ 
echo $_SESSION['cust_id'];

   $sql="select cr_card, cr_no, exp_mth, exp_yr from credit_card where cust_id=".$_SESSION['cust_id']."";
	 $result = mysql_query($sql) or die(mysql_error());

 if (mysql_num_rows($result)>0) //OLD CUST WITH CR_CARD DETAILS IN DB
 		{//echo "number of records ".mysql_num_rows($result);
		echo "<div id = 'form_general'>";
		?>
		<form id='cr_card_disp1_frm' action='confirm.php' method='post'>

		<?php
		echo "<div class='form_label1' style='top:70%;'>Payment</div>";
		echo "<div class='form_element' style='top:70%; vertical-align:middle;'>";
		echo "<select id='cr_card_details' name='cr_card_details' >";
 		$str_asterisk = "***********";
		while ($row = mysql_fetch_array($result))	 
        //for (j=0; $row=mysql_fetch_array($result); j++)
		  { 
				if ((@$_SESSION['cr_card'] == $row['cr_card']) &&
					 ($_SESSION['cr_no'] == $row['cr_no']) &&
					 ($_SESSION['exp_mth'] == $row['exp_mth']) &&
					 ($_SESSION['exp_yr'] == $row['exp_yr']))
						{ echo "<option selected>".$_SESSION["cr_card"]."  ".$str_asterisk.$_SESSION['cr_no']."  exp ".$_SESSION['exp_mth']."/".$_SESSION['exp_yr']."</option>";

						 }

			    else
			        echo "<option>".$row["cr_card"]."  ".$str_asterisk.$row['cr_no']."  exp ".$row['exp_mth']."/".$row['exp_yr']."</option>";


		 }//END OF WHILE STMT
		echo "</select>";
		echo "</div>";
		echo "<input type='submit' id='Continue' value='Continue' style='position:absolute;right:60%;margin-top:7px;'>";
		echo "</form>";

		echo "</div>";
		[COLOR="Red"]echo "<a href='cr_card_disp.php?action=add_cr_card' onclick=\"javascript:setVisibility()\" style='position:absolute;right:45%;margin-top:7px;'>Add New Credit Card</a>";[/COLOR]


		}//END OF IF (MYSQL_NUM_ROW)
 else //OLD CUST WITHOUT CR_CARD DETAILS IN DB
    cr_card_disp2(); 
}//END OF CR_CARD_DISP1()

[COLOR="Blue"]function cr_card_disp2()[/COLOR]{//echo "cr_card_disp2";

$sql = "Select cr_card from credit_card_det";
$result = mysql_query($sql) or die(mysql_error());

?>
<div style="position:absolute;top:75%;left:-5%;margin:0;padding:0;width:100%;height:30%;">
<form action="confirm.php" method="post">
<?php
echo "<div class='form_label1' style='left:7%;'>Payment</div>";
echo "<div class='form_element' style='right:40%; vertical-align:middle;'>";
echo "<select name='cr_card'>";

while ($row = mysql_fetch_array($result))
{//if (isset($_SESSION['cr_card']) || isset($_POST['cr_card']))
   //echo $row["cr_card"];
   if (@$_SESSION['cr_card'] == $row["cr_card"] || @$_POST['cr_card']==$row["cr_card"])
		echo "<option selected>".$row["cr_card"]."</option>";
   else
 		 echo "<option>".$row["cr_card"]."</option>";
}

echo "</select>";
?>
Card Number: <input type="text" name="cr_no" maxlength="16" value="<?php 
if (isset($_POST['cr_no'])) 
    echo $_POST['cr_no']; 
else if (isset($_SESSION['complete_cr_no'])) 
        echo $_SESSION['complete_cr_no'];


  ?>">

Expiration Date:
<select name="exp_mth">
<?php for ($mth=1; $mth<=12; $mth++)
  {             if ($mth < 10)
				 {if (@$_SESSION['exp_mth']=="0".$mth || @$_POST['exp_mth']=="0".$mth)
				 		echo "<option selected>"."0".$mth."</option>";
				  else
				 		 echo "<option>"."0".$mth."</option>";
				 }
		 else
			   {if (@$_SESSION['exp_mth']==$mth || @$_POST['exp_mth']==$mth)
				 		echo "<option selected>".$mth."</option>";
				  else
					  echo "<option>".$mth."</option>";
				 }
	}
?>
</select>
<?php 
$today = getdate();

?>
<select name="exp_yr">
<?php 
for ($yr=$today["year"]; $yr<=$today["year"]+20; $yr++)
   //if (isset($_SESSION['exp_yr']) || isset($_POST['exp_yr']))
      { if (@$_SESSION['exp_yr']==$yr || @$_POST['exp_yr']==$yr)
			 echo "<option selected>".$yr."</option>";
		else
	 		 echo "<option>".$yr."</option>";
	  }
?>
</select>
<input type="submit" value="Continue Checkout" style="position:absolute;top:0;right:-15%;"/>
</form>
</div>

<?php 
}//END OF CR_CARD_DISP2()
?>

thank you in advance.

varai

Hello,

I'm re-posting this with correct highlighting on where the problem is occuring.

How do I hide a form when a link is clicked?

However, when I click Add New Credit Card link the form in cr_card_disp2 is getting displayed and the form in cr_card_disp1 is still visible.

The setVisibility javascript function is not working.

The following is my code:

<script language="javascript" type="text/javascript">
[COLOR="blue"]function setVisibility()[/COLOR]{
var frm_element = document.getElementById('cr_card_disp1_frm');
frm_element.style.display='none';
}
</script>

if (@$_GET['action']=="add_cr_card")
   {$_SESSION['add_cr_card_flag']="true";
   echo "add credit card flag: ".$_SESSION['add_cr_card_flag'];
   cr_card_disp2();
   }

[COLOR="blue"]function cr_card_disp1() [/COLOR]//CUST WITH RECORD IN DATABASE
{ 
echo $_SESSION['cust_id'];

   $sql="select cr_card, cr_no, exp_mth, exp_yr from credit_card where cust_id=".$_SESSION['cust_id']."";
	 $result = mysql_query($sql) or die(mysql_error());

 if (mysql_num_rows($result)>0) //OLD CUST WITH CR_CARD DETAILS IN DB
 		{//echo "number of records ".mysql_num_rows($result);
		echo "<div id = 'form_general'>";
		?>
		<form id='cr_card_disp1_frm' action='confirm.php' method='post'>

		<?php
		echo "<div class='form_label1' style='top:70%;'>Payment</div>";
		echo "<div class='form_element' style='top:70%; vertical-align:middle;'>";
		echo "<select id='cr_card_details' name='cr_card_details' >";
 		$str_asterisk = "***********";
		while ($row = mysql_fetch_array($result))	 
        //for (j=0; $row=mysql_fetch_array($result); j++)
		  { 
				if ((@$_SESSION['cr_card'] == $row['cr_card']) &&
					 ($_SESSION['cr_no'] == $row['cr_no']) &&
					 ($_SESSION['exp_mth'] == $row['exp_mth']) &&
					 ($_SESSION['exp_yr'] == $row['exp_yr']))
						{ echo "<option selected>".$_SESSION["cr_card"]."  ".$str_asterisk.$_SESSION['cr_no']."  exp ".$_SESSION['exp_mth']."/".$_SESSION['exp_yr']."</option>";

						 }

			    else
			        echo "<option>".$row["cr_card"]."  ".$str_asterisk.$row['cr_no']."  exp ".$row['exp_mth']."/".$row['exp_yr']."</option>";


		 }//END OF WHILE STMT
		echo "</select>";
		echo "</div>";
		echo "<input type='submit' id='Continue' value='Continue' style='position:absolute;right:60%;margin-top:7px;'>";
		echo "</form>";

		echo "</div>";
		[COLOR="Red"]echo "<a href='cr_card_disp.php?action=add_cr_card' onclick=\"javascript:setVisibility()\" style='position:absolute;right:45%;margin-top:7px;'>Add New Credit Card</a>";[/COLOR]


		}//END OF IF (MYSQL_NUM_ROW)
 else //OLD CUST WITHOUT CR_CARD DETAILS IN DB
    cr_card_disp2(); 
}//END OF CR_CARD_DISP1()

[COLOR="Blue"]function cr_card_disp2()[/COLOR]{//echo "cr_card_disp2";

$sql = "Select cr_card from credit_card_det";
$result = mysql_query($sql) or die(mysql_error());

?>
<div style="position:absolute;top:75%;left:-5%;margin:0;padding:0;width:100%;height:30%;">
<form action="confirm.php" method="post">
<?php
echo "<div class='form_label1' style='left:7%;'>Payment</div>";
echo "<div class='form_element' style='right:40%; vertical-align:middle;'>";
echo "<select name='cr_card'>";

while ($row = mysql_fetch_array($result))
{//if (isset($_SESSION['cr_card']) || isset($_POST['cr_card']))
   //echo $row["cr_card"];
   if (@$_SESSION['cr_card'] == $row["cr_card"] || @$_POST['cr_card']==$row["cr_card"])
		echo "<option selected>".$row["cr_card"]."</option>";
   else
 		 echo "<option>".$row["cr_card"]."</option>";
}

echo "</select>";
?>
Card Number: <input type="text" name="cr_no" maxlength="16" value="<?php 
if (isset($_POST['cr_no'])) 
    echo $_POST['cr_no']; 
else if (isset($_SESSION['complete_cr_no'])) 
        echo $_SESSION['complete_cr_no'];


  ?>">

Expiration Date:
<select name="exp_mth">
<?php for ($mth=1; $mth<=12; $mth++)
  {             if ($mth < 10)
				 {if (@$_SESSION['exp_mth']=="0".$mth || @$_POST['exp_mth']=="0".$mth)
				 		echo "<option selected>"."0".$mth."</option>";
				  else
				 		 echo "<option>"."0".$mth."</option>";
				 }
		 else
			   {if (@$_SESSION['exp_mth']==$mth || @$_POST['exp_mth']==$mth)
				 		echo "<option selected>".$mth."</option>";
				  else
					  echo "<option>".$mth."</option>";
				 }
	}
?>
</select>
<?php 
$today = getdate();

?>
<select name="exp_yr">
<?php 
for ($yr=$today["year"]; $yr<=$today["year"]+20; $yr++)
   //if (isset($_SESSION['exp_yr']) || isset($_POST['exp_yr']))
      { if (@$_SESSION['exp_yr']==$yr || @$_POST['exp_yr']==$yr)
			 echo "<option selected>".$yr."</option>";
		else
	 		 echo "<option>".$yr."</option>";
	  }
?>
</select>
<input type="submit" value="Continue Checkout" style="position:absolute;top:0;right:-15%;"/>
</form>
</div>

<?php 
}//END OF CR_CARD_DISP2()
?>

thank you in advance

johanafm

The error is indeed here

<a href='cr_card_disp.php?action=add_cr_card' onclick=\"javascript:setVisibility()\"

So, what happens when user clicks link?
Make form 1 invisible BUT ALSO load new page. So, whatever javascript code runs (if any), as soon as the browser clears out the current document, the javascript for that document will no longer run. Moreover, whatever that javascript managed to do (if anything at all), will have absolutely no effect on any new document.
So, you have to choose wether you want to

<a href="javascript:void(0);" onclick="someFunctionWhichRequires(event);">...</a>
<!-- if no event object is needed, you might as well -->
a href="javascript:functionCall();">...</a>

or if you want

<a href="loadNewPage.php">...</a>

You can't have both. Well, at least not unless you use target="_blank" to open a new window/tab. Javascript runs in current place, new document is opened in new place.

varai

Hello Johanafm,

Sorry for such a late reply. I was out of town for a couple of days.

First of all I want to know if I can have <a href link within <form></form>?

I tried ur first solution but it says error on page. No form is getting displayed.

The following is my javascript code, followed by the php function.

<script language="javascript" type="text/javascript">
function setVisibility()
{
var frm_element = document.getElementById('cr_card_disp1_frm');
document.write("frm_element: "+frm_element);
frm_element.style.display='none';

[COLOR="Red"]document.forms[frm_element].action = "cr_card_disp.php?action=add_cr_card";[/COLOR]
which.submit();
}
</script>

if (@$_GET['action']=="add_cr_card")
   {$_SESSION['add_cr_card_flag']="true";
   echo "add credit card flag: ".$_SESSION['add_cr_card_flag'];
   cr_card_disp2();
   }

[COLOR="Blue"]function cr_card_disp1()[/COLOR]
{<form name='cr_card_disp1_frm' id='cr_card_disp1_frm' action='confirm.php' method='post'>

........
[COLOR="red"]echo "<a href='javascript:void(0);' onclick='setVisibility();' style='position:absolute;right:45%;margin-top:7px;'>Add New Credit Card</a>";[/COLOR]</form>
}

[COLOR="blue"]function cr_card_disp2()[/COLOR]
{<form action="confirm.php" method="post">
........
</form>
}

thanks in advance

johanafm

Yes, you can put anchor elements in forms. But links still work like they do everywhere else: They issue get requests, and they have nothing to do with form submit. That is, they will not be sent with the form as post data, nor as get data if that's your setting for the form.

The error on page is not due to using one form or another of anchors, but most likley due to php syntax errors. Here's one line that comes to mind

echo "<a href='javascript:void(0);' onclick='setVisibility();' style='position:absolute;right:45%;margin-top:7px;'>Add New Credit Card</a>";</form>

Enable error reporting (including warnings) and keep correcting code until all errors are gone.

varai

Hello Johanafm,

Actually I had forgotten to include <? php ?> in my reply to you. The following is the corrected code. I'm still getting "error on page".

When you say "Enable error reporting (including warnings) ", do you mean I have to change some settings in php.ini?

The following is my php.ini file setting for errors:
error_reporting = E_ALL
display_errors = On
display_startup_errors = On

Is there anything else I need to reset?

<? php
function cr_card_disp1()
{?>
<form name='cr_card_disp1_frm' id='cr_card_disp1_frm' action='confirm.php' method='post'>

<? php
........
echo "<a href='javascript:void(0);' onclick='setVisibility();' style='position:absolute;right:45%;margin-top:7px;'>Add New Credit Card</a>";
?>
</form>
<? php
}

function cr_card_disp2()
{?>
<form action="confirm.php" method="post">
<? php
........
?>
</form>
}

thank you so much