I wonder if you could help me, I'm a graphic designer but trade with super basic HTML experience.
I'm volunteering for a small charity in Birmingham who is looking to create a community planning tool, I said I'll try and help design it, for free of course.
One of main options on the site is people can search to get resources. This is the interface:
Is there a really simple way to link this up?
For example, if someone clicked 'Balsall Heath Ward' and then 'Community' in the drop down menus then clicked search now it will take them to BHcommunity.html which will have resources. Same if somebody clicked 'Moseley Ward' and then clicked 'Sustainability' then search now, it would take them to MWsustainability.html. Does that make sense?
Basically I just need something that commands to point towards links, but I don't know where to start, can anybody give me some advice or help?
If anybody can help I can swop for free design support?
Thanks so much for the support!
Nath
Ps: Here is the code.
<h3 class="demo-panel-title">Fill out the relevant information:</h3>
<div class="col-xs-3"> <div class="form-group has-error"> <input type="text" value="" placeholder="What is your name?" class="form-control" /> </div> </div>
<div class="col-xs-3"> <div class="form-group has-success"> <input type="text" value="" placeholder="What is your email address?" class="form-control" /> <span class="input-icon fui-check-inverted"></span> </div> </div>
<div class="col-xs-3"> <div class="form-group"> <input type="text" value="" placeholder="What organisation are you associated with?" class="form-control" /> </div> </div>
<br/>
<div class="col-xs-3"> <h3 class="demo-panel-title">Which Ward do you want to explore?</h3> <select class="form-control select select-primary" data-toggle="select"> <option value="0">Moseley & Kings Heath Ward</option> <option value="1">Balsall Heath Ward</option> </select> </div>
<br/> <div class="col-xs-3"> <h3 class="demo-panel-title">What data do you need?</h3> <select class="form-control select select-primary" data-toggle="select"> <option value="0">Choose one</option> <option value="1">Local economy</option> <option value="2">Transport</option> <option value="3">Leisure</option> <option value="4" selected>Housing</option> <option value="5">Community</option> <option value="6">Planning</option> <option value="7">Sustainability</option> </select> </div> <br/>
I'd need to add a way to search
I have put together a reasonably simple example of how to do this, linked below. Firstly I have modified your HTML a little, changing the value attributes of your options to be more descriptive. I have added some IDs to elements for ease of location without the need for jQuery as you can see in the small extract here:
<div class="col-xs-3">
<h3 class="demo-panel-title">What data do you need?</h3>
<select id="data-type-select" class="form-control select select-primary" data-toggle="select">
<option value="0">Choose one</option>
<option value="economy">Local economy</option>
<option value="transort">Transport</option>
<option value="leisure">Leisure</option>
<option value="housing" selected>Housing</option>
<option value="community">Community</option>
<option value="planning">Planning</option>
<option value="sustainability">Sustainability</option>
</select>
</div>
In the javascript I have kept it as simple as possible, I hope you can see how I have gathered the information and used it to pick which html file you want to go to.
(function() {
function attachEvents () {
var submitButton = document.getElementById('ward-information-submit-button');
submitButton.addEventListener('click', submitButtonListener);
}
function submitButtonListener () {
getFormData();
}
function getFormData () {
var selectWardElement = document.getElementById('ward-select');
var selectDataTypeElement = document.getElementById('data-type-select');
pickDestination({
selectedWard: selectWardElement.options[selectWardElement.selectedIndex].value,
selectedDataType: selectDataTypeElement.options[selectDataTypeElement.selectedIndex].value
});
}
function pickDestination (options) {
if (options.selectedWard === 'moseley' && options.selectedDataType === 'economy') {
console.log('MWsustainability.html');
window.location = 'MWsustainability.html';
}
if (options.selectedWard === 'balsall' && options.selectedDataType === 'community') {
console.log('BHcommunity.html');
window.location = 'BHcommunity.html';
}
}
attachEvents();
}());
I have a working version of this here which includes some additional comments to hopefully help you make sense of it. You will need to extend this code to make it work for all of your cases and I'm sure there are other requirements you have which you could apply these concepts to. Keep me updated and I'll help you learn where I can.
I appreciate the offer of something in return but it is unnecessary, just keep paying it forward as you are now. Good luck!
https://jsfiddle.net/rvb56sx6/
You may consider making a JSON file or Javascript Object that holds string values for all the links you need. Then make a function that gets the values of the dropdown menus and chooses a link accordingly. Also, consider using Jquery to simplify this process. ( I use it in this example. Meaning that it must be used if you want to use the below function). You can include it by adding the below script tag in your html before you add the script tag for the file with the below function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="path/to/JS/File/with/below/function"></script>
Javascript Object
var links = {
balsallHeathWard {
community: '<Link to community>'
...
},
...
}
Javascript Function
$(function goToLink() {
$(document).on('click', '#<submitButtonIdName>', function(){
var ward = $('#<wardChooserSelectTagIdName>').val();
var subchoice = $('#<subChoiceTagIDName>').val();
if(ward == "Balsall Heath Ward") {
if(subchoice == "Community") {
window.location.href = links.balsallHeathWard.community;
} else if ...
...
} else if ...
...
});
})();
The function would look something like the function above. I couldn't complete it because I don't have all the options and links that you have for what can be chosen from the charity website. But this is a general idea. It definitely needs work though, but I am willing to help if you need it (I have a soft spot for charities).
Related
I just started a couple weeks ago and I don't know js/html that much, I don't know how to redirect showing the answer from the list:
<html>
<body>
<form>
<input list="questions" name="questions">
<datalist id="questions">
<option id="1" value="How far is the moon?">
<option id="2" value="whats 9x2">
<option id="3" value="what is a corkscrew?">
</datalist>
<input type="submit"> <!--this is the part where
i am struggling on. i dont know how to show the answer from
id when they click submit-->
</form>
<script>
document.getElementById(1) = "238,900 mi";
</script>
<body>
<html>
First of all, I defined an array of answers, where each index in the array is according to it's question index (first answer for the first question and so on).
Then I'm scanning the entire options (datalist), looking for option that have the same value as of the input field.
When I find it, I just set the value of the input field (listObj) to the corresponding answer from the answers array, and that's all.
I hope it helps you.
let answers = ["238,900 mi", "18", "whatever"];
function submitFunction() {
var listObj = document.getElementById('questions_list');
var datalist = document.getElementById(listObj.getAttribute("list"));
for (var i = 0; i < datalist.options.length; i++) {
if (datalist.options[i].value == listObj.value) {
listObj.value = answers[i];
break;
}
}
return false;
}
<html>
<body>
<form onsubmit="return submitFunction()">
<input list="questions" id="questions_list" name="questions">
<datalist id="questions">
<option id="0" value="How far is the moon?">
<option id="1" value="whats 9x2">
<option id="2" value="what is a corkscrew?">
</datalist>
<input type="submit">
<!--this is the part where
i am struggling on. i dont know how to show the answer from
id when they click submit-->
</form>
<body>
<html>
I need some help with this HTML code I'm trying to improve.
I don't have much HTML knowledge so the most basic solution would be nice.
Currently, the code works fine but I want once the page has loaded for the drop-down option to be that of the selected option that I click Submit with. Same with the slider, if I select 2, I want 2 to be displayed on the new page once loaded.
Is there a way to do this with variables or how?
<div id="input_header">
<div id="logo_div">
<img id="logo" src="static/steering-wheel.svg">
<p id="logo_name">TITLE</p>
</div>
<form id="driver_form" action="compare_driver" method="get">
<p class="label">Vendor:</p>
<select class="driver_input_box" name="driver_vendor">
<option value="Vendor A">AAA</option>
<option value="Vendor B">BBB</option>
<option value="Vendor C">CCC</option>
</select>
<p class="label"># to show: </p>
<div id="count_slider">
<input id="driver_count_id" name="driver_count" type="range" min="1" max="10" step="1" value="5" oninput="driver_count_out_id.value = driver_count_id.value"/>
<output id="driver_count_out_id" name="driver_count_output" >5</output>
</div>
<input id="compare_driver" type="submit" value="Compare">
</form>
</div>
First you need to include some JavaScript there. The easiest (but probably worse) way is to add an script tag to the HTML.
To get the selected option with Javascript, you can check these answers: Get selected value in dropdown list using JavaScript? . The code will be easier to write if you give an id to your <select>, like: <select id="mySelect" class="driver_inpu....
<script>
//check if there's an old selection by the user:
if (sessionStorage.getItem("selectedOption")) {
//to set the selected value:
document.getElementById("mySelect").value = sessionStorage.getItem("selectedOption");
}
//this will set the value to sessionStorage only when user clicks submit
document.getElementById("driver_form").addEventListener("submit", () => {
//to get the selected value:
var selectedOption = document.getElementById("mySelect").value;
sessionStorage.setItem("selectedOption", selectedOption);
});
/*
//use this only if you want to store a new value
//every time the user clicks on another option
document.getElementById("mySelect").addEventListener("change", () => {
//to get the selected value:
var selectedOption = document.getElementById("mySelect").value;
sessionStorage.setItem("selectedOption", selectedOption);
});
*/
</script>
You can put it in window.onload if you want to. This answer should put you in the right track. I'm very tired and I haven't tested it, but it should work.
I working on a contact form. The point is it should be accessible without JavaScript. If JavaScript is avaible I want ask visitors about some details based on their purpose of contact.
HTML could look like this (labels are skipped on purpose, to shorten the code):
<form action="">
<select name="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<button>Submit</button>
</form>
Well, if I could I would just add some areas that would be shown based on "model". But I can't do it because I don't want to show additional fields to people without JS.
It would be like this:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The point is that I will be asking a lot of additional questions. With JS disabled the visitor will be seeing a bloated contact form with all fields and messages.
I'm looking for a solution that would read the value of and inject HTML from JS file into a specific place.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
{{injectedHTML}}
...
<button>Submit</button>
</form>
It sounds strange, but everything must be according to the requirements of local municipal office. They want to show these specific fields only to people with JS.
Maybe they think it is good for accessibility. I'm not sure.
Thank you all.
To simply hide set of elements when JavaScript is disabled you could add ng-hide class to elements that should not be displayed. In example:
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-show="purpose == 'support'" class="ng-hide">
<input type="text" name="customernumber" />
</div>
<div ng-show="purpose == 'interview'" class="ng-hide">
Sorry, I'm not giving interviews
</div>
...
<button>Submit</button>
</form>
The ng-hide class sets display: hidden. When JavaScript is enabled ng-show will evaluate the condition and add or remove ng-hide class from element.
Another fairly simple solution would be to use ng-include to load additional content when appropriate - which obviously would only work when JavaScript is enabled - thus making additional fields hidden when JavaScript is not working.
<form action="" ng-app>
<select name="purpose" ng-model="purpose">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
...
<div ng-if="purpose == 'support'" ng-include="'views/supportField.html'">
</div>
<div ng-if="purpose == 'interview'" ng-include="'views/interviewField.html'">
</div>
...
<button>Submit</button>
</form>
Thanks to miensol I started to think about method using "ng-include". Then I realised one thing: Angular can override the HTML.
So I came with this HTML:
<form ng-controller="ContactController">
<select ng-model="purpose" ng-options="p.title for p in possibilities track by p.value">
<option value="hello">Just saying hi</option>
<option value="support">Customer Support</option>
<option value="interview">Interview</option>
</select>
<div ng-include="purpose.template"></div>
</form>
And this app.js:
(function(){
var app = angular.module('myApp', []);
app.controller('ContactController', ['$scope', function($scope) {
// array with possible reasons, that we use as <option> in <select>
// the "AJ" is added so you can see the difference
$scope.possibilities =
[
{ title: 'AJ Just saying hi', value='hello', template: 'part-support.html'},
{ title: 'AJ Customer Support', value='support', template: 'part-support.html'},
{ title: 'AJ Interview', value='interview', template: 'part-interview.html'}
];
// select default <option>
$scope.purpose = $scope.possibilities[0];
}]);
})();
Still I got feeling it could be written much better (and it's out of my league).
I am creating an Add-On for Google Spreadsheet. When click the search button nothing seems to happen. How does one go about debugging this ?
I am using the Google Apps Script to create the addon. I am using the example of QuickStart, with some changes to reflect my requirements.
Here is my Code
<div class='sidebar branding-below'>
<form>
<div class="block col-contain">
<div class="block form-group">
<div>
<label for="Query-txt"><b>Query Term</b></label><br/>
<input type="text" name="querytxt" id="Query-txt" value="" class="width-100" />
</div>
<br/>
<div>
<label for="Channel-id-dd"><b>Channel</b></label><br/>
<select id="Channel-id-dd" class="width-100">
<option value="UCpZG4Vl2tqg5cIfGMocI2Ag">CFC India</option>
<option value="UCPPkrC9R5ED2R2JRTaQgETw">NCCF Church</option>
<option value="UCL8wQnv6qB7rZtEYfY3vPtw">River of Life Christian Fellowship</option>
</select>
</div>
<br/>
<div>
<label for="Region-Code-dd"><b>Country Code</b></label><br/>
<select id="Region-Code-dd" class="width-100">
<option value="AU">AU - Australia</option>
<option value="GB">GB - United Kingdom</option>
<option value="US">US - USA</option>
<option value="UAE">UAE - United Arab Emerates</option>
</select>
</div>
<br/>
<div>
<label for="Safety-Type"><b>Safety</b></label><br/>
<select id="Safety-Type" class="width-100">
<option value="moderate">moderate</option>
<option value="strict">strict</option>
<option value="none">none</option>
</select>
</div>
<br/>
<div class="block" id="button-bar">
<button class="blue" id="run-Query">Search</button>
</div>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
$(document).ready(function (){
$('#run-Query').click(function () {
Logger.log("Starting");
var query = $('#Query-txt').val();
var channelid = $('#Channel-id-dd').val();
var countryCode = $('#Region-Code-dd').val();
var safety = $('#Safety-Type').val();
google.script.run
.withSuccessHandler(
alert("success");
)
.withFailureHandler(
alert("failure");
)
.withUserObject(this)
.search_all(query, safety, channelid, countryCode);
Logger.log("Complete");
});
});
</script>
I see two problems with your code. Firstly, Logger.log() is an Apps Script server-side method. It is designed to be called from server-side code, for example in the Code.gs file. What you are writing above is the client-side javascript that is executed on the end user's browser. To log here, you do the same thing you would in regular javascript programming and use the console.log() method instead. This will write logging statements to the javascript console (accessible with Ctrl+Shift+J in Chrome).
Secondly, withSuccessHandler and withFailureHandler take as a parameter the method to call during success and failure scenarios and no parameters. The method you define will get the parameter automatically. Notice how they are used in the Quickstart:
...
.withSuccessHandler(
function(returnSuccess, element) {
element.disabled = false;
})
...
To alert on success, like you have above, you need to use something like this:
...
.withSuccessHandler(
function(returnVal, element) {
alert("Call was successful with return value: " + returnVal);
}
)
...
Using these two methods, you should have the tools necessary to debug your code.
Is there a way to place the user's HTML form selections into a table? So, say they select the first option "Apples" from the drop down menu labled "Favorite Fruits". "Apples" would then appear in a table on the same page. Any help is greatly appreciated.
EXAMPLE OF WHAT I WANT TO DO:
I have the following drop down menu. The user selects his or her favorite game, and when they do a new div appears asking why. Each selection must get printed in a table. I am not sure how.
<tr><td>
<script>
var sections = {
'TF2': 'section2',
'why': 'section3',
};
var selection = function(select) {
for(i in sections)
document.getElementById(sections[i]).style.display = "none";
document.getElementById(sections[select.value]).style.display = "block";
}
</script>
<form id="survey" action="#" method="post">
<tr><td><div id="section1" style="display:block;">
<label for="game">Select Your Favorite Game</label>
<select id="game" onchange="selection(this);">
<option disabled selected>Choose</option>
<option value="TF2">TF2</option>
<option value="LoL">League of Legends</option>
<option value="Minecraft">Minecraft</option>
</select>
</div></tr></td>
<tr><td><div id="section2" style="display:none;">
<label for="type">Why do you like it?:</label>
<select id="type" onchange="selection(this);">
<option disabled selected>Options</option>
<option value="fun">Fun</option>
<option value="easy">Easy</option>
<option value="difficult">Difficult</option>
</select>
</div></tr></td>
And I want to display the user's selection in a table on the page. Any ideas?
Take a look at this fiddle I just created. It should get you going.
I have almost no experience with jquery and was able to figure it out quickly, based on the link provided by #Billy Moat above as well as this one on :selected