I am curious if it possible to assign a tab character as value to an html dropdown list. This is my current markup:
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="Tab">Tab</option>
</select>
Where the value Tab is I would like that to be a tab character that I can eventually pass to JS.
There is a HTML entity for the Tab character, 	 or , use that:
document.getElementById("delimiter-select").onchange = function (e) {console.log(` Separator is ${e.target.value} separating`)}
<select id="delimiter-select" class="form-control form-control-sm csv-select">
<option value=",">Comma (,)</option>
<option value=";">Semi-Colon (;)</option>
<option value="|">Pipes (|)</option>
<option value="	">Tab</option>
</select>
Use as the tabulation HTML entity
console.log($('#input').val() + 'Test');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" value=" ">
Related
I want to create a form where if I choose a name from a selection.
The next input field will be autofilled.
It works with the value of the selected item, but I can't get it work with data tags.
Here is some simplified HTML:
<select class="select" id="test " name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
JavaScript (this works):
function myFunction(e) {
document.getElementById("myText").value = e.target.value;
}
JavaScript (this doesn't work):
function myFunction(e) {
document.getElementById("myText").value = e.target.options[event.target.selectedIndex].dataset.adr;
}
The second JavaScript example works, but only if I don't use the class="select" tag on the selection. So there must be something in the CSS that could interfere with the JavaScript part?
Is there another method to get the data tag from the selected item?
Pass in the select as the parameter, then do select.options[select.selectedIndex] to get the element. This limits the amount of code needed for the job. The rest is self explanatory.
function myFunction(e) {
document.getElementById("myText").value = e.options[e.selectedIndex].getAttribute("data-adr");
}
<select class="select" id="test " name="" onchange="myFunction(this)">
<option disabled selected>Choose Database Type</option>
<option data-adr="xyz" value="id1">Test name1</option>
<option data-adr="fsd" value="id2">Test name2</option>
<option data-adr="sss" value="id3">Test name3</option>
</select>
<input class="form-control" id="myText" type="text" value="-">
I have a series of select parts of a form, the javascript hides multiple possibilities for the following dropdown until the current drop down has a selection made, this determines which dropdown the user sees using the style="display:none;" attribute and javascript to switch it to block, .css({'display':'block'});.
The problem is that each <select> segment has the same name, e.g. <select class="form-control" name='phylum' id="sel1_1" style="display:none;"> this name='phylum' is used in the post phase of the form and needs to be associated with whichever dropdown list is used, but all of these have the default as 0 so if this is set it is overwritten by the final select in the list.
In javascript I therefore need to disable the html code, switching display:none; to display:block; has no effect as it is style only. Could I add disabled to all the <select> elements and somehow activate the required one?
Some example html and javascript snippets follow.
html
<div class='col-12 left'>
<div class='form-group'>
<label id="sel1_0" style="display:none;" for='uname'>Phylum/Division</label>
<select class="form-control" name='phylum' id="sel1_1" style="display:none;">
<option value="phylum" data-value="0">Choose</option>
<option value="Annelid" data-value="1">Annelid</option>
<option value="Arthropod" data-value="2">Arthropod</option>
<option value="Bryozoa" data-value="3">Bryozoa</option>
<option value="Chordata" data-value="4">Chordata</option>
<option value="Cnidaria" data-value="5">Cnidaria</option>
<option value="Echinoderm" data-value="6">Echinoderm</option>
<option value="Mollusc" data-value="7">Mollusc</option>
<option value="Nematode" data-value="8">Nematode</option>
<option value="Platyhelminthes" data-value="9">Platyhelminthes</option>
<option value="Rotifer" data-value="10">Rotifer</option>
<option value="Sponge" data-value="11">Sponge</option>
</select>
<select class="form-control" name='phylum' id="sel1_2" style="display:none;">
<option value="0" data-value="0">Choose</option>
<option value="1" data-value="1">C1</option>
<option value="2" data-value="2">D1</option>
</select>
</div>
</div>
javascript
$("#sel0").change(function() {
$('#sel1_1').css({'display':'block'});
The following doesn't seem to work
$('#sel1_1').css({'active'});
This question already has answers here:
jQuery selectors on custom data attributes using HTML5
(4 answers)
Closed 3 years ago.
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
</select>
<select class="form-control quantity" data-short-name="6">
</select>
</div>
In these given example, how am I supposed to get the value of the first select tag with the data-short-name of '8'?
I tried
$('#participant-detail .quantity').find("select[data-short-name='8']").val()
the '#participant-detail' is the id of the container(div) of those 2 select tags.
How to find or navigate to the specific tag and get its value?
Giving it an id is not advisable because those select tags were created from some conditions.
find() tries to find the select element inside $('#participant-detail .quantity') which itself is the element. Thus find() fails to target the element.
You do not need to use find(), you can specify the attribute selector as part of the main selector:
var val = $('#participant-detail select.quantity[data-short-name=8]').val();
console.log(val);
var val2 = $('#participant-detail select.quantity[data-short-name=6]').val();
console.log(val2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
<option value="1111">1111</option>
<option value="2222" selected>2222</option>
</select>
<select class="form-control quantity" data-short-name="6">
<option value="1111" selected>1111</option>
<option value="2222">2222</option>
</select>
</div>
use document.getElementById to select the div then querySelector to select the first child
let elem = document.getElementById('participant-detail').querySelector('select[data-short-name="8"]');
console.log(elem)
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
</select>
<select class="form-control quantity" data-short-name="6">
</select>
</div>
$('#participant-detail .quantity').find("select[data-short-name='8']") does not return any element as there is no child of #participant-detail .quantity selector with matching criteria select[data-short-name='8'].
You can try following approach to get the desired result.
console.log($('#participant-detail').find("select[data-short-name='8']").val());
console.log($('#participant-detail select.quantity[data-short-name="8"]').val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='participant-detail'>
<select class="form-control quantity" data-short-name="8">
<option value="a">A</option>
</select>
<select class="form-control quantity" data-short-name="6">
<option value="b">B</option>
</select>
</div>
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>
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..........
}