Building Form

@MinuJul 19.2006

I just recently built a form through ColdFusion. I’m happy with the results but now I’m ready to take it to the next level. When a person fills out the form, they will select their status in the drop down list… for example… Student; Faculty or Staff. On the form there are some text areas where it applies to the student but doesn’t apply to Faculty/Staff and vice versa. How do I make it so a question that refers to a Student fades for Faculty/staff and vice versa, and it can be still be safe for ColdFusion to recognize it and dump it in the database. Am I confusing you?? lol

to post a comment

HTML

5 Comments(s) _↴

@ray326Jul 19.2006 — #The best way would be to submit the page with the select onchange and respond with one where the unneeded fields are not displayed. Another way would be to use a Javascript onchange handler to manipulate the page content as needed.

@MinuauthorJul 19.2006 — #ok... could this be an example:

<INPUT name="edit1" size="50">

<SCRIPT type="text/vbscript">

Sub edit1_changed()

If edit1.value = "abc" Then

button1.enabled = True

Else

button1.enabled = False

End If

End Sub

</SCRIPT>

I got this from the www.w3.org site

@MstrBobJul 19.2006 — #ok... could this be an example:[/QUOTE]

Yes... but you don't want to use VBScript. You'll want to use Javascript. It would look something like this:

[colorcode=html]

<script type="text/javascript">

function chgBox(status)

{

if(status.value=='Student')

{

document.getElementById('studentText').setAttribute('disabled','disabled');

document.getElementById('facultyText').removeAttribute('disabled');

} else if(status.value=='Faculty') {

document.getElementById('facultyText').setAttribute('disabled','disabled');

document.getElementById('studentText').removeAttribute('disabled');

}

}

</script>

// skipping...

<form action="" method="post" name="">

<div>

<select id="status" name="status" onchange="chgBox(this)">

<option value="" selected="selected">Choose Status</option>

<option value="Faculty">Faculty</option>

<option value="Student">Student</option>

</select>

</div>

<div>

<textarea id="studentText" name="studentText"></textarea>

<textarea id="facultyText" name="facultyText"></textarea>

</div>

</form>

[/colorcode]

Basically you have a function that disables/enables certain elements based on the value of the Select control, that is called whenever the Select's value changes.

@MinuauthorJul 20.2006 — #Here is the whole code that I came up within my test page:

<script type="text/javascript">

function chgBox(status)

{

if(status.value=='Student')

{

document.getElementById('FacultyText').setAttribute('disabled','disabled');

document.getElementById('Classification').removeAttribute('disabled');

} else if(status.value=='Faculty', 'Staff' ) {

document.getElementById('Classification').setAttribute('disabled','disabled');

document.getElementById('FacultyText').removeAttribute('disabled');

}

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<body>

<form action="testbull_action" method="post">

<table width="100%" border="0">

<tr>

<td width="26%" scope="col"><div align="left">Status</td>

<td width="74%" scope="col"> </td>

</tr>

<tr>

<td>

<select id="status" name="status" onChange="chgBox(this)">

<option selected="selected">Status</option>

<option value="Faculty">Faculty</option>

<option value="Staff">Staff</option>

<option value="Student">Student</option>

</select>

</td>

<td><input name="FacultyText" type="text" id="FacultyText" /></td>

</tr>

<tr>

<td> </td>

<td><select name="Classification" id="Classification">

<option value="Freshman">Freshman</option>

<option value="Sophomore">Sophomore</option>

<option value="Junior">Junior</option>

<option value="Senior">Senior</option>

<option value="Graduate">Graduate</option>

</select>

</td>

</tr>

<tr>

<td><input name="Submit" type="submit" id="Submit" value="Proceed" /></td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

</form>

</body>

</html>

I put it inside a table for organization. But now I need to create another text field for faculty and staff. This text box will need to gray out for the student... how would I go about doing this?

@pacerierAug 05.2006 — #is this what you wanted:

[code=html]
 
 <script type="text/javascript">
 function chgBox(status)
 {
 if(status.value=='Student')
 {
 
 document.getElementById('FacultyText').setAttribute('disabled','disabled');
 document.getElementById('FacultyText2').setAttribute('disabled','disabled');
 document.getElementById('Classification').removeAttribute('disabled');
 } else if(status.value=='Faculty', 'Staff' ) {
 
 document.getElementById('Classification').setAttribute('disabled','disabled');
 document.getElementById('FacultyText').removeAttribute('disabled');
 document.getElementById('FacultyText2').removeAttribute('disabled');
 }
 }
 </script>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <title>Untitled Document</title>
 </head>
 
 <body>
 <form action="testbull_action" method="post">
 
 <table width="100%" border="0">
 <tr>
 <td width="26%" scope="col"><div align="left">Status</td>
 <td width="74%" scope="col">&nbsp;</td>
 </tr>
 <tr>
 <td>
 <select id="status" name="status" onChange="chgBox(this)">
 <option selected="selected">Status</option>
 <option value="Faculty">Faculty</option>
 <option value="Staff">Staff</option>
 <option value="Student">Student</option>
 </select>
 </td>
 <td><input name="FacultyText" type="text" id="FacultyText" /><br><input name="FacultyText" type="text" id="FacultyText2" /></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><select name="Classification" id="Classification">
 <option value="Freshman">Freshman</option>
 <option value="Sophomore">Sophomore</option>
 <option value="Junior">Junior</option>
 <option value="Senior">Senior</option>
 <option value="Graduate">Graduate</option>
 </select>
 </td>
 </tr>
 <tr>
 <td><input name="Submit" type="submit" id="Submit" value="Proceed" /></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 </tr>
 </table>
 
 </form>
 
 </body>
 
 </html>
 [/code]

Also in #HTML _↴

Submit Value for Form on another Website Redirect Forms - List Or Selection

Success!

Help @Minu spread the word by sharing this article on Twitter...

Tweet This

Building Form

5 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Building Form

5 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #HTML _↴