i have found a script that do what i need (dropdown menus) but i want it to take user to an external/internal url based on his choice from the dropdown menu for example if he choose USA and then NY they go to url#1 and if choose USA and NJ go to url#2, that's all i want
the script:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var citiesByState = {
USA: ["NY","NJ"],
Singapore: ["taas","naas"]
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() {
var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
alert(country+"\n"+city);
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<select id="citySelect" size="1">
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>
please help!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var citiesByState = {
"USA": ["NY","NJ"],
"Singapore": ["taas","naas"]
}
var navURLs = {
"USA": {"NY": "http://www.yahoo.com","NJ": "http://www.google.com"},
"Singapore": {"taas": "http://www.bing.com","naas": "http://www.ibm.com"}
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(cityId in citiesByState[value]) {
citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}
function displaySelected() {
var country = document.getElementById("countrySelect").value;
var city = document.getElementById("citySelect").value;
alert(country+"\n"+city);
navURL = navURLs[country][city];
if(navURL){
alert(navURL);
window.location.href = navURL;
}
}
function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)">
<option></option>
<option>USA</option>
<option>Singapore</option>
</select>
<select id="citySelect" size="1">
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>
Related
So i have 2 html pages (index.html and index2.html) and i can't call js function in index2.html .I set up a console.log() in every functions and nothing show up when i try to invoke functions from index2.html . I found nothing in the javascript that could create this issue. Here is my code :
index2.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<input class="example_input" type="text" placeholder="Search.." id="search2">
<button id="button2" class ="example_button" type="submit" onclick="getvids()"><i class="fa fa-search"></i></button>
<br/>
<br/>
<label for="numofvids2">Nombre de vidéos:</label>
<select name="Vidsnum2" id="numofvids2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</head>
<body>
<script src="script.js"></script>
<h1><span id="vidsdiv2"></span></h1>
</body>
</html>
script.js :
function getvids() {
console.log("getvids")
var suburl2 = document.getElementById("search2").value;
var numofvids2 = document.getElementById("numofvids2").value;
if (suburl2 != "") {
suburl2 = suburl2.replace(" ", "%20");
var url2 = 'https://api.dailymotion.com/videos?search='+suburl2+'&page=1&limit='+numofvids2+'&fields=thumbnail_1080_url'
var request2 = new XMLHttpRequest();
request2.open('GET', url2);
request2.responseType = 'json';
request2.onload = function() {
var texte2 = request2.response;
if (texte2.list[0] != undefined) {
var n2 = 0
while (texte2.list[n2] != undefined) {
var allvids2 = allvids2+texte2.list[n2].thumbnail_1080_url+"<br/>";
n2 = n2+1
};
var allvids2 = allvids2.replace("undefined", "")
document.getElementById("vidsdiv2").innerHTML = allvids2;
} else {
document.getElementById("vidsdiv2").innerHTML = "Not found";
};
};
request.send();
} else {
document.getElementById("vidsdiv2").innerHTML = "Empty research";
}
};
I wrote everything correctly, but it's not working. I can't understand; I don't see a problem, but it still doesn't work. My English isn't very good, so I have trouble explaining in detail.
I just don't know why this doesn't work.
function calc() {
var a = parseInt(document.querySelector("#value1").value);
var a = parseInt(document.querySelector("#value2").value);
var op = (document.querySelector("#operator").value);
var calculate;
if (op == "add") {
calculate = a + b;
} else if (op =="min") {
calculate = a - b;
} else if (op =="div") {
calculate = a / b;
} else if (op =="mul") {
calculate = a * b;
}
console.log(calculate);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
Value 1: <input type="text" id="value1">
<br>
Value 2: <input type="text" id="value2">
Operator:
<select id="operator">
<option value="add">Add</option>
<option value="min">Minus</option>
<option value="div">Divide</option>
<option value="mul">Multiply</option>
</select>
<button type="button" onclick="calc()">Calculate</button>
</form>
</body>
<script src="js/main.js"></script>
</html>
You're missing to declare the var 'b' in line number 3. The correct code should be :
var a = parseInt(document.querySelector("#value1").value);
var b = parseInt(document.querySelector("#value2").value);
I have this dropdown list
#Html.DropDownList("orderPosted", orderList, new { data_native_menu = "false", data_options_prefix = "Insert at Position: ", data_mini = "true" })
and the script to update #itemPosition to pass it to the controller
#Html.Hidden("itemPosition")
<script>$("#itemPosition").val($("#orderPosted option:selected").text());
$(function () {
$("#orderPosted").on("change", function () {
$("#itemPosition").val($("option:selected", this).text());
});
})
</script>
It will assign the text to #itemPosition when the page loads, but the 'On Change' function is not working. What is wrong with the way I have this formatted.
Here is a working example, you can find out what you are doing wrong by comparing it with your code:
function getSelected(el) {
var value = el.val();
var text = el.find("option").filter(":selected").text();
$("#page-one pre").text("Selected: "+value+" - "+text);
}
$(document).on("pagecreate", "#page-one", function() {
getSelected($("#select-custom-1"));
$("#select-custom-1").change(function() {
getSelected($(this));
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="content" role="main">
<select name="select-custom-1" id="select-custom-1" data-native-menu="false">
<option value="1">The 1st Option</option>
<option selected value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
<pre></pre>
</div>
</div>
</body>
</html>
BTW, yes you are right, the selected attribute won't be updated, but by using the filter as above, you will get (and can post back) the selected option(s) text as expected.
Hi, Folks! My goal is create HTML file without external Javascript.
Everything works in https://jsfiddle.net. But, when I open the HTML file the search script is no longer available.
What should I fix on the below code?
Thanks for any help
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
//--><!]]>
</script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
You have included Jquery after your js code, which is wrong jQuery must be loaded before any other code related to jQuery and cdata is irrelevant here thats not required anymore
https://jsbin.com/lubowovani/edit?html,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
</script>
</head>
<body>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
The code in your head is running before you import jQuery (which you do in the body). That code utilizes jQuery, so it will not be able to find jQuery when it tries to use it (since it's not loaded yet).
Move your jQuery script tag to the head above the code that needs it.
For future reference simple errors like this can be solved easily by using the dev tools of most browsers. For example, in chrome the console is showing Uncaught ReferenceError: $ is not defined, which can easily be interpreted as jQuery not being present for a script that is trying to use it. You can open them up by hitting F12.
You have to include jQuery file before you use it.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Search Zip Code</title>
<style type="text/css">
div {
padding: 2px 5px;
}
</style>
<!-- === HERE === -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- === HERE === -->
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function(){
var filter = document.getElementById('zipcode');
var JSONtbl = [
{"zipcode":"01702","address":"334 CONCORD ST","County":"MIDDLESEX"},
{"zipcode":"02482","address":"27 Atwood St","County":"NORFOLK"},
{"zipcode":"02459","address":"189 Cypress St","County":"MIDDLESEX"}
];
filter.onkeyup = function() {
var zipcodeToSearch = filter.value;
var n = zipcodeToSearch.length;
if (n != 5) {
document.getElementById("address").value = "";
document.getElementById("County").value = "";
} else {
for (var i = 0; i < JSONtbl.length; i++) {
if (JSONtbl[i].zipcode == zipcodeToSearch) {
document.getElementById("address").value = JSONtbl[i].address;
document.getElementById("County").value = JSONtbl[i].County;
}
}
}
};
});
//--><!]]>
</script>
</head>
<body>
<form method="post">
<div><input type="text" id="zipcode"/></div>
<div><input type="text" id="address" disabled="disabled"></div>
<div><input type="text" id="County" disabled="disabled"></div>
</form>
</body>
</html>
i am working on hybrid multipage application. My problem is the dropdown list select option is not responsive or i am able to click it but it is responsive or works when i remove the pageload block.
var pagesHistory = [];
var currentPage = {};
var path = "";
var busyIndicator = null;
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator( null, {text : ''});
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$('#languages').bind('change', languageChanged);
var locale = WL.App.getDeviceLocale();
var lang = WL.App.getDeviceLanguage();
WL.Logger.debug(">> Detected locale: " + locale);
WL.Logger.debug(">> Detected language: " + lang);
if (locale.indexOf("en")!=-1) languageChanged("english");
if (locale.indexOf("ar")!=-1) languageChanged("arabic");
function languageChanged(lang) {
if (typeof(lang)!="string")
lang = $("#languages").val();
switch (lang){
case "english":
setEnglish();
break;
case "arabic":
setArabic();
break;
}
if ($("#languages").val()=="arabic")
$("#wrapper").css({direction: 'rtl'});
else
$("#wrapper").css({direction: 'ltr'});
$("#loginusername").html(Messages.loginusername);
$("#loginpassword").html(Messages.loginpassword);
$("#actionsLabel").html(Messages.actionsLabel);
}
$("#pageload").load(path + "pages/loginpage.html", function(){
$('#loginwrapper').hide();
$.getScript(path + "js/loginpage.js", function() {
if (currentPage.init) {
currentPage.init();
}
$('#loginwrapper').fadeIn(5000);
});
});
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hrapp</title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body>
<div id="w1wap">
<label for="languages" id="actionsLabel" class="translate"></label>
<select id="languages">
<option value="" selected="selected">--Select--</option>
<option value="english" id="englishLanguage" class="translate"></option>
<option value="arabic" id="arabicLanguage" class="translate"></option>
</select>
</div>
<div id="pageload">
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>