Could someone tell me why this is not working?
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = initPage;
function initPage() {
document.getElementById("member_type_academic_4").onChange=alert("It's Working");
}
</script>
</head>
<body>
<form>
<label for="member_type_academic_4">test</label>
<select name="member_type_academic_4" id="member_type_academic_4">
<option value="0" selected>Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</form>
</body>
</html>
It will fire the alert box when the window loads, but not when there is a change on the select box. I know it's something simple that I'm missing. Thanks!
That is because the onchange event handler is assigned the return value of the method call to alert. This ends up being undefined, however, calling alert will send the message to the screen. Instead you should use a function to assign to the event handler
function initPage() {
document.getElementById("member_type_academic_4").onchange = function(){
alert("It's Working");
};
}
Why not execute the function when there is actually a change in the select element?
<select name="member_type_academic_4" onchange="initPage()"
id="member_type_academic_4">
<option value="0" selected>Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
Then change the Function to this one:
function initPage() {
alert("It's Working");
}
First: "onChange" -> "onchange"
Next, wrap the alert function in a wrapper, otherwise it will just execute as soon as it is encountered in the code.
document.getElementById("member_type_academic_4").onchange=function(){alert("It's Working")};
A jsFiddle for you
Related
I have the following HTML
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
and I need to fire up a Javascript callback when any of the options is selected.
I have the following piece of Javascript:
$(function() {
$(document).on("EVENT", "[data-behavior~=toggle-visibility]", function() {
...
});
});
Is there an event I can use to achieve my goal?
PS - I understand I could move data-behavior="toggle-visibility" to the select tag and then listen for change and get the currently selected value. However, since that piece of Javascript is already used with other elements, I need to keep the data-behavior attribute on the options.
It should work here https://jsfiddle.net/xpvt214o/535895/
You should be using on change event instead:
The example is as follows:
$("select").on("change", function(e) {
var sel = $(this).find(":selected");
var attr = sel.attr("data-behavior");
console.log(attr + "....." + $(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
Html Code:
<select id="maker-list">
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
JavaScript code:
$('#maker-list').off('change').on('change', e => {
selectedValue = $('#maker-list').val();
// Here you can call another function with selectedValue
});
In above JavaScript Code, we bind change even and unbind the same event after selecting value so that it will not fire twice. jquery help
I hope this will work ... happy coding :)
$("select").on("change", (e) => {
console.log(e.target.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
Here is the simple code which I am trying on js fiddle:
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
$(function () {
$(document).on('click', '.pid', function () {
alert('here');
});
});
Click on http://jsfiddle.net/QRVSw/16/
The click event applies to the whole select element, not to the individual options. Also it's better to use the change event which triggers after making a selection, in contrast to the click event, which triggers as soon as you click.
In addition, you don't need to wrap your code to prepare it for OnReady. With this on call, you bind the event to the document, which is already available, even if the select object itself isn't yet.
So, your code could be simplified (and made working) like this:
$(document).on('change', '#test', function () {
alert('here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
You could try to make use of the onchange event for select elements:
$(function () {
$(document).on('change', '#test', function () {
alert('here');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test">
<option value="">select</option>
<option class="pid">1</option>
<option class="pid">2</option>
<option class="pid">3</option>
<option class="pid">4</option>
</select>
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
I'm using this code for a drop down function in a table, and it's working great. However, when I try to use it more than once on the same page, One is corrupting the information of the other. I've tried changing the id settings but it didn't work. What do I need to do to so I can use this multiple time on a singe page. I'm using Wordpress and placing the script in the header.
<script language="JavaScript" type="text/javascript">
<!--
function openPop(){
var Sel_Ind = document.getElementById('myURLs').selectedIndex;
var popUrl = document.getElementById('myURLs').options[Sel_Ind].value;
winpops=window.open(popUrl,"","width=400,height=338,resizable,")
}
//-->
</script>
</head>
<body>
<select id="myURLs" onChange="javascript:openPop();">
<option value="">Select a page...</option>
<option value="http://news.bbc.co.uk">News</option>
<option value="http://www.the-company.com">Music</option>
<option value="http://www.b3ta.com">Laughs</option>
<option value="http://www.google.com">Search</option>
<option value="http://www.sitepoint.com/forums">Help</option>
</select>
I think that's because you have hardcoded ids inside the onChange handler. Instead, what you can do is to pass the select element of which the onChange event fires into the handler function and use that to further processing.
<select id="myURLs1" onChange="openPop(this)">
<option value="">Select a page...</option>
<option value="http://news.bbc.co.uk">News</option>
<option value="http://www.the-company.com">Music</option>
<option value="http://www.b3ta.com">Laughs</option>
<option value="http://www.google.com">Search</option>
<option value="http://www.sitepoint.com/forums">Help</option>
</select>
<select id="myURLs2" onChange="openPop(this)">
<option value="">Select a page...</option>
<option value="http://news.bbc.co.uk">News</option>
<option value="http://www.the-company.com">Music</option>
<option value="http://www.b3ta.com">Laughs</option>
<option value="http://www.google.com">Search</option>
<option value="http://www.sitepoint.com/forums">Help</option>
</select>
Then in the handler function accept the select box into a parameter.
function openPop(sel){
var popUrl = sel.options[sel.selectedIndex].value;
winpops=window.open(popUrl,"","width=400,height=338,resizable,")
};
This way, you can have as many as select boxes you want and handler will behave correctly.
Check this fiddle for this implementation.
http://jsfiddle.net/BuddhiP/awc6o9ju/
I want menu to be in select control, like this
<form id="go">
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
<option value="">Select option</option>
<option onclick="openChangePassword()">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
This is changing url not a problem, but i have problem with some option because values are calling function, onclick="openChangePassword() and it is not working this way, any solution.
On some option i need url redirect on other i need function call?
As A. Wolff points out in his comment, you should add an event listener to the <select> element instead. Like this:
<form id="go">
<select name="URL">
<option value="">Select option</option>
<option value="openChangePassword">Change password</option>
<option value="www.editpersonaldata.com">Edit personal data</option>
<option value="www.dashboard.com">Dashboard</option>
</select>
</form>
<script>
document.querySelector('select[name="URL"]').addEventListener('change', function(e){
var selection = this.options[this.selectedIndex].value;
if(selection == 'openChangePassword'){
openChangePassword();
} else {
window.location.href = selection;
}
});
</script>
Notice that I only use the value attribute of <option> and then decide what to do in the listener callback function.