i having problem giving a unique id for each checkbox selected. i not sure am i doing it correctly already. I cant print the selected checkbox onto the view-attraction.html
all-attraction.html
<input type="checkbox" ng-model=a.selected value={{a.attractionName}} name={{a.attractionName}} id={{a.id}}>
attraction.js
$scope.selectAttraction = function()
{
var selected = '';
for (var i = 0; i < attractions.length; i++) {
if(attraction[i].selected){
selected += attraction[i].attractionName;
}
}
};
view-attraction.html
<p><img src={{"../img/"+a.attractionImg}} style="width:250px;height:250px;"/></p>
<p>Attraction Name: {{a.attractionName}}</p>
<p>Selected: {{a.selected}}</p>
https://jsfiddle.net/zcm2LLo8/
Related
I have a function that hides a div with the corresponding ID based on a radio button change, however, I would like to hide multiple items at once and as ID is unique I am not able to just hide them all. How would I set up a class that I can hide and how would I adjust this code below to make that work?
Any help greatly appreciated
function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};
You can use data attributes for this purpose together with the attribute selectors. So you need just to add the data-hidden-for attributes to the required nodes and access them using document.querySelector() or document.querySelectorAll()
First give all the elements a base class name baseClass. You could just give them a class name like hidden and then in your code you could do something like below:
const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}
And on the click event of the radio button you could add this class I mentioned above to whichever ones you want to hide:
element.classList.add("hidden");
or
element.classList.remove("hidden");
Filters work correctly as separate filters only i.e. if a user filters in "packages", it will filter as required or if a user filters "Nights" it will filter as required.
If a user wants to filter by two or more filters,rather than return the correct results, it will return the results for the last filtered only
i.e. If a user filters by Package:Silver and Nights:3, it should return four results, not 12.
The requirement is to return the exact results based on all filters chosen by the user.
The 's are from line 65 - 67 and the is from line 2243 - 2292.
It would be a bonus if the "number of people" input was a drop down form with values 1, 2, 3, 4 , but that's not a requirement at this point.
Code too large to paste, see link Table 1
You might wanna combine 3 functions into 1 because they look almost identical.
function filter() {
var filter_package = document.getElementById("myInput").value.toUpperCase().trim();
var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();
var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();
var rows = document.querySelectorAll("tr");
// First few rows are headers
for (var i = 2; i < rows.length; i++) {
var items = rows[i].querySelectorAll("td");
if (items.length === 0) continue;
var pkg = items[0];
var night = items[1];
var people = items[2];
var package_text = pkg.innerHTML.toUpperCase().trim();
var night_text = night.innerHTML.toUpperCase().trim();
var people_text = people.innerHTML.toUpperCase().trim();
if (package_text.includes(filter_package) &&
night_text.includes(filter_num_nights) &&
people_text.includes(filter_num_people)) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
and modify the keyup events for the input boxes like below:
<input type="text" id="myInput" onkeyup="filter()" placeholder="Search for Packages.." title="Type in a Package name">
<input type="text" id="myInput1" onkeyup="filter()" placeholder="Search for Number of Nights.." title="Type in Number of Nights">
<input type="text" id="myInput2" onkeyup="filter()" placeholder="Search for Number of People.." title="Type in Number of People">
Please note
If your browser does not support string.includes naively then you can copy and paste the following polyfill into your javascript code. (ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes):
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
I am trying to get a list to populate from a spreadsheet based on the question posted here Previous questioe posted by #Kron011and I'm struggling somewhat. I added these lines to my .gs file:
function getMenuListOne(){
return SpreadsheetApp.openbyId('spreadsheet_key').getSheetByName('sheet1')
.getRange(row, column, numRows, numColumns).getValues();
}
and I added these lines to my HTML file:
<select id="menu">
<option></option>
<option>Google Chrome</option>
<option>Firefox</option>
</select>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getMenuListFromSheet();
google.script.run.withSuccessHandler(showMenu)
.getMenuListFromSheet();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
function showMenu(menuItems) {
var list = $('#menu');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems.length; i++) {
list.append('<option>' + menuItems[i] + '</option>');
}
}
</script>
As ever my painfully limited experience is hampering my efforts. I can get a new menu box to appear and show the correct results I want but I cannot get an existing box to show the same list. The existing boxes code is currently:
<input type="text" name="site" list="depotslist" id="site" class="form-control" placeholder="Select depot/site" required>
<datalist id="depotslist">
<option value="one">
<option value="two">
</datalist>
but can someone please point me in the right direction of which parts of my existing menu box I need to change to get the two bits to communicate?
UPDATE 23 JULY
I added the following code to get the another list to operate from another source:
$(function() {
google.script.run.withSuccessHandler(showThings2)
.getMenuListSources();
google.script.run.withSuccessHandler(showMenu2)
.getMenuListSources();
});
function showThings2(things2) {
var list2 = $('#things2');
list.empty();
for (var i = 0; i < things2.length; i++) {
list2.append('<li>' + things2[i] + '</li>');
}
}
function showMenu2(menuItems2) {
var list2 = $('#menu2');
var box2 = $('#sourcelist');
list2.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems2.length; i++) {
list2.append('<option>' + menuItems2[i] + '</option>');
box2.append('<option>' + menuItems2[i] + '</option>');
}
}
with these lines in the .gs file:
var Bvals = SpreadsheetApp.openById(ssKey).getSheetByName('SourceCodes').getRange("C3:C").getValues();
var Blast = Avals.filter(String).length;
return SpreadsheetApp.openById(ssKey).getSheetByName('SourceCodes').getRange(3,3,Blast,1).getValues();
It would be similar to what you are doing with the element "menu". with jquery you can select the element of the box that contains the options and then append the new values. in this case it's id is: depotslist.
function showMenu(menuItems) {
var list = $('#menu');
var box = $('#depotslist');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems.length; i++) {
list.append('<option>' + menuItems[i] + '</option>');
box.append('<option>' + menuItems[i] + '</option>');
}
As a difference with the element "menu" in this case the content will remain. This means that in the box you will see the options "one, two" and whatever you added because we are not removing the content like with this line
list.find('option').remove();
I'm not sure if this is exactly what you wanted to do, let me know if this doesn't help.
I want to go through all the Google groups I am a member of and get the list of all the users of each group :
var list = GroupsApp.getGroups();
for(var i = 0; i< list.length; i++){
for(var key in headerObj){
var text = "";
if(key == "users"){
var tab = list[i].getUsers();
if(tab.length > 0){
text = tab[0].getEmail();
for(var j = 1; j < tab.length; j++){
text += ", " + tab[j].getEmail();
}
}
headerObj[key].push(text);
}
}
}
But I always get this Exception :
You do not have permission to view the member list for the group: "group email"
Is there a way to go through all the Google groups of which, I am the administrator ?
Unfortunatly such a thing is not possible there is however the workaround of a try catch:
function myFunction() {
var allGroups = GroupsApp.getGroups();
for (var i in allGroups){
try {
var users = allGroups[i].getUsers();
for (var j in users){
Logger.log(users[j]);
}
}
catch (e) { }
}
}
I'm trying to make an alert with the value of the selected radio button, but I allways get the first of them, regardless the one I choose...(Acompanhado);
html:
<form/>
<input type="radio" class="simple_form" name="grupo_1" value="Acompanhado" id="saida"/>
<span class="texto">Acompanhado</span>
<input type="radio" class="simple_form" name="grupo_1" value="Individual" id="saida"/>
<span class="texto">Individual</span>
</form>
js:
function save() {
var saida_js = document.getElementById('saida').value;
alert("Tipo de saida: " + saida_js);
}
Any idea ?
#Quentin: I have alot of alerts, cause Im trying to get all data from a form. I used your code, and I get no alert at all.
function save() {
var morada_js = document.getElementById('morada').value;
var data_js = document.getElementById('data').value;
var hora_js = document.getElementById('hora').value;
var radio_saida = document.getElementsByName('name_saida');
var notas_js = document.getElementById('notas').value;
var condicoes_atm_js = document.getElementById('condicoes_atm').value;
alert("Morada: " + morada_js);
alert("Data: " + data_js);
alert("Hora: " + hora_js);
function get_checked_radio(radio_saida) {
for (var i = 0; i < radio_saida.length; i++) {
var current = radio_saida[i];
if (current.checked) {
return current;
}
}
}
alert(get_checked_radio(radio_saida).value);
alert("Notas: " + notas_js);
}
An id must be unique in a document.
To find the value of a selected radio button in a group, get the group by its name…
var radios = document.getElementsByName('radio_name'); // or
var radios = document.forms.formId.elements.radio_name;
Then loop over them until you find the one with the true checked property.
function get_checked_radio(radios) {
for (var i = 0; i < radios.length; i++) {
var current = radios[i];
if (current.checked) {
return current;
}
}
}
alert(get_checked_radio(radios).value);
Makes sense because you've got two input tags with the same id saida