making a form invisible and displaying another form on top of that

[varai]

Hello,

How can I make a form (cr_card_disp1_frm) invisible and display another form (cr_card_disp2_frm) on top of that when I click a button?

The following is a very simple code to hide a form.

<script language="javascript" type="text/javascript">
function setVisibility(which)
{document.forms['cr_card_disp1_frm'].style.visibility="hidden";
}
</script>

This works fine when I click the continue button in that form:

<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility(this.form)"/>
</form>

HOwever the following doesn't seem to work. cr_card_disp1_frm is not hidden and cr_card_disp2_frm is getting displayed too. So, both forms are visible here. Which is not what I want.

<script language="javascript" type="text/javascript">
function setVisibility(which)
{
document.forms['cr_card_disp1_frm'].style.visibility="hidden";
which.action = "setvisibility.php?action=add_cr_card";
which.submit();
//return true;
}
</script>

<?php
if (@$_GET['action']=="add_cr_card")
   {
   cr_card_disp2();
   }
   ?>
<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility(this.form)"/>
</form>

<?php
function cr_card_disp2()
{?>
<form id="cr_card_disp2_frm" action="" method="post">
<input type="text" maxlength="30" id="myname" />
</form>
<?php
}
?>

thank you.

[Krik]

First don't use "visibility" use "display". Visibility only hides the element but reserves the space where as display allows the space to be used by another element. W3schools.com has very nice demo here.

Next you are not using the variables that you are passing to the function

this is your code

function setVisibility(which)
{document.forms['cr_card_disp1_frm'].style.visibility="hidden";
}

this code does the same but used the variable being passed to the function

function setVisibility(which)
{which.style.visibility="hidden";
}

I would be inclined to pass one more variable in your "onclick" event

<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility('cr_card_disp1_frm', 'cr_card_disp2_frm')"/>
</form>

<form id="cr_card_disp2_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility('cr_card_disp2_frm', 'cr_card_disp1_frm')"/>
</form>

and do your javscript like so

function setVisibility(obj1, obj2) {

document.getElementById(obj1).style.display="block";
document.getElementById(obj2).style.display="none";
}

[Krik]

Hmm after a second look and a couple rereads, I think your question may have been a php question and not a "ClientSide Technologies" question.

In your php you have it set so that this is always displayed

<?php
<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility(this.form)"/>
</form>

and "if" action equals add_cr_card then run the cr_card_disp2 function. thereby causing both to be displayed.

Try this

<?php
if (@$_GET['action']=="add_cr_card")
{
   cr_card_disp2();
}
else {
?>
<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" maxlength="20">
<input type="button" value="continue" onclick="setVisibility(this.form)"/>
</form>
<?php
}
function cr_card_disp2()
{
?>
<form id="cr_card_disp2_frm" action="" method="post">
<input type="text" maxlength="30" id="myname" />
</form>
<?php
}
?> 

[varai]

Hello Krik,

After reading your solutions, the code in red shows the changes I have made to my code.

However, as you said, it displays both the forms when I click the continue button in cr_card_disp1_frm.

which.style.display="none" is not having any effect on the output.

Please help!

<script language="javascript" type="text/javascript">
function setVisibility(which)
{
[COLOR="Red"]which.style.display="none";[/COLOR]
which.action = "setvisibility.php?action=add_cr_card";
which.submit();
return true;
}
</script>

<?php
if (@$_GET['action']=="add_cr_card")
   {
   cr_card_disp2();
   }
   ?>
<form id="cr_card_disp1_frm" action="" method="post">
<input type="text" value="cr card disp1" maxlength="20">
<input type="button" value="continue" [COLOR="red"]onclick="setVisibility(this.form)"[/COLOR]/>
</form>

<?php
function cr_card_disp2()
{?>
<form id="cr_card_disp2_frm" action="" method="post">
<input type="text" value="cr card disp2" maxlength="30" id="myname" />
</form>
<?php
}
?>

thank you.

[Krik]

