Member Avatar for bingot

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

  • 4 Contributors
  • 9 Replies
  • 141 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by muralibobby2015
Member Avatar for network18

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

Member Avatar for bingot

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

Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Member Avatar for network18

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 by network18 because: n/a
Member Avatar for bingot

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>
Member Avatar for network18

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

Member Avatar for lifeworks

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';
	}
	
}
Member Avatar for network18

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

Member Avatar for muralibobby2015

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

Member Avatar for muralibobby2015

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

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.