I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text
drop down html is :
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.
Thanks in advance
You could add hidden input field by default for other text :
<input type='text' id='other' name='other' style="display:none"/>
And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
Hope this helps.
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.
<input id="transportOptions" list="transport">
<datalist id="transport">
<option value="Car">
<option value="Bike">
<option value="Scooter">
<option value="Taxi">
<option value="Bus">
</datalist>
Related
How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
I have developed a site with multiple select elements in the same form
<select>
<option value="">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</select>
There are 8 selects with the exact same options on the page.
The user wants to copy and paste the selected values of a select from one to another.
The end user initiates it by using Ctrl+C, Ctrl+V. The web app was written to replace an excel app which allows copy and paste by the end user
However an html select doesn't support copy and paste. (Ctrl+C, Ctrl+V)
What can I do?
Any plugin that can maybe do this? Any minimal autocomplete select to suggest that looks like the standard select?
Edit:
Using the datalist example can be a solution. Only problem is that it allows invalid text i.e. text that is not one of the select options (apart from nothing) to be typed in. How do I only allow valid text?
See #Hashbrown answer in Copy selected item's text from select control html question. Sure it would help you as it's partially match your question.
Also you can take a look on How do I copy to the clipboard in JavaScript? as it has a lot of info related to your question.
Good Luck!
You should use datalist and handle none valid input as follow:
$('input[list]').on('change', function() {
var options = $('option', this.list).map(function() {
return this.value
}).get();
if (options.indexOf(this.value) === -1) {
this.value = "";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="food1" name="food1" placeholder="Select...">
<datalist id='food1'>
<option disabled>Select ...</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
<input list="food2" name="food2" placeholder="Select...">
<datalist id='food2'>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
<option value="Orange">Orange</option>
<option value="Pear">Pear</option>
</datalist>
Try using datalist
<input list="foods" name="food">
<datalist id='food'>
<option value="1">Select ...</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Carrot</option>
<option value="4">Orange</option>
<option value="5">Pear</option>
</datalist>
http://www.w3schools.com/tags/tag_datalist.asp
Set the "value" attribute of one select to that of another with
document.getElementById('[select element1]').value = document.getElementById('[select element2]').value;
You can put this in the onClick handler for a button if you want.
Try this code
var src=document.getElementById('src');
var des=document.getElementById("des");
var opt=document.createElement("Option");
opt.value = src.options[src.selectedIndex].value;
opt.text = src.options[src.selectedIndex].text;
des.options.add(opt);
See the datalist element: http://www.w3schools.com/tags/tag_datalist.asp
It is used like this:
<input list="browsers" name="browserselect" type="text"/>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
The list attribute of the input element tells the input element to use the datalist with that id.
<select name="a" id="a">
<option value="1">abc</option>
</select>
<select name="b" id="b">
<option value=""></option>
</select>
<script type="text/javascript">
$('select#a').on('change',function(){
var v = $(this).val();
$('select#b').val(v);
});
</script>
HTML :
<select type="text" class="que_ans" name="answer[12]" id="answer_12" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans" name="answer[13]" id="answer_13" size="1">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
How to validate the drop down list using array name answer[12] ?
Add class and title attributes on your dropdown element like:
<select type="text" class="que_ans required" name="answer[12]" id="answer_12" size="1" title="This is required field" >
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
<select type="text" class="que_ans required" name="answer[13]" id="answer_13" size="1" title="This is required field">
<option value="0" selected> -- Select Response -- </option>
<option value="1">Not Satisfied</option>
<option value="2">Somewhat Satisfied</option>
</select>
And add following script at the end of your page
<script>
$('select.required').each(function () {
var message = $(this).attr('title');
if($(this).val() == '' || $(this).val() == 0) {
alert(message);
$(this).focus();
breakout = true;
return false;
}
}
});
</script>
I hope, it will fulfill your requirement.
you could use attribute selector $(select[name="answer[12]"]) for specific ones
or more generic $(select[name]) to select all <select> with name attribute.
also val() method can be used for the getting the selected item.
eg: $(select[name="answer[12]"]).val()
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
Here option Test Two is selected and disabled. The below code fetches select value when dropdown is enabled and value is changed.
//pass value to hidden input
$('#test_me').change(function () {
var id = $(this).val();
$('input#test_hidden').val(id);
})
How can I pass selected option value i.e. 2 to my hidden input, when dropdown is disabled and value is selected ?
This issue is reported at http://bugs.jquery.com/ticket/13097 and marked as wont fix. for reason:
The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency.
Alternative for this would be to use selectedindex property of select to target option by index:
$("#test_me option").eq($("#test_me").prop("selectedIndex")).val();
Complete Snippet:
var id = $("#test_me option").eq($("#test_me").prop("selectedIndex")).val();;
$('input#test_hidden').val(id);
<script type="text/javascript">
//pass value to hidden input
$(document).ready(function(e) {
var sel = $("#test_me").val();
$("#test_hidden").val(sel);
});
</script>
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
I have combo boxes with same name and ID. I want to focus first combo box.
How can I do this?
document.getElementById('test').focus();
This is the javascript code I was given to set the focus on the combo box but nothing happens.
I have a combo box like:
<select name="test" id="test">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="test" id="test">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
In my page I have the combo boxes like this with same name and ID.
Now I want to set focus to the first combo box .How can I do this using JavaScript?
You can't have mulitple elements with the same id!
try this:
HTML:
<select name="first" id="first">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="second" id="second">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
JavaScript:
document.getElementById('first').focus();
move select focus on the top row of function, before call all elements. example
function myfunc()
{
document.getElementById('myselect').focus();
document..........
}