nothing happens with this script.
Any advice ?
I just want to make an action when an option is selected.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('#something').on('change', function() {
console.log("hello");
})
</script>
<form id="target" method="POST" >
<select id="something">
<option></option>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</form>
You misplaced the code. Check this :)
$(function() {
$('#something').on('change', function() {
alert(2);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="target" method="POST">
<select id="something">
<option></option>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</form>
Check this,
$('#something').on('change', function() {
console.log("hello");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="target" method="POST" >
<select id="something">
<option></option>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</form>
You have prepared wrong snippet. in script block it should be pure javascript and including js should be in html block. you have written in js block
This might help
$('select').on('change', function() {
alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<html>
<title>Test</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="target" method="POST" >
<select id="something">
<option></option>
<option>Value1</option>
<option>Value2</option>
<option>Value3</option>
</select>
</form>
</body>
<script>
$('#something').change(function() {
alert( "Handler for .change() called." );
});
</script>
</html>
Related
I keep getting this error in the below code on the last script line in my handlebars file "Javascript Error "Uncaught ReferenceError: selectMove is not defined"
Here is my update-pokemon.handlebars rendered from the console.
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script>selectMove(1);</script>
</body>
I think it may relate to the selectMove.js file that contains the selectMove function, which is below here
function selectMove(id) {
$("#move-selector").val(pokemonid);
}
Also here is my updatepokemon file
function updatePokemon(id) {
$.ajax({
url: '/pokemon/' + id,
type: 'PUT',
data: $('#update-pokemon').serialize(),
success: function(result) {
window.location.replace("./");
}
})
};
The first file is my handlebars file in my views directory, and the second is my selectMove.js located in the public directory.
EDIT - Here is my handlebars code
<h1> Update {{pokemon.pokemonname}}: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="{{pokemon.pokemonname}}"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="{{pokemon.evolutionlevel}}"><br>
Primary Move: <select name="movename" id="move-selector">
{{#each move}}
<option value="{{primarymoveid}}">{{primarymovename}}</option>
{{/each}}
</select><br>
</form>
<button onclick="updatePokemon({{pokemon.pokemonid}})">Update</button>
<script>$(function() {selectMove({{pokemon.movename}})});</script>
I think what's happening is your selectMove function from external JavaScript isn't loaded yet. Wrap the selectMove in $( document ).ready()
<script>$(function() { selectMove(1); });</script>
Try with it :
<html>
<head>
<title>Pokemon Database</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1> Update sadfasdf: </h1>
<form id="update-pokemon" action="/pokemon" method="post">
Pokemon Name: <input type="text" name="pokemonname" value="sadfasdf"><br>
Evolution Level: <input type="text" name="evolutionlevel" value="0"><br>
Primary Move: <select name="movename" id="move-selector">
<option value="1">Vine Whip</option>
<option value="2">Razor Leaf</option>
<option value="3">Solar Beam</option>
<option value="4">Ember</option>
<option value="5">Flame Burst</option>
<option value="6">Flamethrower</option>
<option value="7">Bubble</option>
<option value="8">Water Gun</option>
<option value="9">Hydro Pump</option>
<option value="10">String Shot</option>
</select><br>
</form>
<button onclick="updatePokemon(13)">Update</button>
<script src="https://maxcdn.bootstrapcdn.com/boostrap/3.3.7/js/bootstrap.min.js></script>
<script src="/static/selectMove.js"></script>
<script src="/static/updatepokemon.js"></script>
<script>selectMove(1);</script>
</body>
</html>
To better practice again, add document ready.
I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.
Javascript (inside head tag)
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
And this in body tag
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
......
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
I choose an option but I can't alert this option. I don't know what is the problem here.
You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.
$("#cd-dropdown").on("click", function() {
alert($(this).val());
});
<section class="main">
<div class="fleft">
<p><br />Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......
<div class="cont_btn">
<a data-type="submit" class="btn">send</a>
</div>
Your code shoud work, when you click the button the checkbox is already created, try the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
</script>
</head>
<body>
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>
When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:
<head>
<script>
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>
<!-- etc -->
<title>Your Title</title>
</head>
<body>
<section class="main">
<div class="fleft">
<p></br>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
......
<div class="cont_btn">
<a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>
I'm playing around with jQuery, and am having some trouble alerting a message on change of my select drop down element:
html:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<select id="fruits">
<option selected>Choose a fruit</option>
<option name="orange">Orange</option>
<option name="mango">Mango</option>
</select>
</div>
</body>
</html>
my js:
$('#fruits').on('change', function() {
alert('Hello!');
});
When I run this in Chrome, I don't get any warnings in my console, and changing the select option does nothing. Any idea what I'm doing wrong?
Put your code in document ready:
$(function () {
$('#fruits').on('change', function() {
alert('Hello!');
});
});
jsFiddle Demo.
try below code:
1.you must call js function or you can write code in ready function
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function(){
$('#fruits').on('change', function() {
alert('Hello!');
});
});
</script>
</head>
<body>
<div>
<select id="fruits">
<option selected>Choose a fruit</option>
<option name="orange">Orange</option>
<option name="mango">Mango</option>
</select>
</div>
</body>
</html>
you can try this too:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<select id="fruits">
<option selected>Choose a fruit</option>
<option name="orange">Orange</option>
<option name="mango">Mango</option>
</select>
</div>
<script>
$('#fruits').on('change', function() {
alert('Hello!');
});
</script>
</body>
</html>
I seem to get this null or not an object error over and over when I try to code in javascript. This is an simple example where I'm just trying to make a window pop up that displays the name of the option. How can I avoid getting this error when I'm coding?
The code returns this error in Internet Explorer:
Error: 'document.forms.0.questions' is null or not an object
<!DOCTYPE html>
<!-- HTML5 style -->
<head>
<title>Challenge Question</title>
<script type="text/javascript">
/* <![CDATA[ */
window.alert(document.forms[0].questions.pet.name);
/* ]]> */
</script>
</head>
<body>
<form action="get" >
<select name="questions">
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
</body>
</html>
The element must be added to the DOM first, then you can access it. Now you're trying to access an element that does not yet exist :
<!DOCTYPE html>
<html>
<head>
<title>Challenge Question</title>
</head>
<body>
<form action="get">
<select name="questions">
<!-- Element is added here -->
<option value="pet" name="pet">What is your pet's name?</option>
</select>
</form>
<script type="text/javascript">
/* and can be accessed here, after it's added */
console.log(document.forms[0].questions.options['pet']);
</script>
</body>
</html>
FIDDLE
I have tested the code. It works fine.
<script type="text/javascript">
function func1()
{
var index = document.getElementById("pet").selectedIndex;
var value = document.getElementById("pet").options[index].text;
alert(value);
}
<form action="get">
<select name="questions" id="pet" onchange="if (this.selectedIndex) func1();">
<!-- Element is added here -->
<option value="pet" name="pet" >What is your pet's name?</option>
<option value="pet" name="pet" >What is your pet's 1?</option>
</select>
</form>
I need a select form that will change the class of a div element. From the sample code below, how can I use JavaScript to change the class of div(myBox) depending on the selection.
<html>
<head>
<style type="text/css">
.red {background:#FF0000;color:#FFF}
.white {background:#FFF;color:#000}
.blue {background:#0000FF;color:#FFF}
</style>
</head>
<body>
<form id="myform" action="#">
<select id="bgcolor">
<option value="red">Red</option>
<option value="white">White</option>
<option value="blue">Blue</option>
</select>
</form>
<div id="myBox" class="red">This is myBox</div>
</body>
</html>
Handle the onchange event of the select element and change the class of the div:
document.getElementById('bgcolor').onchange = function(){
document.getElementById('myBox').className = this.value;
};