I've tried multiple variations of importing jQuery, but nothing is working. When I run it, everything in the body shows up, but the jQuery function doesn't work.
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$('select').on('change',function(){
var value=$(this).val();
var output='';
for(var i=1;i<=value;i++)
{
output+='<div>Your Text</div>';
}
$('#test').empty().append(output);
});
});
</script>
</head>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
<span id="test">
</span>
</body>
</html>
What can I do to fix it?
Here are the errors I'm getting in my console:
The resource from
“https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.mi%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9n.js”
was blocked due to MIME type mismatch (X-Content-Type-Options:
nosniff). testy.html
ReferenceError: $ is not defined[Learn More]
The character encoding of the HTML document was not declared. The
document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document or
in the transfer protocol.
Do below steps:-
Copy the jquery library code (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js) code and save it with the same name in your current working directory (jquery.min.js):-
Now use this code:-
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding"><!-- this is for removing character encoding error-->
<script type='text/javascript' src="jquery.min.js"></script><!-- see the change here -->
</head>
<body>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
<span id="test">
</span>
</body>
</html>
<script type = "text/javascript">
$(document).ready(function(){
$('select').on('change',function(){
var value=$(this).val();
var output='';
for(var i=1;i<=value;i++)
{
output+='<div>Your Text</div>';
}
$('#test').html(output); //html will do everything(removing and then adding)
});
});
</script>
Note:- You can once try like this:-
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Related
I am looking for help in putting a cookie into this script so the browser remembers the background image selected when the browser is closed or changed page. Any help would be much appreciated!
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
<body id="shelf">
<select id="themes" onChange="changeTheme()" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
It looks like the only piece you are missing is the setting and getting of the cookie. Here is a post about setting and getting cookies using both jquery and javascript.
This is jquery but it gets the job done.
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--download jquery.cookie from here http://plugins.jquery.com/cookie -->
<script type="text/javascript" src="images/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var theme = $.cookie("backgroundImage");
if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
$("#themes").change(function() {
theme = $(this).val();
$.cookie("backgroundImage", theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
});
});
</script>
</head>
<body id="shelf">
<!--<select id="themes" onChange="changeTheme()" name="ChangeBG">-->
<select id="themes" name="ChangeBG">
<option value="images/background1.jpg" selected="selected">Default</option>
<option value="images/background2.jpg">Heart</option>
<option value="images/background3.jpg">Earthly</option>
<option value="images/background4.jpg">Sunflowers</option>
<option value="images/background5.jpg">Mountin</option>
</select>
</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>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("open the dropdownbox automatically onload");
optionsSelect.focus();
var WshShell = new ActiveXObject("WScript.Shell");
WshShell.SendKeys("%{DOWN}");
//document.formName.elementName.focus();
//document.F1.DD.focus();
}
</script>
</head>
<body onload="myFunction()">
<form>
<select name="DD" id="DD" onMouseOver="this.size=20;" onload="this.size=20;">
<option value="volvo">Audi</option>
<option value="saab">Fiat</option>
<option value="audi">Honda</option>
<option value="fiat">Mercedes</option>
<option value="audi">Saab</option>
<option value="audi">Volvo</option>
</select>
</form>
</body>
</html>
The best I could do so far is replace onload with onMouseOver but then it does not allow you to type the letter of a name for quick searching if you have a very long list. Any advice?
THanks.
Write your code into $(document).ready(); function.
include jquery-1.9.0 framework.
Try below code.
<script>
$(document).ready(function(){
alert("open the dropdownbox automatically onload");
optionsSelect.focus();
// Other statements
});
</script>
// The rest of your code.
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 have two selects
<select name="firstselect" id="firstselect">
<option value="optionOne">optionOne</option>
<option value="optionTwo">optionTwo</option>
</select>
<select name="secondselect" id="secondselect">
<option value="secondOptionOne">secondOptionOne</option>
<option value="secondOptionTwo">secondOptionTwo</option>
<option value="secondOptionThree">secondOptionThree</option>
<option value="secondOptionFour">secondOptionFour</option>
<option value="secondOptionFive">secondOptionFive</option>
</select>
I want the options in the secondselect to change based on the option the user chooses in the first select. How can I do this either in Javascript or PHP?
I have had the same problem as you. The following javascript, written inside the space corresponding to the <head> tag, could be useful if both lists have the same elements and the first element of the list "firstselect" is related to the first one of the list "secondselect", the second element of the list "firstselect" is related to the second one of the list "secondselect" and so on.
<script language="javascript" type="text/javascript">
// <!CDATA[
function Select1_onclick() {
var SelectList1 = document.getElementById('firstselect');
var SelectList2 = document.getElementById('secondselect');
SelectL2.selectedIndex = LSelectL1.selectedIndex;
// ]]>
</script>
You also should modify the <select> tag for the list "firstselect" to include the above script in this way:
<select name="firstselect" id="firstselect" onclick="Select1_onclick()">
If you pretend to make a different options choice, you could use a switch-case structure (see a example here).
I found a nice solution to this here:
http://www.webdeveloper.com/forum/showthread.php?91848-How-do-I-make-one-lt-select-gt-list-dependent-on-the-selection-made-in-another
It's not my code but I hope it helps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>select change 2nd select</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];
function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i<varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
}
}
</script>
</head>
<body onload="Box2(0);">
<form name="myform" method="post" action="http://www.mysite.com/mysite">
<fieldset>
<select name="box1" onchange="Box2(this.selectedIndex)">
<option value="a">apple</option>
<option value="b">pear</option>
<option value="c">orange</option>
</select>
<select name="box2">
</select>
</fieldset>
</form>
</body>
</html>