Other Box.

Jacbey · May 25, 2011

Hi Guys,

Before I start, please don't just say "Google it." or "Yahoo it" because I have and I haven't found anything that works.

I was wondering if anyone could show me how I can show an "other" box if the option "other" is selected in a drop down list.

Thanks in advance! :shy:

gizmola · May 25, 2011

You need to do a better job explaining what you're asking for. A picture wouldn't hurt either --- people call those "wireframes" typically.

Jacbey · May 25, 2011

You need to do a better job explaining what you're asking for. A picture wouldn't hurt either --- people call those "wireframes" typically.

Uhmm. I can't find an example but..

If I have a drop down list of, lets say schools. If I have a drop down list of schools and someone has to choose their school. But if their school is not on the list they can click the option "Other..." and a box will appear underneath the drop down list for them to enter their school into.

I hope that better explains it?

gizmola · May 25, 2011

Sure that type of thing could be fairly easily done using jquery. You have your drop down and you have a input type="text" element that is hidden. You need a little bit of javascript that you'll attach to your drop down list element's onChange event, which again can be done very simply with jquery, that simply checks the value of the input element and does a toggle().

Jacbey · May 26, 2011

Sure that type of thing could be fairly easily done using jquery. You have your drop down and you have a input type="text" element that is hidden. You need a little bit of javascript that you'll attach to your drop down list element's onChange event, which again can be done very simply with jquery, that simply checks the value of the input element and does a toggle().

I know, I was wondering if anyone had the js needed though because I cannot write js to save my life!

hemo-ali · May 26, 2011

very easy this is the code

<script src="jquery.js"></script>
<script>
$(document).ready(function(){

$(".schools").change(function(){
    if($(".schools").val() == "Other.."){
        $(".show").show("slow");
    }    
    
  });
  });

</script>
<select class="schools">
    <option>Choose your school</option>
    <option>1</option>
    <option>2</option>
    <option>Other..</option>

</select>
<div class="show" style="display: none;">
    <input type="text" name="name" id="name">
    
</div>

**notice set your jquery path

Jacbey · May 26, 2011

It doesn't work. But I am sure I am not doing something right.

Why do I need this? And what is it for?

herghost · May 26, 2011

You need to have a copy of jquery on your server, or replace that line with:

<script type='text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>

Jacbey · May 26, 2011

aah sweet, thanks. I'll install a copy of jquery and come back and tell you how it goes. =]

cyberRobot · May 26, 2011

aah sweet, thanks. I'll install a copy of jquery and come back and tell you how it goes. =]

Uh oh, if you start using jQuery, you might need to change your signature.

Jacbey · May 26, 2011

aah sweet, thanks. I'll install a copy of jquery and come back and tell you how it goes. =]

Uh oh, if you start using jQuery, you might need to change your signature.

Haha true, and I use Dreamweaver. But I still agree it's not a way to learn JS or DW to build a website.

Jacbey · May 26, 2011

You need to have a copy of jquery on your server, or replace that line with:
<script type='text/javascript" src='http://code.jquery.com/jquery-latest.min.js'></script>

Naw, still doesn't work. Here is the link - http://www.klueless.net/daisysite/register.php

cyberRobot · May 26, 2011

If you don't want to use jQuery, I've posted JavaScript code to a similar request here:

http://www.phpfreaks.com/forums/index.php?topic=331574.msg1560437#msg1560437

Jacbey · May 26, 2011

Thanks, but it doesn't work. Take a look for yourself: http://www.klueless.net/daisysite/register.php

Here is the code I am using:

 <!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=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/ico" href="images/favicon.ico" />
<title>Register</title>


