I am looking to add text to a textbox with the selected text from the dropdown menu and place a ',' after.().
<select>
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
Now when you select the option 'is' the textbox gets updated with 'is,'. Now still on the same page you select 'This' the textbox gets updated with 'is, This,'. Reload the page and do it the other way around and you get 'This, is,'.
Hope you understand what I am trying to do here, the will contains values from the database so I cannot know what the values are exactly.
Thanks in advance.
I think something like this should work:
<select id="dropdownId">
<option value="1">This</option>
<option value="2">is</option>
<option value="3">test</option>
</select>
<input id="textboxId" type="text" />
<script type="text/javascript">
$('#dropdownId').on('change', function () {
$('#textboxId').val($('#textboxId').val() + $('#dropdownId option:selected').text() + ', ');
});
</script>
Fiddle
Related
I have a stange phenomenon where I'm stuck at the moment as I don't know where the error comes from.
My code is like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">0</option>
<option value="s">24</option>
<option value="d">25</option>
</datalist>
My problem is with displaying the datalist. If I click on the arrow I'm getting only the numbers like here:
After selecting for example '25' I'm getting the value 'd'. That is correct BUT I don't want to display the numbers. Instead I want to display the value of this datalist in this drop-down field.
If I do something like this:
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1">DUMMY1</option>
<option value="s">s</option>
<option value="d">d</option>
</datalist>
I'd naturally get the correct display, but I would like to add the ID, so that I can bind the click event with the ID of the selection and not the label.
You can make use of data attribute to find the id of option clicked from the list and keep value as labels,
see below code
$(function(){
$('#selectClassInput').on('change', function(e){
var val = $(this).val();
var id = $('#selectClass').find('option[value="' + val + '"]').data('id');
console.log(id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id="selectClassInput" name="selectClass" list="selectClass" type="text" >
<datalist id="selectClass">
<option value="DUMMY1" data-id="0">DUMMY1</option>
<option value="s" data-id="24">s</option>
<option value="d" data-id="25">d</option>
</datalist>
I have two dropdown boxes in a single form. How can I alert the values of both the dropdown boxes with onchange function on the second dropdown box without submitting the form.
<select name="abc1" id="abc1">
<option value="a">A</option>
<option value="B">B</option>
<option value="c">C</option>
</select>
<select name="abc2" id="abc2" onchange="getvalue()">
<option value="a">d</option>
<option value="e">E</option>
<option value="f">F</option>
</select>
Try
function getValue() {
alert(document.getElementById('abc1').value);
alert(document.getElementById('abc2').value);
}
You have to bypass the form submission by using jquery as shown below:
$('#yourFormId').submit(function(event){
event.preventDefault();
alert($('#abc1').val());
alert($('#abc2').val());
});
1- you should try to learn Javascript or Jquery to accomplish these sort of tasks.
2- you should search before asking new questions
these questions have the answers anyway :
Get selected value in dropdown list using JavaScript?
Get drop down value
Let's write under your html this script
<script>
document.getElementById('abc2').onchange = function () {
alert( 'First value: ' + document.getElementById('abc1').value + '\n' +
'Second value: ' + this.value );
}
</script>
<seelct id="country" multiple="multiple">
<option id="">USA</option>
<option id="">UK</option>
<option id="">CA</option>
<option id="">USA</option>
</select>
<div class="item-group"></div>
I need to drag the countries into this 'div'. Any help?
I guess what you want to do is append the values of the countries into the item-group div. This would do it:
var group = $('.item-group'); //let's query this once
$('option').each(function() {
group.append('<p>' + $(this).val() + '</p>');
});
Trying to figure out how I can produce text dynamically in a text box of a form using javascript.
I want to select a type of event from a dropdown list which I have made and on that selection a value be input in to the textbox of the form for eventprice.
So far this is what I have but I have no value being produced in the textbox any help appreciated.
function totalprice(){
if($('#type').val() == '3'){
$('#eventprice') == ("45");
}
}
<input type="text" disabled="" id="eventprice" onChange="totalprice();" name="eventprice" class="form-input" />
If you don't mind using jQuery, it is going to be a breeze: you'll simply need to add the data attribute price to every option. What this function does is:
Compares the value of all options to the value currently visible in the select box when the value is changed.
If the values are the same, copies the data-attribute to the other input.
Working demo: http://jsbin.com/acuyux/6/edit
The HTML
<select id="type">
<option data-price="25">Party</option>
<option data-price="35">Meeting</option>
<option data-price="45">Lounge</option>
</select>
<input type="text" id="eventprice" name="eventprice" disabled="" class="form-input" />
The JS
$('#type').change(function totalprice(){
$('option').each(function() {
if($(this).val() === $('#type').val()) {
$('#eventprice').val($(this).data('price'));
}
});
});
I would recommend using jQuery due to its efficient code.
HTML:
<input type="text" disabled id="eventprice" />
<select id="select">
<option data-cost="5">Event 1</option>
<option data-cost="10">Event 2</option>
</select>
jQuery:
$('#select').change(function () {
var str = $(this).find('option:selected').data('cost');
$('#eventprice').val(str);
});
// This code can be used to run it on load
// $('#select').trigger('change');
Code in action:
http://jsfiddle.net/LkaWn/
Hope this helps :)
Modify the 3rd/4th line of your code to be $('#eventprice').val("45"); as suggested, except that the suggestion had a syntax error.
I am trying to figure out a way to display a some text based on the drop down item selected by the user, in the "result" div below. I know how to do this with a normal input field but I am having trouble understanding how to pass in "option values" into the javascript function. This is what I tried so far...
In the code below, I am simply trying to successfully pass whatever drop down item value is selected into the javascript function and print out the name of that value in the "result" div... once I am able to do that, I will implement the 'tip' feature described above.
My Markup:
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
My JavaScript:
<script type="text/javascript">
function dropdownTip(value){
document.getElementByID("result").innerHTML = value;
}
</script>
Is this what you wanted? check the fiddle below
http://jsfiddle.net/b6ydm/
Try this:
<select onChange="dropdownTip()" id="select" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="fruit_search">fruits</option>
<option value="veggies_search">veggies</option>
<option value="animals_search">animals</option>
<option value="all_search">all</option>
</select>
<div id="result"></div>
<script type="text/javascript">
function dropdownTip(){
var value = document.getElementById('select').value;
document.getElementByID("result").innerHTML = value;
}
</script>