for last few days I've been creating contact form for my website which might be professional and contain display:none/block and disabled:true/false areas. And I made it. But an hour ago I was informed that Chrome doesn't support "onclick" function so now I must change this all "onlick" stuff into "onchange".. but it doesn't seem clearly (still not working)...
ONCLICK works fine:
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
</script>
<select class="list" id="topic">
<option onclick="javascript:disableField()" selected="selected">Select Your topic</option>
<option onclick="javascript:enableField()">Topic 1</option>
<option onclick="javascript:enableField()">Topic 2</option>
<option onclick="javascript:disableField()">Topic 3</option>
<option onclick="javascript:disableField()">Topic 4</option>
</select>
ONCHANGE does NOT:
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
</script>
<select class="list" id="topic" onchange="javascript:this.value()">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
I just wanted to be "value" inserted as "X" in "javascript:X()" so this functions can work in way as it happened in "ONLICK" option.
I've been trying maaaany different ways but none of this works.
Please help.
Regards,
Mike
One way to do it
<select class="list" id="topic" onchange="window[this.value]()">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
But i would do it like this
<script language="javascript">
function enableField() { some function here }
function disableField() { some function here }
function handle(value){
if (value === 'enableField'){
enableField();
} else {
disableField();
}
}
</script>
<select class="list" id="topic" onchange="handle(this.value)">
<option value="disableField" selected="selected">Select Your topic</option>
<option value="enableField">Topic 1</option>
<option value="enableField">Topic 3</option>
<option value="disableField">Topic 3</option>
<option value="disableField">Topic 4</option>
</select>
Note: for event attributes like onclick, onchange etc, you do not have to say javascript:... it is implied..
this.value()
is a string; you can't call a string. What you want is to find the function in the global scope:
window[this.value]()
Also, it's better to store the functions in a dedicated object:
funcs = {
disableField: function(){...},
enableField: function(){...},
}
...
funcs[this.value]()
Related
I'm trying to use "addEventListener" instead of an inline "onchange".
Something is wrong with my approach. How do I use the "addEventListener" correctly?
https://jsfiddle.net/gdfe2ynL/1/
<select id="feedbackCategory" onchange="logvalue(this.value)">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<select id="feedbackCategory2">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<script>
function logvalue(value) {
console.log(value)
}
document.getElementById("feedbackCategory2").addEventListener("change", logvalue(this.value));
</script>
In the programmatic listener, the event comes through as event, the element is event.target and the value of that element is event.target.value. It's easier for this kind of thing to group the elements together with a common attribute, like class and then apply the listener to each one of them via querySelectorAll and a forEach loop
function logvalue(event) {
console.log(event.target.value + ' selected from the #' + event.target.id + ' element')
}
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".fbselect").forEach(el => el.addEventListener("change", logvalue))
})
<select class='fbselect' id="feedbackCategory">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<select class='fbselect' id="feedbackCategory2">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
Hey guys simple question how can I display in the second dropdown information that depends of the first one.
Example. I have this:
var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
option[j].disabled = true;
}
<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</option>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</option>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</option>
<select>
And I would like to display in dropdown 2 only the optgroup that has been selected in dropdown 1 ...
I really don't know about js so I hope that i explained it well and thanks in advance :)
But here I only disable all (and I want to disable only what's not selected in dropdown one) and I don't want to disable but I want to undisplay.
Loop through optgroup of second <select> and in loop check if value of first select is equal to label of optgroup remove disabled of it.
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.disabled = ele.label != val
});
};
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>
Also you should change display property of element if you want to show/hide optgroup
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.style.display = ele.label==val ? "block" : "none";
});
};
Also you can do this work simplify using jquery
$("#first_dropdown").change(function(e){
$("#second_dropdown optgroup").css("display", function(){
return this.label==e.target.value ? "block" : "none";
});
});
You can try the following way:
var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
var fValue = firstDD.value;
document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
if(el.label != fValue )
el.style.display='none';
else
el.style.display='block';
});
document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla 21</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>
I need to test select box values using javascript. But Its outputs the previous value on click, don't know what would be the case.
Here's my code:
$(document).ready(function(){
$('select').click(function(){
var id = this.id;
var text = $('#'+id+' :selected').text();
alert(text);
});
});
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
I gave the static id for testing purpose, but in real I want to take out the id from select box.
My question is, how can I get the exact value output(HTML) of options on click.
$(document).ready(function(){
alert($('#combo').val());
alert($('#combo option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="combo">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
<option value="6">Test 6</option>
<option value="7">Test 7</option>
</select>
You can use $('select').val(). This will give you the select field value. Listen for change event to capture the changes.
Here is the common and easy approach:
$("#combo").change(function(){
var selectedvalue = $( "#combo option:selected" ).text();
});
Suppose
<select class="csrSelect" id="queueSelect">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
and the css class 'csrSelect' has implemented heapbox on this select box. Now i want to call an onChange event like:
<select class="csrSelect" id="queueSelect" onChange="Changed()">
<option value="">Select Another Queue to Manage</option>
<option value="1">Store 1</option>
<option value="2">Store 2</option>
<option value="3">Store 3</option>
<option value="4">Store 4</option>
<option value="5">Store 5</option>
<option value="6">Store 6</option>
</select>
But it is not working.Please Help me.
You just need to use heapbox events.You should use heapbox onchange event in your purpose.
$(".mySelect").heapbox({
'onChange':function(){},
'openStart':function(){},
'openComplete':function(){},
'closeStart':function(){},
'closeComplete':function(){},
});
You can read documentation from http://www.bartos.me/heapbox/
Its working perfect..
Enjoy...
You can setup heapbox to trigger events of original elements this way:
$('select').heapbox({
"onChange":function(val, elm) {
elm.trigger('change');
}
});
Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>