Page 1 of 1

CSS Form Display

Posted: Thu Aug 16, 2007 3:49 am
by legend986
I'm trying to make a registration system where the user will be given a set of events to participate in. Depending on the event that is selected, I want the rest of the form to be displayed. I don't have a clue as to how to start with this. Any advice please?

For example,
EVENTS are:
1
2
3
4
5

For 1, I don't need a field named "Abstract" but I need it for Event 5... I hope I could express myself clearly...

Posted: Thu Aug 16, 2007 6:07 am
by superdezign
Post it then handle it. How do you determine the fields for each event?

Posted: Thu Aug 16, 2007 6:34 am
by legend986
Well, I'm sorry but I didn't get what you were asking me... But anyways, I think I got it. I'll give it an attempt once... I'll use Ajax along with a PHP script...

Posted: Thu Aug 16, 2007 1:44 pm
by nykoelle
Don't know if you've already gone ahead with the AJAX or whatnot, but the way I've done this is something like this

Code: Select all

<form action="" method="POST">
<?
if ($_POST['insert']=1)
{
	fully process form, print confirmation
}

else
{
	if($_POST['ev_id']!=NULL)
	{ ?>

		<insert type="hidden" name="insert" value="1">
		<select name="ev_id">
		<option value="<?=$_POST['ev_id'];?>">Event <?=$_POST['ev_id'];?></option>
		</select>
                <?

		if ($_POST['ev_id']=1)
		{
			echo event id 1 form stuff
		}
		else if ($_POST['ev_id']=2)
		{
			echo event id 2 form stiff
   		}
	}
	
	else 
	{ ?>
  	    <select name="ev_id" onchange='this.form.submit()'> 
  	    <option value="1">Event 1</option>
     	    <option value="2">Event 2</option>
  	    <option value="3">Event 3</option>
  	    </select>
  	<? 
        }

}
?>

it works, don't know if its the optimum way to code anything, I'm sure you could handle the conditions with a switch or something, but this is the gist of it.

Posted: Thu Aug 16, 2007 5:13 pm
by legend986
Thanks a lot. I did finish it off using Ajax and a php script but I'll try your method too now...

Posted: Fri Aug 17, 2007 7:59 am
by nykoelle
I was missing a bracket in the snipped i pasted so I fixed it and 'organized it' just FYI. I'm interested in how you did it though as I use this sort of thing a lot. Could you share your script?

Posted: Fri Aug 17, 2007 3:31 pm
by legend986
Sure... Just tried it with a sample... I have two files.... One is a html file in which i write the ajax code and the other one is a simple php file having a series of if statements.

My html file is something like:

Code: Select all

<div id="main">

<p><input type="radio" name="sample" value="1">Sample1<br>
<input type="radio" name="sample" value="2">Sample2<br>
<input type="radio" name="sample" value="3" onClick="sendDetails('sample3');new Effect.toggle('formcontent');">Sample3<br>
</p>
<p><div id='formcontent' style="display:none;"></p>

My php file would be something like:

Code: Select all

<?php
if($_GET['formoption'] == 'sample3') {
          $formfield = "HTML Code for Form here";
          echo $formfield;
}
else {
Other stuff here
}
?>
And the <head> section of my html file contains:

Code: Select all

<script src="js/prototype.js" language="JavaScript" type="text/javascript">    </script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
    function sendDetails(type){
    		    var url = 'content.php';
		    var params = '?content=' + type;
		    var ajaxDisplay = document.getElementById('bodycontent');
		    ajaxDisplay.innerHTML = "<center><img src='loading.gif' /> <b>loading..</b></center>";
		    var ajax = new Ajax.Updater(
		    {success: 'bodycontent'},
		    url,
		    {method: 'get', parameters: params, onFailure: reportError});
    }
    function reportError(request) {
    $F('bodycontent') = "Error";
    }
    function emailValidator(elem){
		var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
		if(elem.value.match(emailExp))
			return true;
	}
    </script>
Hope that helps... As you can see, for the sake of testing I've written some really crude code... I'll paste the real one after I'm done with it...