<script type="text/javascript">
function showfield(activeDropDown) {
     var activeDropDown_selectedValue = activeDropDown.options[activeDropDown.selectedIndex].value;
     if(activeDropDown.name == 'school2' && activeDropDown_selectedValue == 'Other...') {
          document.getElementById('otherdiv').innerHTML = 'Other: <input type="text" name="size_other" />';

</script>
</head>

<body>

<div class="InnerLeft">
<div id="header">
<table>
<tr>
<td><font face="Comic Sans MS, cursive" size="+5" color="#white"><a href="index.php">iWatch</a></font></td>
<td>   </td>
</tr>
</table>
</div>

<div id="menu">
<table>
<tr>
<td><font face="Comic Sans MS, cursive" size="+1" color="#white"><a href="about.php">About iWatch</a></font></td>
</tr>
</table>
</div>
</div>


<div id="main">



<?php
$inuse = $_REQUEST['inuse'];
$empty = $_REQUEST['empty'];
$forname = $_REQUEST['name'] ;
$surname = $_REQUEST['surname'];
$username = $_REQUEST['username'];
$dob = $_REQUEST['dob'];
$mob = $_REQUEST['mob'];
$yob = $_REQUEST['yob'];
$gender = $_REQUEST['gender'];
$email = $_REQUEST['email'];
$password = $_REQUEST['password'];


//if ($forname == '' OR $surname == '' OR $username == '' OR $dob == 'Day' OR $mob == 'Month' OR $yob == 'Year' OR $gender == 'Gender' OR $email == '' OR $password == '')
//	$clear = "<input name='submit' class='textbox_button' type='reset' value='Reset the Form.' />";
//else
	$clear = "<a href='register.php'><input name='submit' class='textbox_button' type='clear' value='Reset the Form.' /></a>";



if($inuse == 'usrinuse')
	echo "<font color='red'>Username or Email in use, please try another one.</font>";

if($empty == 'empty')
	echo "<font color='red'>Please fill in all the fields.</font>";



		echo "<table width='600' border='0' cellspacing='0' cellpadding='2px'>
		  <tr>
		    <td width='156'> </td>
		    <td width='444'> </td>
		  </tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Forname</td>
<td><form action='regprocess.php' name='reg'> 
<input type='text' class='textbox' name='name' id='name' value='" . $forname . "'/></td>
</tr>
<tr>
<td>Surname</td>
<td><input type='text' name='surname' class='textbox' id='surname' value='" . $surname . "'/>
</td>
<tr>
<td>Username</td>
<td><input type='text' name='username' id='username' class='textbox' value='" . $username . "'/></td>
</tr>
</td>
  </tr>
  <tr>
  <td>   </td>
  </tr>
<tr>
<td><i><u>Date of Birth</u></i></td>
</tr>
<tr>
<td> Day </td>
<td>
  <select name='dob' class='textbox' id='dob' value='" . $dob . "'>
    <option>Day</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
  </select>
  </td>
  </tr>
  <tr>
  <td> Month: </td>
  <td>
  <select name='mob' class='textbox' id='mob' value='" . $mob . "'>
  <option selected='selected'>Month</option>
  <option>January</option>
  <option>February</option>
  <option>March</option>
  <option>April</option>
  <option>May</option>
  <option>June</option>
  <option>July</option>
  <option>August</option>
  <option>September</option>
  <option>October</option>
  <option>November</option>
  <option>December</option>
</select>
</td>
  </tr>
  </tr>
  <tr>
  <td> Year: </td>
  <td>
  <select name='yob' class='textbox' id='yob' value='" . $yob . "'>
  <option selected='selected'>Year</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>

  </select></td>
</tr>
    </tr>
<tr>
    <td>Current School Year</td>
    <td><select name='year' class='textbox' id='year'>
    <option>Choose a Year</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
    </select></td>
  </tr>
    <tr>
    <td>School</td>
    <td><select name='school2' class='textbox' id='school2' onchange='showfield(this)>
    <option selected='selected'>Christ&#39;s Hospital School</option>
      <option>Other...</option>
      </select>
<br />

<div id='otherdiv'></div>


	<!--<table class='show' style='display: none;'><tr><td> 
	    <input type='text' name='name' id='name'>
		</td>
		</tr>
	</table>-->


</td>
  </tr>
  <tr>
  <td>   </td>
  </tr>
<tr>
<td>Gender</td>
<td><select name='gender' class='textbox' id='gender' value='" . $gender . "'>
  <option selected='selected'>Gender</option>
  <option>Male</option>
  <option>Female</option>
  <option>Don't want to tell you!!</option>
</select></td>
</tr>
<tr>
<td>Email Address</td>
<td><input type='text' class='textbox' name='email' id='email' value='" . $email . "'/></td>
</tr>
<tr>
<td>Desired Password</td>
<td><input type='password' class='textbox' name='password' id='password' value='" . $password . "'/></td>
</tr>
  <tr>
  <td>   </td>
  </tr>
<tr>
<td> </td>
<td><input name='submit' class='textbox_button' type='submit' value='Submit the Form.' />
" . $clear ."
</form> </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>";
?>
</div></body>
</html>

cyberRobot · May 26, 2011

First, you're missing the end curly bracket in the JavaScript:

<script type="text/javascript">
function showfield(activeDropDown) {
     ...
}
</script>

Also, the onchange attribute will never get activated if the drop-down doesn't contain more than just the "Other..." option. You'll need to add more options to the School drop-down for the code to work.

If you don't want to use jQuery, I've posted JavaScript code to a similar request here:

http://www.phpfreaks.com/forums/index.php?topic=331574.msg1560437#msg1560437

Before I get in trouble, it turns out that I didn't write the code in the above post. I was just correcting code written by the OP.

Jacbey · May 26, 2011

Whoo I got it working!! Thank you so much! I had a look as the JS and it turns out it's not as confusing as I thought it would be. Again, thank you. And thanks to everyone who helped.

matthew9090 · May 26, 2011

i looked at the page but when you select of the other schools it doen't go away. so you would use that jquery script again to check if it not selected.

Jacbey · May 26, 2011

I know; I was just working on that. I have never used JavaScript before so this is a first to me.

Jacbey · May 26, 2011

i looked at the page but when you select of the other schools it doen't go away. so you would use that jquery script again to check if it not selected.

Would you mind showing me how?? I'm stuck as.

Adam · May 26, 2011

I would only use jQuery for something this simple if you're already using it else where. However you can still implement it separately from your HTML, as jQuery tries to rightly encourage you to do, with vanilla JS whilst keeping it usable for those with JS disabled.

The HTML:

<form action="">
    <select id="mySelect">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="other">Other</option>
    </select>
    <div id="mySelectOther">
        <input type="hidden" name="otherValue" />
    </div>
</form>

Note that I'm not hiding it by default here, so that users with JS disabled will still be able to use it. Also note there is no JS logic mixed in here!

Place this within a script tag in your <head>:

window.onload = function() {
    var mySelect = document.getElementById('mySelect');
    mySelect.onchange = function() {
        if (this.value == 'other') {
            document.getElementById('mySelectOther').style.display = 'block';
        }
    }
}

Note that if you already have a window.onload handler defined, you need to add to that instead (otherwise you would overwrite the existing one, or which ever came first).

Place this at the bottom of your document, just before the closing body tag:

<script type="text/javascript">
    document.getElementById('mySelectOther').style.display = 'none';
</script>

Now when a non-JS user comes along, the DIV containing the 'other' text input will remain shown, and you'll just have to count on their common sense not to fill it in unless they select other - though I would account for mistakes within your validation.

When a JS user comes along, the script at the bottom of the body will hide the 'other' text input DIV, until they select 'Other' from the drop-down.

Jacbey · May 26, 2011

But; MrAdam; would the person then be able to select another option and the 'other' box disappears?

Adam · May 26, 2011

Whoops. Replace the IF condition with this:

        if (this.value == 'other') {
            document.getElementById('mySelectOther').style.display = 'block';
        } else {
            document.getElementById('mySelectOther').style.display = 'none';
        }

Adam · May 26, 2011

Or... a little more elegant:

document.getElementById('mySelectOther').style.display = (this.value == 'other') ? 'block' : 'none';

Jacbey · May 26, 2011

Adam, it doesn't work. http://www.klueless.net/daisysite/register.php

Adam · May 26, 2011

Err.. you have it commented out? You need to change the JS slightly to match your IDs...

Sign In

Other Box.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information