I want to change the src attribute of image according to the selection of drop list menu. For example, the droplist contains "Peter, Henry, David", the image will show different images accordingly to the name (something like peter.png, henry.png, david.png, or 1.png, 2.png, 3.png)
So here is what I did. However, it didn't work. I don't know what I missed here.
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Peter">Peter</option>
<option value="Henry">Henry</option>
<option value="David">David</option>
</select>
<img src="default.png" id="imageholder" alt="imageholder" />
<script type="text/javascript">
$(document).ready(function() {
$("#name").change(function() {
var nameholder= $("#name").val();
$('#imageholder').attr('src', nameholder + ".png" );
});
})
</script>
Related
When I select an option, I want to remove selected attribute from old one and add it to option I selected.
HTML Code:
<label>Gender</label>
<select id="gender" name="gender" class="form-control" onchange="redirect()">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="any">Any</option>
</select>
JS Code:
<script>
$("#gender").on("change", function redirect() {
// const queryStr = "gender=any&platform=any"
// const usp = new URLSearchParams(queryStr)
// console.log(usp)
url = window.location.href.split("?")[0] + "?gender=" + this.value + "&platform=<%=platform%>"
location.replace(url)
})
</script>
I'm facing the following challenge building some dropdowns with Handlebars.
Instead of modeling the dropdown's select this way:
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
<option {{selectedSport sport 'all'}} value="all">All</option>
<option {{selectedSport sport 'Hiking'}} value="Hiking">Hiking</option>
<option {{selectedSport sport 'Mountaineering'}} value="Mountaineering">Mountaineering</option>
<option {{selectedSport sport 'Climbing'}} value="Climbing">Climbing</option>
<option {{selectedSport sport 'Mountain biking'}} value="Mountain biking">Mountain biking</option>
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
<option {{selectedDifficulty difficulty 'all'}} value="all">All</option>
<option {{selectedDifficulty difficulty 'Easy'}} value="Easy">Easy</option>
<option {{selectedDifficulty difficulty 'Medium'}} value="Medium">Medium</option>
<option {{selectedDifficulty difficulty 'Hard'}} value="Hard">Hard</option>
<option {{selectedDifficulty difficulty 'Expert'}} value="Expert">Expert</option>
</select>
<label for="floatingSelect">Difficulty</label>
</div>
I would like to use the same helper for both of them, but I still don't know how to do it. (btw, ignore the fact that I should be using an {{#each}} for displaying the options :P)
The controller:
module.exports.list = (req, res, next) => {
const filters = req.query;
const { location, sport, difficulty } = req.query;
const criterial = Object.keys(filters)
.filter((key => filters[key] !== 'all'))
.reduce((criterial, filter) => {
if (filters[filter]) criterial[filter] = filters[filter];
return criterial;
}, {});
Route.find(criterial)
.then(routes => {
res.render('routes/list', { routes, location, sport, difficulty })
})
.catch(next)
}
The helpers:
hbs.registerHelper('selectedSport', (option, sportValue) => {
return option === sportValue ? ' selected' : '';
})
hbs.registerHelper('selectedDifficulty', (option, difficultyValue) => {
return option === difficultyValue ? ' selected' : '';
})
Many thanks for your help! :)
Finally I solved it this way:
Instead of typing all the options directly on the HBS, I create these with a helper that renders each option.
<div class="form-floating col-3">
<select name="sport" class="form-select" id="floatingSelect">
{{#each sportOptions as |sportOption|}}
{{option ../sport sportOption}}
{{/each}}
</select>
<label for="floatingSelect">Sport</label>
</div>
<div class="form-floating col-2">
<select name="difficulty" class="form-select" id="floatingSelect">
{{#each difficultyOptions as |difficultyOption|}}
{{option ../difficulty difficultyOption}}
{{/each}}
</select>
<label for="floatingSelect">Difficulty</label>
</div>
The helper receives 2 parameters: sport and sportOption and according to their value, returns a string cointaining the option with the selected attribute or not.
hbs.registerHelper('option', function (selectedValue, value) {
const selectedProperty = value == selectedValue ? 'selected' : '';
return new hbs.SafeString(`<option value=${value} ${selectedProperty}>${value}</option>`);
});
sportOption and difficultyOption are arrays with all the possibilities inside them.
I hope that, if someone else has the same problem, this can be of any help :)
I have an parent SiliComponent and child SiliChildComponent.
Within SiliChildComponent I have an #Input() expdays:any[];
This is added within ngOnChanges interfaces like this:
Angular4 SiliChildComponent
data:any;
#Input() expdays:any[];
ngOnChanges() {
this.data = this.expdays;
}
**HTML from parent component SiliComponent **
<select (ngModelChange)="changeCar($event)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
<expdays [expdays]='exp_searchData'></expdays>
HTML from child component SiliChildComponent where I am using the #Input data
<div *ngFor="let x of data" >
{{x}}
</div>
Fixed problem:
The issue was in another place of my code.
$(document).ready(function(){
$(".btn").hide();
$(".about input").on('click',function(){
$(".about input").hide();
$(".btn").show();
});
});
" method="post" enctype="multipart/form-data">
save as
cover
logo
save
<select name="save">
<option selected="selected">save as<option>
<option value="coverimage">cover<option>
<option value="logo">logo<option>
</select>
<input type="file" name="image"></input>
<button class="btn">save</button>
</form>
initially hiding ".btn", but after clicking ".about input" want to hide ".about input" and show ".btn"
I have been trying to develop a simple extension for Safari Firefox and Chrome in wich a form is presented to a user on a pop-up and after being filled out is locally evaluated and the response to the user is defined on that evaluation.
The original form can be found on: https://dl.dropbox.com/u/86545493/Waze/Calculadora.html
I have also already been able to create a working safari extension that can be downloaded here: https://dl.dropbox.com/u/86545493/Waze/Extensions/WRTC.safariextz
but my problems starte when trying to create the chrome extension.
I followed the tutorial for creating a first extension and was able to create a button and load the form as a popup. However the security restrictions do not allow my form to run. From what I have understood by reading the Developers Guide what I need is to separate the javascript in its own file and call it from the popup file. However the language of the documents is too technical for me (med student) and I have been unable to understand the proper way to format the messages that should be used. Here is the current status for my code:
popup.html
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Calculadora de Tipo de Camino</h1>
<form id="Calle" target="_self">
Cruceros <select id="cruceros">
<option value=1>Glorietas</option>
<option value=1>Rotondas</option>
<option value=1>Semáforos</option>
<option value=0 selected>Sin Control</option>
<option value=2>Sin Cruceros</option>
</select></br>
Carriles <select id="carriles">
<option value=1 selected>1</option>
<option value=2>2</option>
<option value=3>3 o más</option>
</select></br>
Sentidos Separados físicamente o parte de par vial <input type="checkbox" id="sentidos"></br>
Con Laterales o Acotamiento <input type="checkbox" id="laterales"></br>
Entradas y Salidas delimitadas <input type="checkbox" id="ramps"></br>
Avenida, Boulevard, o Circuito <input type="checkbox" id="name"></br>
Es Carretera
<select id="carretera">
<option value=0 selected>No</option>
<option value=1>Municipal</option>
<option value=2>Estatal</option>
<option value=3>Federal</option>
</select> Revisar en: SCT</br>
Tiene topes <input type="checkbox" id="topes"></br>
</br>
</form>
<button type="button" onclick="textR()">Calcular Puntos</button>
<hr><p id="resultn"></p>
<p id="resultt"></p>
</body>
popup.js
function textR()
{var cru=document.getElementById("cruceros").value;
if (cru==0){crun=0}
else if (cru==1){crun=1}
else{crun=2}
var carr=document.getElementById("carriles").value;
if (carr==1){carrn=0}
else if (carr==2){carrn=1}
else{carrn=2}
sen=(document.getElementById("sentidos").checked==true)?1:0;
lat=(document.getElementById("laterales").checked==true)?1:0;
ram=(document.getElementById("ramps").checked==true)?1:0;
av=(document.getElementById("name").checked==true)?1:0;
var hw=document.getElementById("carretera").value;
if (hw==1){hwn=1}
else if (hw==2){hwn=2}
else if (hw==3){hwn=3}
else{hwn=0}
saluden=(document.getElementById("topes").checked==true)?1:0;
var r=crun+carrn+sen+lat+ram+av+hwn+saluden;
document.getElementById("resultn").innerHTML=(r+" puntos");
if (r<2){rt='Street'}
else if (r<4){rt='<span class="pstreet">Primary Street'}
else if (r<7){rt='<span class="mihw"> Minor Highway '}
else if (r<9){rt='<span class="mahw"> Major Highway '}
else {rt='<span class="fw"> Freeway '}
document.getElementById("resultt").innerHTML=(rt);
}
Could you please tell me the proper syntax to be used?
Eliminate Inline code onclick="textR()" and add it in popup.js as shown here
document.getElementsByTagName("button")[0].addEventListener("click",textR);
In the end I ended up putting document.getElementById("calcButton").addEventListener("click", textR); at the end of popup.js and had to move <script type="text/javascript" src="popup.js"></script> to the end of the popup.html.
I found this article usefull: Javascript: Uncaught TypeError: Cannot call method 'addEventListener' of null