Replies Back to Article

Buttons on web forms

try this...

January 30, 2004 by Kutt Niinepuu

Place the buttons in the form on separate layers as well and use the show/hide layer behaviour with the click event. If the layers are within the

or this...

February 10, 2004 by Axl H

You could also set the style="visibility:hidden" directly into the Button TAG. I haven't try this but maybe it works. So you put style="visiblity:hidden" into the tag and with JavaScript you change the status to visible... I think it should work... don't know really, just try...

RE: JavaScript

February 11, 2004 by Stephen Cairns

These both work in there own way. Thanks very much. The easiest way to do it though is to have the style="visibility:hidden" but im not sure of the Javascript to change the property back to visible. Can anyone help with this. I want the button to become visible on the onclick event of a graphic located outside the form.

I was thinking something like this would do it but it didn't seem to work. Any ideas???

function display_it() {

document.form1.button.style.visiblity = 'visible';

}

</script>

Good!

February 11, 2004 by Kutt Niinepuu

You basically got it already, what you were missing I think was the document.all property. Try this for example:

<form name="form1" id="form1" method="post" action="">
<input name="one" type="button" id="one" value="One" onClick="document.all.form1.two.style.visibility='hidden';document.all.form1.three.style.visibility='show'"/>
<input name="two" type="button" id="two" value="Two" onClick="document.all.form1.three.style.visibility='hidden';document.all.form1.one.style.visibility='show'"/
<input name="three" type="button" id="three" value="Three" onClick="document.all.form1.one.style.visibility='hidden';document.all.form1.two.style.visibility='show'"/>
</form>

Working example:

Alright

February 11, 2004 by Kutt Niinepuu

The example is not workng here, but copy the code to a test page and you get the idea. It worked for me, when I tested (I suspect it only works in Explorer). Good luck!

THANK YOU

February 12, 2004 by Stephen Cairns

This has been brilliant and worked a treat, thank you very much. Im pretty new to programming and web development but Im definitely learning more everyday.

My only remaining problem now is to be able to place buttons on top of each other. Showing and hiding buttons is great although I would like to be able to reduce the clutter on the page by having the buttons appear on the same place. The buttons are all hidden to start with and when a graphic is clicked a button on the form appears. When the mouse clicks a different graphic that button disappears and another appears. So on and so on.

I would simply like these buttons to appear in the same place have you any suggestions of how this can be done?? I don't want to use layers to do this either

I see

February 12, 2004 by Kutt Niinepuu

In this case we've tried to make it the hardest way. :) It would be al ot easeir then, to just switch the values of the same button, because the value is what determines the button's label afterall. You can also use the value in your scripts to determine which virtual "button" the user clicked. Your images are probably within the HREF tags to be clickable, so the easier:

So now when you click the image, the same button changes its name (value actually). And when you click on the button, the new value gets passed as a form variable.

RE: I see

February 12, 2004 by Stephen Cairns

Nice one, however the onclick of each button will be running different asp script. I.e. when I click a button on the form I want it to post different parameters to the server. Will this still work.

Not at home with ASP

February 12, 2004 by Kutt Niinepuu

I know that in PHP you can run the following if clause:

if($_POST['Submit']=='Yourbuttonvalue'){
then run the rest of this script;}

This way you can assure the right click starts the right script. Be sure to set the type of the button to "Submit" only changing the value part. This will submit the form and thus create the $_POST variables. The form action value should be the filename the form is on (or the page where the script is on that receives those $_POST variables). I hope this helps!