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...