...

View Full Version : Select box option pointing to text area



maganti.smurthy
11-24-2011, 07:40 AM
Hi all !

I have written code for select options one. In that option one of the option is to select others. When i select others automatically the cursor should goto others text area box. Any suggessions please.

Code:

<!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" />
<title>Smartcard Gen2</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" charset="utf-8">
var notEmpty=function(){

document.write("Problem Submitted, Thank You");
window.open(list.html);

}




</script>
</head>

</head>
<body>
<div class="container">,
<div class="topbar">
<p>Report a Problem<a href="list.html" class="button back black"><span></span>&nbsp;&nbsp;&nbsp;ATM Details</a></p>
</div>
<div class="content">
<h6>Find ATMs by Address:</h6>
<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Problem :</strong></td>
<td>
<FORM ACTION="#" NAME=latin>
<SELECT NAME="words" >
<option value="ATM NOT PRESENT">ATM not present</option>
<option value="ATM IS BROKEN">ATM Broken</option>
<option value="MASTERCARD IS NOT ACCEPTED">ATM doesnot accept MasterCard</option>
<option value="ATM IS NOT ACCESSIBLE">ATM is not accessible</option>
<option value="others" id="others">Others</option>

</select>
</FORM>
</td>
</td>
</tr>
</table>

<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Other :</strong></td>
<td width="67%" align="left" valign="top"><input name="textfield3" type="textarea" rows="25" coloumns="15" id="textfield3" placeholder=" " /></td>
</tr>
</table>
</div>
<a href="#" class="transactions" onclick="notEmpty();">Submit</a></div>
</div>
</body>
</html>

Philip M
11-24-2011, 08:10 AM
Try this:-


<form name = "latin">
<select name="words" onchange = "showbox()" >
<option value="ATM NOT PRESENT">ATM not present</option>
<option value="ATM IS BROKEN">ATM Broken</option>
<option value="MASTERCARD IS NOT ACCEPTED">ATM does not accept MasterCard</option>
<option value="ATM IS NOT ACCESSIBLE">ATM is not accessible</option>
<option value="Others">Others</option>
</select>
<br><br>
<div id = "otherProblem" style="display:none" >
Enter details of your problem here <br><textarea rows = "5" cols = "40" name = "otherProb" ></textarea>
</div>
</form>

<script type = "text/javascript">
function showbox() {
document.getElementById("otherProblem").style.display="none";
var val = document.latin.words.value;
if (val == "Others") {
document.getElementById("otherProblem").style.display="inline";
document.latin.otherProb.focus();
}
}
</script>

If you give your form elements meaningless or inapt names such as latin and words, then your difficulties will tend to increase.

BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


If you are 20 and you are not a socialist, then you have no heart. If you are 40 and you are still a socialist, then you have no brain.

maganti.smurthy
11-24-2011, 10:25 AM
Some change in code made by me. Here i want to point the cursor to other textarea box if i select others in select list

code:
<!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" />
<title>Smartcard Gen2</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" charset="utf-8">
function notEmpty(selectobj){
i=(selectobj.selectedIndex)
if((x=document.getElementById("myselect").options[i].value)!="others")
alert("Problem Submitted");
else
{
alert("Enter text into Other text box and submit the problem");
}
}

</script>
</head>

</head>
<body>
<div class="container">,
<div class="topbar">
<p>Report a Problem<a href="list.html" class="button back black"><span></span>&nbsp;&nbsp;&nbsp;ATM Details</a></p>
</div>
<div class="content">
<h6>Find ATMs by Address:</h6>
<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Problem :</strong></td>
<td>

<SELECT NAME="words" id="myselect" >
<option value="ATM NOT PRESENT" id="a">ATM not present</option>
<option value="ATM IS BROKEN" id="a">ATM Broken</option>
<option value="MASTERCARD IS NOT ACCEPTED" id="a">ATM doesnot accept MasterCard</option>
<option value="ATM IS NOT ACCESSIBLE" id="a">ATM is not accessible</option>
<option value="others" id="a">Others</option>

</select>

</td>
</td>
</tr>
</table>

<div class="box">
<table width="95%" border="0" align="center" cellpadding="8" cellspacing="0">
<tr>
<td width="33%" align="right" valign="middle"><strong>Other :</strong></td>
<td width="67%" align="left" valign="top"><input name="textfield3" type="textarea" rows="2" cols="15" id="textfield3" placeholder=" " /></td>
</tr>
</table>
</div>
<a href="#" class="transactions" onclick="notEmpty(document.getElementById('myselect'));">Submit</a></div>
</div>
</body>
</html>

Philip M
11-24-2011, 04:15 PM
Sorry, I cannot waste any more time on this. You seem to be totally oblivious to the advice you are given. Trying to communicate with you is like talking to a brick wall.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum