Show textarea if selected item in listbox changes - javascript

I have a listbox, and I want to show a textarea if I have a selected item, it is so simple, but my code isn't working, can any one help me?
Listbox code :
<select onchange="change(this)" name="idUser" class="form-control">
<c:forEach items= '${listeU}' var='p' >
<option value="${p.getIdUser()}"> ${p.getIdUser()} - ${p.getNom()} ${p.getPrenom()}</option>
</c:forEach>
</select>
JS :
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.show();
}
else{
textarea.style.display = "none";
}
}
Item to show :
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>

show() is a jQuery and you're using pure JS so you should replace it by :
textarea.style.display = "block";
Hope this helps.
function change(obj) {
var selectBox = obj;
var selected = selectBox.options[selectBox.selectedIndex].value;
var textarea = document.getElementById("text_area");
if(selected === '1'){
textarea.style.display = "none";
}
else{
textarea.style.display = "block";
}
}
<select onchange="change(this)" name="idUser" class="form-control">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
<textarea id="text_area" type="text" name="text_area" style="display: none"></textarea>

Related

How to show a form field (input type="text") when i click on a <select> item

How to show the form field (input type) in the when I clicked "7th" from the select menu.
your html code should be like
<select id="select">
<option value="6th">6Th</option>
<option value="7th">7Th</option>
</select>
<input type="text" id="textbox" name="textbox"/>
and by using jQuery show textbox like
$( document ).ready(function() {
$('#textbox').hide();
});
$('select').on('change', function() {
if(this.value == '7th'){
$('#textbox').show();
}
});
if you do not want to rely on jquery this is a javascript example.
<head>
<script>
window.onload = function(){
var dropdown = document.getElementById("example");
var textbox = document.getElementById("textbox");
dropdown.addEventListener("change", function() {
if(dropdown.value == 7){
textbox.style.display = "block";
}else{
textbox.style.display = "none";
}
});
}
</script>
</head>
<body>
<select id="example">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="7"> 7 </option>
</select>
<input id="textbox" type="text" style="display:none;">
</body>

showing different textboxes on same page according to the selection of values from dropdownlist using javascript?

I have a page with dropdownbox with 2 values,and if I select one value I should get three textboxes and if I SELECT OTHER VALUE i Should get different textbox.how to do this by using javascript?
Please help me ...
Regards,
Dhanya Raj
function select_value(valueSelect)
{
if(valueSelect){
value1 = document.getElementById("one").value;
value2 = document.getElementById("two").value;
if(value1 == valueSelect.value){
document.getElementById("three_text_boxes").style.display = "block";
document.getElementById("one_text_box").style.display = "none";
}
else if(value2 == valueSelect.value) {
document.getElementById("one_text_box").style.display = "block";
document.getElementById("three_text_boxes").style.display = "none";
}
}
else{
return false;
}
}
#three_text_boxes , #one_text_box{
display:none;
}
<select onchange="select_value(this);">
<option id="zero" value="0">None</option>
<option id ="one" value="1">one</option>
<option id="two" value="2">two</option>
</select>
<div id="three_text_boxes" >
<input type="text">
<input type="text">
<input type="text">
</div>
<div id="one_text_box" >
<input type="text">
</div>
Is this the same that you are looking for?
Hope this helps.

How to get options element by id and output text

Could someone help me with this little javascript. I want the rersult to show in NA only when option value 2 is selected. I want 11" to show will show. Need a simple script to output custom text based on value text. I do know i have value="2" listed twice. I cannot use the value field.
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if(document.getElementById("test").value == "11") {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
You can check the text of the option like
function myFunction() {
var el = document.getElementById("sizing-change");
if (el.options[el.selectedIndex].text.trim() == '11"') {
document.getElementById("finalsize").innerHTML = "Size: 11";
} else {
document.getElementById("finalsize").innerHTML = "NA";
}
}
<select id="sizing-change" onchange="myFunction()">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>
If you can alter the value field of option to different values(which you should) then you can try this:
<select id="sizing-change" onchange="myFunction()">
<option value="12">12</option>
<option value="11" id="test">11</option>
</select>
<div class="sizefinal">Suggested Size: <span id="finalsize">NA</span>
</div>
<script>
function myFunction() {
if (document.getElementById("sizing-change").value == 11) {
document.getElementById("finalsize").innerHTML = "Size: 11";
}
}
</script>
Demo: http://jsfiddle.net/GCu2D/784/
var finalsize = document.querySelector('#finalsize');
var sizingChange = document.querySelector('#sizing-change')
var testOption = sizingChange.querySelector('#test');
myFunction(sizingChange);
function myFunction(element) {
var checked = element.querySelector(':checked');
if (checked == testOption) {
finalsize.innerHTML = "Size: " + element.querySelector(':checked').text;
} else {
finalsize.innerHTML = 'NA';
}
}
<select id="sizing-change" onchange="myFunction(this)">
<option value="2">12"</option>
<option value="2" id="test">11"</option>
</select>
<div class="sizefinal">
Suggested Size: <span id="finalsize">NA</span>
</div>

dropdown option and action

I have a drop down and inside that i have options. On clicking the option it must display fields respectively.
Like for
option1 == one text box
option2 == two text box and so on...
<select id="dropdown">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..
If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.
Demo
Html:
<select id="dropdown">
<option value="A" data-number="1">option1</option>
<option value="B" data-number="2">option2</option>
<option value="C" data-number="3">option3</option>
<option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>
Javascript:
$('#dropdown').change(function(){
$('#textBoxContainer').empty();
var number = $(this).find('option:selected').attr('data-number');
for (var i = 0; i < number; i++){
$('#textBoxContainer').append('<input type="text"/>');
}
});
<select id="dropdown" onChange="showHide()">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
function showHide()
{
hideAll();
var val = document.getElementById("dropdown").value;
if(val == "A")
document.getElementById("firstTextBoxId").style.display = 'block';
else if(val == "B")
document.getElementById("secondTextBoxId").style.display = 'block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'block';
}
function hideAll()
{
document.getElementById("firstTextBoxId").style.display = 'none';
document.getElementById("secondTextBoxId").style.display = 'none';
document.getElementById("thirdTextBoxId").style.display = 'none';
document.getElementById("fourthTextBoxId").style.display = 'none';
}

Javascript - getElementById and help me

<script type="text/javascript">
function myfunction() {
if (document.getElementById('myform').value == "yes") {
document.getElementById('yesinput').style.display = '';
} else {
document.getElementById('yesinput').style.display = 'none';
}
}
</script>
<select name="myform" id="myform" onchange="myfunction()">
<option selected="selected">please select</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="yesinput" style="display:none">
<input name="input" type="text" />
</div>
<div id="noinput" style="display:none">
<input name="input" type="text" />
</div>
Help ya. How to make if we select No will have another input field below the id="noinput".
Now it's working if we select Yes. let me know
function myfunction() {
if (document.getElementById('myform').selectedIndex == 0) {
document.getElementById('noinput').style.display = 'none';
document.getElementById('yesinput').style.display = 'inline';
} else {
document.getElementById('noinput').style.display = 'inline';
document.getElementById('yesinput').style.display = 'none';
}
}
You can construct a new Element and append it to the DOM via Javascript. An example:
var newInput = document.createElement("input");
newInput.setAttribute("id", "newElement");
newInput.setAttribute("type", "text");
document.body.appendChild(newInput);

Categories