Array Question related to both HTML and Javascript - javascript

I have this simple bit of code. When the user chooses Others, an <input type=text> should appear.
But it only works when there is only one value selected.
Users can randomly add in the same select type, so the code can't be changed. For what I know, in javascript need to use foreach.
So my question is, how to let each of the <input type=text> appear in EACH of the select elements instead of it only appearing in the first one.
function Pack(val){
var element=document.getElementById('otherpack');
if(val=='others')
element.style.display='block';
else
element.style.display='none';
}
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>
<select name="Type[]" onchange='Pack(this.value);' required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
</select>

Here is my solution:
function Pack(v) {
var inputBox=v.nextSibling;
var selectedValue=v.options[v.selectedIndex].value;
if (selectedValue=="others") {
inputBox.style.display='block';
} else {
inputBox.style.display='none';
}
}
This should be the most stable solution.

I would prefer to make change events into javascript side instead of making it in HTML..
As suggested it is not good to use input inside select so make input outside of select box..
const selectBoxes = document.querySelectorAll('select');
function Pack(select) {
const selectedInput = select.nextElementSibling;
if(select.value === 'others')
selectedInput.style.display='block';
else
selectedInput.style.display='none';
}
selectBoxes.forEach(select => {
select.addEventListener('change', Pack.bind(this, select))
})
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>
<br>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" id="otherpack" style="display:none"/>

id attributes should have unique values, so your selector will always select the first match.
Secondly, input elements are not allowed to be children of select elements. select elements can only have optgroup or option elements as children
It is also best practice to attach listeners via JavaScript code instead of onchange attributes. You can listen at the document level ("event delegation") to avoid repeating several listeners (one per select element).
Here is how it could work:
function Pack(e){
let select = e.target;
if (select.name !== "Type[]") return;
let element = select.nextElementSibling; // this finds the INPUT element
element.style.display = select.value === "others" ? "block" : "none";
}
document.addEventListener("change", Pack);
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>
<br>
<select name="Type[]" required>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="others">Others</option>
</select>
<input type="text" name="othermethod[]" style="display:none"/>

Have you tried giving them unique ids? if you wanna have the same identifier in different elements, maybe use the class attribute instead.
Hope it helps, good luck !
edit: actually, now I see you're calling them with an id that isn't unique. Give each of the text-inputs their own id and it should work
ids are meant to be unique in the code, so whenever you call your function it assumes that there is only one element with that id

Related

How to set parameter values to a "onClick" function using javascript or jquery

I am trying to set parameters to onClick event inside a html button using javascript.
This is how html button looks like:
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
param1 = should be the value from a html select element with id='year' and name='year'
param2 = should be the value from a html select element with id='grade' and name='grade'
param3 = should be the value from a html select element with id='subject' and name='subject'
These are the html select options
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
I have no clue how to set values to param1, param2, param3
This is what I tried but it feels wrong.
$('#upload-button').val = $('#year').val;
Can someone please help me?
I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery
Thank you
I can understand your needs. if you really wanted to do this only with HTML element, here is the way.
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
Here is the working example
function uploadFileIGCSE(val1, val2, val3){
document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
<p>log value : (<span id="log"></span>)</p>
You really shouldn't be using inline event listeners like onclick (for maintainability, security and separation of concerns reasons).
Instead, add the listener using the DOM API's HTMLElement.prototype.addEventListener():
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
function uploadFileIGCSE(x,y,z) {
console.log(x,y,z);
}
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button">Upload</button>
try this
<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
aria-expanded="false">Upload</button>
function getOption() {
var year = document.getElementById("year");
var year_option = year.options[year.selectedIndex].value;
var grade = document.getElementById("grade");
var grade_option = grade.options[grade.selectedIndex].value;
var subject = document.getElementById("subject");
var subject_option = subject.options[subject.selectedIndex].value;
uploadFileIGCSE(year_option, grade_option, subject_option)
}
$('#upload-button').click(function(e) {
var year = $('#year').val();
var grade = $('#grade').val();
var subject = $('#subject').val();
uploadFileIGCSE(year, grade, subject);
})
You could try something like this.
The click event can simply run an anonymous function. Its only input will be the default event object supplied by the DOM engine. That function can then gather the values from the various elements you're interested in, and make a further call to the uploadFileIGCSE function, passing those values as parameters.
Here's a demo. Note that I've used an unobtrusive event handler using addEventListener() in the JS code, rather than "onclick" within the HTML. This is generally considered to be better practice, as it makes the code easier to read, maintain and debug, and helps to separate the functionality from the presentation.
N.B. you could use jQuery for any/all of this, but equally it's not really necessary, it doesn't really add much value in this situation.
var button = document.getElementById("upload-button");
button.addEventListener("click", function(event) {
var year = document.getElementById("year").value;
var grade = document.getElementById("grade").value;
var subject = document.getElementById("subject").value;
uploadFileIGCSE(year, grade, subject);
});
function uploadFileIGCSE(year, grade, subject) {
console.log(year, grade, subject);
}
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>

How to dynamically display a placeholder and deselect the other options, in a select form menu using Javascript/Jquery

I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});

Get text from closest selected dropdown option with class on button click

I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});
You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/
You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">

Change the placeholder when the select option is changed using jQuery

