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>
Related
I would like a link to select a specific option of a select statement without having to select it first. Just to be clear, I am not trying to have one button/link trigger whichever option has been selected before, I want multiple links trigger one select option each as an alternative to using the drop-down itself.
If we take the following code e.g., how would I trigger the "away" option by this link?
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away">
<img src="http://via.placeholder.com/100x100">
</a>
You should listen for a click on the #away element and change the value of the select field accordingly. Something like this:
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
Here is a working example
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
.wrap > .icon:last-of-type{
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", "#away", function(){
$("select").val("away").change();
});
});
</script>
</head>
<body>
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option value="home">Home</option>
<option value="away">Away</option>
</select>
</div>
<a href="#away" id="away">
<img src="http://via.placeholder.com/100x100">
</a>
</body>
</html>
You can use this handleSelect method on multiple link with proper option value.
function handleSelect(option) {
var optionElm = document.getElementById(option);
if(optionElm) {
optionElm.selected = !optionElm.selected;
}
}
<div class="collection-sort">
<label></label>
<select>
<option>Select</option>
<option id="home" value="home">Home</option>
<option id="away" value="away">Away</option>
</select>
</div>
<a href="#away" onclick=handleSelect("away")>
<img src="http://via.placeholder.com/100x100">
</a>
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>
I have this script currently, which does everything I now want it to do. It has a drop down, you select goTo, and you can choose Wikipedia or a list of other websites. From there it will change the value of the iFrame that is currently there (Microsoft for example) to a different website (Wikipedia for example).
However my issue is that upon changing options, it closes the connection and displays a blank page until I choose Wikipedia. How can I resolve this? This is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.10"></script>
<script>
function goToPage763(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].getAttribute('href') != "none"
)
{
//this is the key code in the JavaScript to open the new page in
//the iframe:-
frames['iframe2'].location.href = mySelect.options[PageIndex2].getAttribute('href');
}
}
}
// Add your javascript here
$(function(){
$("#size").chained("#color");
});
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="color">
<option value="">choose options</option>
<option value="27">Goto</option>
<option value="26">Nothing</option>
</select>
<select class="form-control" id="size" name="select763" size="1" onchange="goToPage763(this.form.select763)">
<option value="">choose options</option>
<option value="27" class="27" href="http://www.wikipedia.com">Wiki</option>
<option value="26" class="26">Nothing</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top" height="800px" width="95%" align="middle">
</body>
</html>
See if this will solve your problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"
data-semver="2.0.3" data-require="jquery"></script>
<script>
function goToPage763(mySelect){
frames['iframe2'].location.href = $(mySelect).val();
}
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="size" name="select763"
size="1" onchange="goToPage763(this)">
<option value="">choose options</option>
<option value="http://www.wikipedia.com">Wiki</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="https://www.wiktionary.org/">Wiktionary</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top"
height="800px" width="95%" align="middle">
</body>
</html>
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>
The second Select element cannot display the countries dynamically, I have follow the tutorial exactly but wonder why it simply won't work?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<script type="text/javascript">
var citieslist=document.classic.subj2
var cities=new Array()
cities[0]=""
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]
function updateSubj(selectedcitygroup){
citieslist.options.length=0
if (selectedcitygroup>0){
for (i=0; i<cities[selectedcitygroup].length; i++)
citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
}
}
</script>
<div id="template">
<div id="links">
<li>Home</li>
<li>Contact Us</li>
<li>Request</li>
<li>Cloud</li>
<li>Pricing</li>
</div>
<img id="tta" src="tta/tta.png"></img>
<div id="picture"></div>
<div id="search">
<img id="tta" src="tta/search.jpg"></img>
<form name="classic">
<p>LEVEL</p>
<select onChange="updateSubj(this.selectedIndex)">
<option>Select A City</option>
<option>USA</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
<p>SUBJECT</p>
<select name="subj2"></select>
<p>TYPE</p>
<select name="sasd"></select>
</form>
</div>
<div id="gradient_bg"></div>
<?php
echo "ssssss";
?>
</div>
</body>
</html>
While this tutorial work.
<form name="classic">
<select onChange="updateSubj(this.selectedIndex)">
<option>Select A City</option>
<option>USA</option>
</select>
<select name="subj"></select>
</form>
<script type="text/javascript">
var clist=document.classic.subj
var cities2=new Array()
cities2[0]=""
cities2[1]=["New York|newyorkvalue"]
cities2[2]=["Vancouver|vancouvervalue"]
function updateSubj(ssg){
clist.options.length=0
if (ssg>0){
for (i=0; i<cities2[ssg].length; i++)
clist.options[clist.options.length]=new Option(cities2[ssg][i].split("|")[0], cities2[ssg][i].split("|")[1])
}
}
</script>
var citieslist=document.classic.subj2 is declared before the element exists, it's also a lot better to do the following instead.
var citiesList = document.getElementById( "subj2" );
And make sure that the script runs once your needed HTML elements are available. An easy (and just best) way to do this is to include all javascript at the bottom of your document before the </body> tag.
Here is a modified version. Note that I do not need to save the select before the script runs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
var cities=new Array()
cities[0]=[];
cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]
function updateSubj(countrySel){
var selectedcitygroup = countrySel.selectedIndex;
var citieslist = countrySel.form.citieslist;
citieslist.options.length=0;
if (selectedcitygroup>0){
for (var i=0; i<cities[selectedcitygroup].length; i++) {
var parts = cities[selectedcitygroup][i].split("|");
citieslist.options[citieslist.options.length]=new Option(parts[0], parts[1])
}
}
}
</script>
</head>
<body>
<div id="template">
<div id="links">
<li>Home</li>
<li>Contact Us</li>
<li>Request</li>
<li>Cloud</li>
<li>Pricing</li>
</div>
<img id="tta" src="tta/tta.png"></img>
<div id="picture"></div>
<div id="search">
<img id="tta" src="tta/search.jpg"></img>
<form name="classic">
<p>LEVEL</p>
<select name="country" onChange="updateSubj(this)">
<option>Select a country</option>
<option>USA</option>
<option>Canada</option>
<option>United Kingdom</option>
</select>
<p>SUBJECT</p>
<select name="citieslist"></select>
<p>TYPE</p>
<select name="sasd"></select>
</form>
</div>
<div id="gradient_bg"></div>
<?php
echo "ssssss";
?>
</div>
</body>