new textbox on select <others value>

Question

bingot 0 Newbie Poster

14 Years Ago

hi there . im new here and also in developing a site using php.

if could anyone give me an idea for for adding a textarea after a others value was selected on select(dropdown)

ohh i can explain it clear. ok im just gonna give a sample

http://ph.jobstreet.com/myjobstreet/registration.htm

when you go to this section :Field of Study: a new textbox will appear after selecting the [others]

i try to use jquery but its too much complicated for me. :/

:) hope this will do. and you guy can help me .

:)thanx

php

4 Contributors
9 Replies
139 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by muralibobby2015

All 9 Replies

network18 15 Practically a Master Poster

14 Years Ago

It can be done, with javascript alone, cal some function which changes the display property of the textarea you want on select of the select list.
Start coding it, and post the code if you stuck up somewhere.we will like to help you working this.
:)

network18 15 Practically a Master Poster

14 Years Ago

Its more advanced than what you need, you just need the simple script like below -

function showTextbox()
{
	var val = document.getElementById('sel').value;
	//alert(val+">>");
	if(val==4)
	{
		document.getElementById('txt').style.display = 'inline';
	}
}

</script>
</head>
<body>
<form id="frm" name="frm">
<select id="sel" name="sel" onchange="showTextbox();" >
<option value="1" >China</option>
<option value="2" >India</option>
<option value="3" >Pakistan</option>
<option value="4" >Others</option>
</select>
<textarea id="txt" name="txt" rows="5" style="height:auto; width:auto; border-collapse:collapse; display:none;" >
</form>
</body>
</html>

if you want to toggle the visibility of the textarea, you can experiment the function as-

function showTextbox()
{
	var val = document.getElementById('sel').value;
	//alert(val+">>");
	if(val==4)
	{
		var current =  document.getElementById('txt').style.display;
		if(current == 'none'){ document.getElementById('txt').style.display = 'inline'; }
		if(current == 'inline'){ document.getElementById('txt').style.display = 'none'; }
	}
}

Edited 14 Years Ago by network18 because: n/a

network18 15 Practically a Master Poster

14 Years Ago

no its fine, it should work in any browser, not much complicated javascript actually.
Still if you get any error, just post that here from your error console

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

bingot 0 Newbie Poster · Answer 1 · 2009-10-22T19:53:12+00:00

found few code here ///////
///

var arrInput = new Array(0);
  var arrInputValue = new Array(0);

function addInput() {
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  display();
}

function display() {
  document.getElementById('parah').innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('parah').innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
  }
}

function saveValue(intId,strValue) {
  arrInputValue[intId]=strValue;
}  

function createInput(id,value) {
  return "<input type='text' id='test "+ id +"' onChange='javascript:saveValue("+ id +",this.value)' value='"+ value +"'><br>";
}

function deleteInput() {
  if (arrInput.length > 0) { 
     arrInput.pop(); 
     arrInputValue.pop();
  }
  display(); 
}

//// body tags//////

<p id="parah">Click below to dynamically create/remove input boxes in this field</p>

<a href="javascript:addInput()">Add more input field(s)</a><br>
<a href="javascript:deleteInput()">Remove field(s)</a>

/////////////////////

i hope you can help me with this. if only this can only add 1 text box

thnx

bingot 0 Newbie Poster · Answer 2 · 2009-10-23T12:25:38+00:00

hi there network18 thank you very much for your the idea

pls check. it does work. but im not sure in other browser.

thnx :)

<html>
<head>
<title>Drop DOwn and Textbox</title>
<script language="javascript">
function displ()
{
  
  if(document.getElementById('sel').value == 'others') {
     document.getElementById('txt').style.display = 'inline';
  }
  else {
	document.getElementById('txt').style.display = 'none';
	return false
  }
  return true;
}
//-->
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<table border="0" cellspacing="0" cellpadding="0" width="75%">
  <tr>
<td width="100%"><form name="myFORM" >
        <p> 
          <select name="sel" id="sel" size="1" onChange="return displ();">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="others">others</option>
          </select>
         <input  type="text" id="txt" name="txt" rows="5" style="height:auto; width:auto; border-collapse:collapse; display:none;" >
        </p>
</form>
</td>
</tr>
</table>
</body>
</html>

lifeworks 5 Junior Poster · Answer 3 · 2009-10-23T12:33:16+00:00

this should do it for you, i had the same problem a while back
set your 'select' to have an id of 'cat', when you select a value, it will check which value you have selected - if that equates to new, it will make the text box 'newcat' to visible - exactly what network 18 suggested,

window.onload = initForm;

function initForm(){
	document.getElementById('cat').selectedIndex = 0;
	document.getElementById('cat').onchange = showHideBox;
}

function showHideBox(){
	
	var whichForm = document.getElementById('cat');
	var theForm = whichForm.options[whichForm.selectedIndex].value;
	if(whichForm.options[whichForm.selectedIndex].value == 'new'){
		document.getElementById('newcat').style.display='';
	}
	else{
		document.getElementById('newcat').style.display='none';
	}
	
}

network18 15 Practically a Master Poster · Answer 4 · 2009-10-23T12:37:47+00:00

yes agree with it,its a good way to call the function on window load

muralibobby2015 17 Posting Pro · Answer 5 · 2009-10-23T19:46:40+00:00

hi there . im new here and also in developing a site using php.
if could anyone give me an idea for for adding a textarea after a others value was selected on select(dropdown)

ohh i can explain it clear. ok im just gonna give a sample
http://ph.jobstreet.com/myjobstreet/registration.htm
when you go to this section :Field of Study: a new textbox will appear after selecting the [others]

i try to use jquery but its too much complicated for me. :/

:) hope this will do. and you guy can help me .
:)thanx

hi....dis is murali....i think ur task is over..but i have a small doubt....plz help me...
i selected "others" in "Field of Study". after that user entering value in text box.....and submited that form ...ok...
after that user want to edit that value...how he edits that value.....
{ i have this problem...thats y i am asking..frnd........i have done same like this....but user enters value in textbox that value displays in admin side with status "zero".....when ever admin change that status "one" after that value comes in select box in userside.........for suppose admin not changed status='1', so that will not appear in dropdown....in that time user wants to edit that value.....so how he can edit.....
that is my problem........i think my problem is understood...........

muralibobby2015 17 Posting Pro · Answer 6 · 2009-10-23T19:52:40+00:00

http://ph.jobstreet.com/myjobstreet/registration.htm

hi....dis is murali....2days back u solved one problem in above page..but i have a small doubt....plz help me...y b'coz i have also same problem.....
i selected "others" in "Field of Study". after that user entering value in text box.....and submited that form ...ok...
after that user want to edit that value...how he edits that value.....
{ i have this problem...thats y i am asking..frnd........i have done same like this....after user enters value in textbox that value displays in admin side with status "zero".....when ever admin change that status "one" after that value comes in select box in userside.........for suppose admin not changed status='1', so that will not appear in dropdown in userside....in that time user wants to edit that value.....so how he can edit.....
that is my problem........i think my problem is understood by u...........

new textbox on select <others value>

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers