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
Related
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).
I've created a simple select menu
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
However, when I click on the select menu, nothing happens.
I've attached an jQuery onclick listener to determine if the click is being registered and it is. However, the options are not being displayed.
Is there any particular reason why the options list would not be displayed?
CSS rules as requested:
select {
height: 25px;
background: #FFFFFF;
}
$('.element').on('click', function(){
console.log('clicked');
});
Check this code:
### Listbox
http://jsfiddle.net/4jkE8/2/
Try this on your css:
select {
height: 25px;
background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
console.log('clicked');
});
Also I think that you have a Javascript or Jquery file that is making conflict, try creating this on your view:
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<script type="text/javascript">$.noConflict();</script>
Change your class name to something different. Then instead of using it as a class change it to an id. Then in your jQuery detect the on change event. Usually when having a select option you only need one of them. The id attribute is meant for when there is only one one of that element on a page.
I feel fairly certain that the click event does not work for all browsers on a select list. You may want to check out this question: Click event on select option element in chrome
HTML Code:
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
JavaScript Code:
$('#status').on('change', function(){
console.log('changed');
});
So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON
Here is my select box:
<select id="category">
<option value="">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?
Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.
The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.
Your code for the "Pick a choice!" option will look something like this:
<option disabled="disabled">Pick a choice!</option>
I hope it helps.
CSS Only Sol'n
So, I know this post is quite old now, but a css only solution wasn't offered... Much more efficient way of accomplishing this. Notice the first <option> doesn't have a value attribute; this allows it to effectively placehold.
#category:focus option:first-of-type {
display: none;
}
<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>
Here is some workaround. Don't know wether this is suite your requirement.
<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{
var obj=document.getElementById("category");
obj.remove(0);
}
function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>
<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
<option value="0">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
Try this
$("#SelectID option:first").remove();
i need to create html code, in which if user selects an item from drop down list and click button then it will go to respective link.
<select name="myList">
<option value="Google" />Google
<option value="yahoo" />yahoo
<option value="Ask" />Ask
</select>
if user selects Google from drop down list and clicks button, then page should be redirected to www.google.com and if it selects yahoo and clicks button should go to www.yahoo.com
I would like to mention that I need The button in this scenario.
I don't want to go respective site on drop down selection.Only after clicking the button.
Thank you in advance.
HTML:
<select name="myList" id="ddlMyList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" value="Go To Site!" onclick="NavigateToSite()" />
JavaScript:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.location = selectedVal;
}
You could also open the site in a new window by doing this:
function NavigateToSite(){
var ddl = document.getElementById("ddlMyList");
var selectedVal = ddl.options[ddl.selectedIndex].value;
window.open(selectedVal)
}
As a side note, your option tags are not properly formatted. You should never use the <... /> shortcut when a tag contains content.
First, change the option values to the URL you want to target:
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
Next, add an ID to the select so you can target it:
<select name="myList" id="myList">
Finally, add an onclick method to the select control to handle the redirect:
<input type="button" onclick="document.location.href=document.getElementById('myList').value">
<select name="myList">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.ask.com">Ask</option>
</select>
<input type="button" onclick="window.location=document.myList.value" />
Using JavaScript, you can attach an onclick event to the button. In the event handler, you can use an if statement to check which value was selected in the select list, and use window.location to redirect the user to the appropriate URL.
I would suggest changing the value of the option elements to be the required URL, and you can then simply grab the value and go to that URL, instead of having to check which option was selected.
onclick()="window.location.href='page.html'"