Automatically changing input values when selected a new element - javascript

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>

Related

Selecting item from a dropdown with javascript

Here is a dropdown menu of a website
<select name="ctl00$ddlWersjeJezykowe" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0)" id="ddlWersjeJezykowe" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
I want to change the language to English through browser console. I tried this on my console
document.getElementById("ddlWersjeJezykowe").value="2";
It only selects English but doesn't change the language. How can i change the language to English through my browser console?
Changing the value programmatically doesn't fire the onchange event, so you have to call setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0) too.
Alternatively, you can call document.getElementById("ddlWersjeJezykowe").onchange()
This is will get the selected value from select dropdown
<select id="language" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
function GetValue() {
var e = document.getElementById("language");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
<button type="button" onclick="GetValue()">Get Selected Value</button>
<div id="result"></div>

Jquery change multiple select buttons with a select button

I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/

jQuery fetch disabled select option value

<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">

How can I move a select element's values & text to another select element

I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}

Categories