I'm learning Javascript, and here's what I'm trying to do...
<body>
<select name="selTitle" id="titles">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
</select>
</body>
and for the script,
<script type='text/javascript'>
var title = document.getElementById("titles");
title.onchange = function() {
alert("Hi");
}
</script>
But its not working, am I doing something wrong? Here's the demo.. http://jsfiddle.net/jq9UA/10/
Wrap your code in onload event:
window.onload = function(){
var titles = document.getElementById("titles");
titles.onchange = function() {
alert("Hi");
}
};
Working Demo
This makes sure that select box is actually available to apply events to which you can do using onload event or puting your script at bottom of your page just before </body> tag.
its working fine.
just change the options like this:
Related
jQuery(document).ready(function($){
$('#location').change(function(){
let selected_option = $(this).find(":selected").val();
$('#locationHeading').text(selected_option)
})
});
instead of waiting for a change on the #location which is a <select> I want to soon as the page loads do that function.
the reason being the selected option will already be selected once the page loads.
any help would be appreciated.
thanks
you can use .trigger()
jQuery(document).ready(function($){
$('#location').change(function(){
let selected_option = $(this).find(":selected").val();
$('#locationHeading').text(selected_option)
}).trigger('change') // <== add this
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="locationHeading"></h1>
<select id="location">
<option value="A">A</option>
<option value="B">B</option>
</select>
Put the change handler in a separate function, and call it in addition to adding the listener:
jQuery(function ($) {
const loc = $('#location');
const handler = () => {
let selected_option = loc.find(":selected").val();
$('#locationHeading').text(selected_option)
};
loc.on('change', handler);
handler();
});
I have the following function:
$('#borderColor').on('change', function() {
// update inventory
updateInventory(this.options[this.selectedIndex].text);
});
How can I automaticcally trigger this function when the page loads?
Just trigger the change event on the select on page load. This way you don't need to write duplicate code, and everything is handled at one place.
with $('#selector').trigger() you can trigger any event, like change, click, input, etc... you're listening to.
With $(document).ready(function() { /** your code here **/}) you can set code you wish to run after the page has finished loading and rendering.
function updateInventory(value) {
$('#inventory').text(value);
}
$('#borderColor').on('change', function() {
// update inventory
updateInventory(this.options[this.selectedIndex].text);
});
$(document).ready(function() {
$('#borderColor').trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="borderColor">
<option value="red">red</option>
<option value="blue" selected="selected">blue</option>
</select>
<div id="inventory">
</div>
Did you heard the jquery trigger?
$(function() {
$('#borderColor').trigger('change')
});
I put selected="selected" for mail option. When the page is rendered, it should call the setImage function and display the image. But it is not happening, why?
JSFiddle
function setImage(select){
var image = document.getElementsByName("image-swap")[0];
image.src = select.options[select.selectedIndex].value;
}
<select name="kitchen_color" id="kitchen_color" onchange="setImage(this);">
<option value="https://www.google.ru/images/srpr/logo4w.png">Google</option>
<option value="http://yandex.st/www/1.645/yaru/i/logo.png">Yandex</option>
<option value="http://limg.imgsmail.ru/s/images/logo/logo.v2.png" selected="selected">Mail</option>
</select><br />
<img src="" name="image-swap" />
The answer is NO, the event you listen to is 'CHANGE' and there is no change since the page is loaded.
So, you will need to 'trigger' change event by yourself.
See example how to get what you want:
window.onload = function(){
var kitchen_color = document.getElementById('kitchen_color');
kitchen_color.onchange();
};
Or if you use jQuery:
$(document).ready(function(){
$('#kitchen_color').trigger('change');
});
http://jsfiddle.net/z2y24thk/
try this one after function declaration
$(document).ready(function(){
$('#kitchen_color').trigger('change');
});
here is updated jsfiddle
http://jsfiddle.net/NWbsj/76/
check change in drop down list every time a button is clicked and my button is an image
Code:
<select id="dropdown_name">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<img src="images.jpg" class="btn"/>
<script language="javascript">
var com;
$('#dropdown_name').change(){
com=$(this).val();
}
$('.btn').click(function(){
alert(com);
//code
}
</script>
you have lots of error in you code...
<script language="javascript">
var com;
$('#dropdown_name').change(function(){ //missing function here
com=$(this).val();
}) //<---missing bracket here;
$('.btn').click(function(){
alert(com);
//code
}); //<-- missing bracet here
</script>
from whatever i understood i assum you need this..
try this
$(function(){
$('.btn').click(function(){
alert($('#dropdown_name').val());
});
});
your script is not valid .. Supposed to look like this
Also there is a typo in the click event .. comp is supposed to be com
var com;
$('#dropdown_name').change(function () {
com = $(this).val();
}).change();
$('.btn').click(function () {
alert(com);
//code
});
Working fiddle
I'm not sure what your question is . But i am guessing you are trying to
to bind the change event on click of the image . If that is the case , this will help.
$('.btn').click(function () {
$('#dropdown_name').change(function () {
alert("changed to : "+ $(this).val());
});
});
Now the change event binded to dropdown_name only after click the event , if the image/.btn is not click you will not get any alert while changing the select
Working Fiddle
I have a form that has many select menus, most of them are Yes/No and depending on the selected option, I display/hide some advanced options. One of the select menus is the following:
<td><%= f.select :CBIAvailable, ['Yes' , 'No'],{}, {:id=>"cbi_available_id", :class=>"cbi_available_class", :onChange=>"showHideOptions('cbi_available_id','cbi_options_id')", :onLoad=>"showHideOptions('cbi_available_id','cbi_options_id')"} %></td>
When I change from 'Yes' to 'No' or the opposite, showHideOptions javascript functions is called properly, but I can't have that function to be called when I reload the form.
Anyone can tell me what am I dong wrong?
Thanks
UPDATE
<script language="javascript" type="text/javascript">
function showHideOptions(selectorId,optionsId) {
if (document.getElementById) {
var selector = document.getElementById(selectorId);
var options = document.getElementById(optionsId);
if (selector.value == 'Yes') {
options.style.display = 'block';
return false;
} else {
options.style.display = 'none';
return false;
}
}
window.onLoad = showHideOptions('cbi_available_id','cbi_options_id');
function yourFunction(){
//get that select element and evaluate value
//do you change stuff here
}
window.onload = yourFunction; //this gets fired on load
//"select" is your element,
//fetched by methods like document.getElementById();
select.onchange = yourFunction; //this gets fired on change
//you can also use attachEvent (IE) or addEventListener (Others)
here's a working demo:
<select id="testSelect">
<option value="yes">YES</option>
<option value="no">NO</option>
</select>
function getOption() {
alert('foo');
}
var select = document.getElementById('testSelect');
select.onchange = getOption;
window.onload = getOption;
This could happen when you receive postback from your remote server and your response doesn't have <script type="javascript">... yourfunction()...</script>.
Each time you get new response you should send script and exacute it or append to your html element approciate event handler.
Another solution is to use jQuery and use .live() event. This event attach dynamically behaviour to your html. I strongly recommend you to use jQuery with live because this library is one of most used libraries in production environment.
Edit
<script type="text/javascript" src="path_to_jquery.js"></script>
<script type="text/javascript">
function showHideOptions(id1,id2){
//Your code
}
$(document).ready(function() {
//This function waits for DOM load
//execute your function for first time
showHideOptions('cbi_available_id','cbi_options_id');
//This selector you have to modify or show us generated html to
// choose the best selector for this purpose
$('.cbi_available_class').live('change',function(){
//This will fire change event of html class="cbi_available_class"
showHideOptions('cbi_available_id','cbi_options_id');
});
});
</script>