I have a site with the same form in different spots on the page. I would like to be able to have a placeholder in a text input change when I change the select option. I have a JSFiddle with a kinda example: http://jsfiddle.net/y1jhhqLz/
All the forms look like this:
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
And in this example, I would like to have the place holder change on the input with the id myInput, when I select the option Third.
I have tried many different ways to include the most recent attempt, which I put on the JSFiddle.
Any help would be greatly appreciated!
Set select onclick attribute to
onclick="changePlaceHolder(this,'#myInput1');"
and change javascript function to
function changePlaceHolder(dropdown, element) {
if (jQuery(dropdown).val() == "Third") {
jQuery(element).attr('placeholder', 'You did it correctly!');
} else {
jQuery(element).at}tr('placeholder', '');
}
}
in JSFiddle, you should set the loading behaviour to "no wrap - in head"
Done!
Add a change listener to the select, then get the value of the select and set the attribute placeholder to said value:
$('select').on('change',function(){
var place=$(this).val();
var num=$(this).attr('id').substring(8);
$('#myInput'+num).attr('placeholder',place);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Several things going on. First, remove the onClick events (we are not looking for when the select is clicked but rather when it is changed) and instead use jQuery's on method. Now changePlaceHolder has access to this which is the actual select box which was changed.
See below:
jQuery('select').on('change input', changePlaceHolder);
function changePlaceHolder() {
//I have to use jQuery instead of $ because it is on a wordpress site
if (jQuery(this).val() == "Third") {
jQuery(this).next().attr("placeholder","You did it correctly!");
} else {
jQuery(this).next().attr("placeholder"," ");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" >
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"/>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>
Other things to note: your <input> tags to not require an ending tag </input>, instead write them like this <input />. Note that the "/" ends the tag. You want to edit the input immediately following your select, in which case you can use jQuery(this).next() which will select the element immediately following the current this element.
For your specific case I would not touch source code, would define all functionality in script. Setting the onlick event inline is not a good idea, scripts should not go together with content.
I wrote this script having in mind that your select and input tags do not have to be siblings, the only condition is that both belong to same form:
/* This way you can use $ in your Wordpress */
(function ($) {
$('select').on('change', function(e) {
var thisSelect = $(this);
var thisSelectValue = thisSelect.val();
var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
if (thisSelectValue == 'Third') {
thisInput.attr("placeholder", "You did it correctly!");
} else {
thisInput.attr("placeholder", "");
}
});
}(jQuery));
p {
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
Please find the working code for you:
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript">
function changePlaceHolder(element,target) {
alert(element);
if ( element == "Third") {
jQuery(target).attr("placeholder","You did it correctly!");
} else {
jQuery(target).attr("placeholder","");
}
}
</script>
<br><br>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
<select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
<option value='-1'>Form 1</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput1" type="text" placeholder="Form 1"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form2">
<select id="mySelect2">
<option value='-2'>Form 2</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput2" type="text" placeholder="Form 2"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
<form id="form3">
<select id="mySelect3">
<option value='-3'>Form 3</option>
<option value='First'>First Choice</option>
<option value='Second'>Second Choice</option>
<option value='Third'>Third Choice</option>
</select>
<input id="myInput3" type="text" placeholder="Form 3"></input>
<input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>
</body>
</html>

Hide label when select item from list - javascript

How i can hide label when the user select item from list , i have this code to hide input text , but how i can hide the label for that input text?
<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex==8){this.myform['other'].style.visibility='visible'}else {this.myform['other'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<label>Other</label><input type="textbox" name="other" style="visibility:hidden;"/>
</td>
</table>
</form>
i want to hide <label>Other</label> how i can do that ?
DEMO
you can not match text or value of dropdown like this this.selectedIndex
change it to this.selectedIndex == 8 to match the index
give textbox id="other" to show or hide it.
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('other').style.visibility='visible'}else {document.getElementById('other').style.visibility='hidden'};">
Updated Demo
made new id for label l_other
<select name="one" onchange="if (this.selectedIndex== 8){document.getElementById('l_other').style.visibility='visible';
document.getElementById('other').style.visibility='visible'}else {document.getElementById('l_other').style.visibility='hidden';
document.getElementById('other').style.visibility='hidden'};">
Demo
Making use of single div with id other wrap label and textbox inside it
<select name="one" onchange="if (this.selectedIndex== 8){
document.getElementById('other').style.visibility='visible'}else{
document.getElementById('other').style.visibility='hidden'}">
Change your select tag and input text as below.
<select name="one" onchange="if (this.selectedIndex=='other'){document.getElementById("otherText").style.visibility='visible'}else {document.getElementById("otherText").style.visibility='hidden'};">
<div id="otherText" style="visibility:hidden;"><label>Other</label><input type="textbox" name="other" /></div>
Hope this helps.
function OnChange(that) {
var lblOther = document.getElementById('lblOther');
if (that.options[that.selectedIndex].text == 'Other') {
lblOther.style.display = "block";
}
else {
lblOther.style.display = "none";
};
}
<form name="myform">
<table>
<td>
<select name="one" onchange="OnChange(this);">
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="other">Other</option>
</select>
<label id="lblOther" style="display: block;">Other</label><input type="textbox" name="other" style="visibility: hidden;" />
</td>
</table>
</form>

Categories

Resources