I am currently making a web page in html with a series of drop down menus. The web site is here: http://tc.met.psu.edu/tcgengifs/index2.html
I am using the following code to make the drop-down menus
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getUrl() {
var part12 = document.getElementById("firstChoice2").value;
var part22 = document.getElementById("secondChoice2").value;
var part32 = document.getElementById("thirdChoice2").value;
return "http://tc.met.psu.edu/tcgengifs/CMC/"+part12+"/"+part22+part32;
}
function gotoSelection() {
var urlToGoTo = getUrl();
alert(urlToGoTo);
//location.href=urlToGoTo;
function setupLink() {
var urlToGoTo = getUrl();
document.getElementById("gotoLink").href=UrlToGoTo;
}
</script>
</head>
<body onload="setupLink();">
<div id=leftcol>
<select id =firstChoice2 onchange="setupLink();">
<option value=2012072600>2012072600</option>
<option value=2012072512>2012072512</option>
</select>
</div>
<body>
<div id=leftcencol>
<select id =secondChoice2 onchange="setupLink();">
<option value=rain>Rainfall</option>
<option value=slp>Sea Level Pressure</option>
<option value=850virt>850mb Virtual Temperature</option>
</select>
</div>
<div id=rightcencol>
<select id =thirdChoice2 onchange="setupLink();">
<option value=.anim.html>Animation</option>
<option value=0.png>000hr</option>
<option value=1.png>006hr</option>
<option value=2.png>012hr</option>
</select>
</div>
<div id=rightcol>
<a id="gotoLink" href="">Submit</a>
My problem is that I need to use this code (with modifications) multiple times, but when I do that, the submit button for each series of 3 dropdown menus takes me to the site that the last piece of code is designed to take me to. How do I separate the code so that the first series of three dropdowns is not influenced by any other series?
Your second function gotoSelection() is missing a closing brace but that is not what is causing your problems.
The way you are passing the URL back into the anchor isn't correct try;
document.getElementById("gotoLink").setAttribute("href",urlToGoTo);
In your setupLink() function to replace the line;
document.getElementById("gotoLink").href=UrlToGoTo;
Related
I have a Node.js application consisting of the following file system:
public
elegant-aero.css
stadium-wallpaper.jpg
team-results.html
public.js
app.js
teamresults.mustache
Through an HTML form, I want to populate the options of a dropdown menu based on the user's selected option from another dropdown menu. HTML is below:
<form>
<label for="selectLeague">
<span>National League:</span>
<select id="selectLeague" name="leagueCode">
<option style="display:none;"></option>
<option value="SP1">Spanish La Liga</option>
<option value="E0">English Premier League</option>
<option value="D1">German Bundesliga</option>
<option value="F1">French Ligue 1</option>
<option value="I1">Italian Serie A</option>
<option value="P1">Portuguese Primeira Liga</option>
<option value="N1">Dutch Eredivisie</option>
<option value="SC0">Scottish Premier League</option>
</select>
</label>
<label for="selectTeam">
<span>Team Name:</span>
<select id="selectTeam" name="teamName">
<option>Choose a team:</option>
<!-- populated after user makes a selection on league -->
</select>
</label>
<label>
<span></span> <input type="submit" value="Submit">
</label>
</form>
There are simple ways that this can be accomplished with just JavaScript through client-side rendering. For example:
Dynamically Populating Drop down list from selection of another drop down value
However, I absolutely cannot get this to work with Node.js (sever-side). Following the example in the link above, I created a JavaScript file called public.js and put it in the public directory. The JavaScript file contains the following dummy code:
// Hard code all teams by their leagues, as a test
const teamsByLeague = {
SP1: [
"Real Madrid",
"Barcelona"
],
E0: [
"Chelsea",
"Arsenal"
]
}
function updateTeamSelection(leagueCode) {
if (leagueCode.length == 0) document.getElementById("selectTeam").innerHTML = "<option></option>";
else {
var teamOptions = "";
for (teamIndex in teamsByLeague[leagueCode]) {
teamOptions += "<option>" + teamsByLeague[leagueCode][teamIndex] + "</option>";
}
document.getElementById("selectTeam").innerHTML = teamOptions;
}
}
I updated the HTML file to contain this line on the league selection dropdown menu:
<label for="selectLeague" onChange="updateTeamSelection(this.value);">
And added this in the body of the HTML document:
<script src="public.js"></script>
And lastly, following an advice I saw in the following StackOverflow page:
nodejs/express include local js file
I added the following line to app.js:
app.get('/public.js',function(req,res){
res.sendFile('public.js');
});
Nevertheless, after all of this, when changing the selection on the league dropdown menu, I still get the error message:
Uncaught ReferenceError: updateTeamSelection is not defined
onchange
Not exactly sure what am I missing. Any help is massively appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="selectid">
<option>name</option>
</select>
<select id="secondselectid"></select>
<script>
var selectid = document.getElementById('selectid')
var secondselectid = document.getElementById('secondselectid')
var fetcheddata = false
function adddatatosecondone (data) {
secondselectid.innerHTML = "";
data.forEach(i => {
var option = document.createElement('option')
var text = document.createTextNode(i)
option.appendChild(text)
secondselectid.appendChild(option)
});
}
selectid.addEventListener(onchange, () => {
fetch("path to your online server", {method: 'GET'})
.then(data => {
return data.json()
}).then(data => {
fetcheddata = data
adddatatosecondone(data)
})//method is of your choice if your server receives post or get whatever
})
</script>
</body>
</html>
and you have to make a server with nodejs and on request by the above html you have to send a json response if you are using expressn you can send this with res.json();
I am using google web app in order to build simply HTML which inserting some informations filled by user to google sheet (apps script application is hosted in a Google Apps Enterprise account). What I'm trying to do is display user e-mail at HTML Page by using Session.getEffectiveUser().getEmail() method. Could you please advise me how can I do it?
This is my code.gs:
function doGet(e) {
return HtmlService.createTemplateFromFile("page.html").evaluate();
}
function userClicked(userInfo){
var url ="path";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("BAZA");
var l_row = ws.getLastRow() + 1
ws.getRange(l_row,1).setValue(userInfo.RANK)
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("page-css.html"); ?>
</head>
<body>
<div class="row">
<div class="input-field col s2">
<select id="RANK">
<option value="" disabled selected>Wybierz rank </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Rank</label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("page-js.html"); ?>
**HERE SHOULD BE USER ADDRESS EMAIL**
</body>
</html>
JavaScript code:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById("btn").addEventListener("click",clickedBtn);
function clickedBtn(){
var responseInfo = {};
responseInfo.RANK = document.getElementById("RANK").value;
google.script.run.userClicked(responseInfo);
}
</script>
Since you are using a template (createTemplateFromFile) you could replace
**HERE SHOULD BE USER ADDRESS EMAIL**
by
<?= Session.getEffectiveUser().getEmail() ?>
In order to this to work, you should set to web application to be executed as the user who is accessing it.
Reference
https://developers.google.com/apps-script/guides/web
Session.getEffectiveUser()
I've been working with laravel. I have created the form below. I want users depending on their selection to be directed to specific webpages that I have already created (for better understanding, please check my comments in code ()). Routing is ok but I need some help with the form. If possible I need help using only html (no javascript). My code is below. The problem is that the form action redirects to /research for every selection user does.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Please choose department</title>
</head>
<body>
<form method="post" action="/research" id="tmima">
{{csrf_field()}}
Select:<br>
<select name="Department" id="dpt">
<option value="0" selected="selection">Select</option>
<option value="geo">Geology</option> <!--should place /geology page link-->
<option value="phs">Physics</option> <!--should place /physics page link-->
<option value="chm">Chemistry</option> <!--should place /chemistry page link-->
</select>
<input type="submit" value="Αναζήτηση Στοιχείων Φοίτησης">
</form>
</body>
</html>
I think you could do this in the controller like so:
if (request('Department) == 'geo') {
return view ('/geology);
} else if (request('Department) == 'phs') {
return view ('/psychology);
} else if (request('Department) == 'chm') {
return view ('/chemistry);
} else {
redirect->back();
}
In the below jquery mobile html code, onchange function (onchangeInDropDown();) is called whenever there is a change in multi-select option in drop down. I'm doing some time consuming operation (updating the UI, based on item selected) whenever there is a change. I'm seeing some strange behaviour if I select more than one options quickly (one after another). Could you please suggest me a better way to handle this.
Thought of implementing the following solution, but do not know how to implement it.
Removing the onchange function and put the OK button in the overlay menu. On selecting the OK button, will call a function to get all the item selected and update the UI with respect to the item selected, ie., update all together instead of every change. The problem here is I do not know how to put OK button in the overlay menu. Is there a way to put ok button in overlay menu
Please help me!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Multiselect item </title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- below three tags , link and script are for showing pop up toast dialogs -->
<link href="css/toastr.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/toastr.js"></script>
<link href="css/toastr-responsive.css" rel="stylesheet"/>
<script type="text/javascript" src="javascripts/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script type="text/javascript">
function onchangeInDropDown (){
//Performing some time consuming operation and updating the ui based on item selected
}
function getDropDownValue() {
var inputElems = document.getElementById("item_drop_select");
count = 0;
for (var i=1; i<inputElems.length; i++) {
if (inputElems[i].selected == true) {
count++;
alert (inputElems[i].value);
// Update the UI based on item inputElems[i].value
}
}
}
</script>
</head>
<body>
<form name="myform">
<div id="item_drop" class="ui-screen-hidden" style="display: block" >
<select data-mini="true" id="item_drop_select" name="item_drop_select" size="1" multiple="multiple" data-native-menu="false" onchange="onchangeInDropDown();">
<option >Multi-select list of item to buy</option>
<option value="milk" id="milk" >Milk</option>
<option value="oil" id="oil" >Oil</option>
<option value="rice" id="rice" >Rice</option>
<option value="softdrinks" id="softdrinks" >Softdrinks</option>
<option value="detergent" id="detergent" >Detergent</option>
</select>
<div data-role="button" id= "goButton" style= "visibility:block" onclick="getDropDownValue();">Get the drop down values </div>
</div>
</form>
</body>
</html>
Can you please replace this data-native-menu="true". It will open Select menu as native control.
Could someone please give me a clue as to why the following code does not work under MSIE?
<html>
<body>
<select id="si">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
e[0].style.display="none"; // <-------- no effect
</script>
</body>
</html>
IE doesn't allow you to manipulate option elements directly. In my experience, you need to remove all of the option elements from the select and repopulate them with whatever changes you want to make already applied (in this case, one element removed).
For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here which doesn't clone or remove the options but wraps spans around them, which is arguably much easier to deal with:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
This seems to work ok under MSIE, with hopefully no "side effects", if you find something wrong please let me know it, thanks.
<html>
<body>
<select id="si">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
var a = new Array();
var n = new Array();
var x = 2;
if(!a.length)for(var i=0,m=e.length;i<m;i++) {
a.push(e[i].value);
}
while(e.firstChild)
e.removeChild(e.firstChild);
for(var i=0,m=a.length;i<m;i++) {
if(x==a[i]) {
e.add(new Option(a[i],a[i]));
}
}
</script>
</body>
</html>