However, as you said, it displays both the forms when I click the continue button in cr_card_disp1_frm.

You need to rethink your logic. DOM changes, performed by javascript, do not automatically get passed the next page. Javascript only effects the current page that is showing. To pass data (changes) to the next page requires you pass it via POST or GET request.

The problem is in your PHP. When that button is clicked your PHP is being told to load both forms, and the javscript from the previous page has absolutely zero control over that.

As demonstrated in the later of my 2 previous posts wrap an "else" around that first form.

[varai]

Hello Krik,

Do you mean which.action = "setvisibility.php?action=add_cr_card"; displays on a new page and not the existing page?
and therefore the setVisibility function has no effect on that.

Is there any way I can display that on the current page and not the new page?

thank you.

[johanafm]

Not exactly. A form's action attribute tells it where to issue a request, but it does not request anything. Just like the method attribute tells it wether to issue a post or get request, but does not do either. form.submit() on the other hand, submits the form, which in your case means that a post request is sent to your.server/currently/used/directory/setvisibility.php?action=add_cr_card.

You sit down at a table in a restaurant and
1. order a sallad (page request)
2. you get your food (page request complete)
3. included with the sallad is a little robot that can salt your food and push food stuffs around to make patterns (javascript)
4. you eat a little and food gets salted and pushed around (user activity + javascript)
5. you tell your robot to hide some tomatoes (hide a form)
6. and at the same time you tell the waiter to bring a steak (new page request), which means that he takes away your salad, and since the robot belongs with the salad, it goes away as well. Besides, the robot would have no tomatoes to hide anyway.
7. The steak, which also comes with a robot that can salt, is served.
8. etc.

If you just want to hide stuff on the current page, use javascript to do so.

If you want stuff to be invisible on a new page from the start (possibly depending on certain conditions; e.g. user settings), create appropriate html markup with your php code.

Always remember that one page is completely separate from any other page.

Your server, on the other hand, can keep track of a specific user with sessions. One page can also send data to the next one, through post or get data.

[Krik]

Do you mean which.action = "setvisibility.php?action=add_cr_card"; displays on a new page and not the existing page?

which.action = "setvisibility.php?action=add_cr_card";

Will just sets the "action" attribute for the form.

That is the same as doing this

<form id="cr_card_disp1_frm" action="setvisibility.php?action=add_cr_card" method="post">

And when the user clicks submit they are sent to "setvisibility.php?action=add_cr_card", which is a new page.

and therefore the setVisibility function has no effect on that.

Yes the setVisibility function will not have any effect on the next page. When a new page is loaded all javascript html and ccs is erased from the browser and all new javascript css and HTML are loaded.

Is there any way I can display that on the current page and not the new page?

Can display what on the current page?

[varai]

Thank you so much Krik and Johanafm for all the explanation. With both your guidance, I finally found the solution....after soooo many days. 🙂

Looks like I don't need any javascript function here. I simply added an else statement and created cr_card_disp1 function to make it work.

The following is my code:

if (@$_GET['action']=="add_cr_card")
   {
   cr_card_disp2();
   }
[COLOR="Red"]else 
   cr_card_disp1();
function cr_card_disp1()
{
   ?>
<form id="cr_card_disp1_frm" action="setvisibility.php?action=add_cr_card" method="post">[/COLOR]
<input type="text" value="cr card disp1" maxlength="20">
[COLOR="red"]<input type="submit" value="submit" />[/COLOR]</form>

<?php
}
function cr_card_disp2()
{?>
<form name="cr_card_disp2_frm" action="" method="post">
<input type="text" value="cr card disp2" maxlength="30" id="myname" />
</form>
<?php
}
?>

[Krik]

I simply added an else statement

I usually don't like saying "I told you so", but I did. If you look at my second post I had it in the example I provided and then in my third post I referred to to my second post.

Either way I am glad you figured it out.

[varai]

Yes Krik, you had mentioned that in ur earlier post. I guess I didn't read that properly. Sorry for being careless. If I had read it well, I could have solved this much earlier.

Thanks a lot.