I visited a website a few weeks ago and came across a dynamic drop down menu. I came across a functionality that I am now trying to replicate but do not know how. In the dropdown you picked the desired number of cars and then it reiterated input fields according to the number of cars chosen. I believe this was done through javascript and a loop was involved. Is there a term for this action or way to display things? Also an example of how to accomplish something similar would help?
This is done using java script ,
and here a hint
create a div and put inputs that you want inside it
<div id='controls'>
<input type="text" name="car_name" />
</div>
and using jQuery change event you can iterate view of controls div
i.e if you have a div with id container , where you will place new controls
$('select').change(function(){
var number = parseInt ($(this).val ());
//And do for loop here
for (var i=1;i<=number;i++){
$('#controls').clone().appendTo($('#container');
}
});
Please enhance this code to fit your requirement.
It's unlikely that this would be done with PHP, since that would require a page refresh.
It's more likely that it would be done with Javascript listening for the onChange event of the Select element (the drop down menu). When the event is detected, Javascript could show / hide div elements (one for each Car), or dynamically create / destroy them.
If you want it without refresh, you need use javascript, i have made one example here using jquery:
HTML CODE
<label>How many cars?</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="fields"></div>
JAVASCRIPT CODE
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option){
var content = '';
for (var i = 1; i <= option; i++){
content += '<div id="field_'+i+'"><label>Car '+i+'</label><br /><label>Model:</label> <input id="model_'+i+'" /><br /><label>Maker:</label> <input id="maker_'+i+'" /><br /><label>Year:</label> <input id="year_'+i+'" /><br /><div><br />';
}
$('#fields').html(content);
}
Here the example: http://jsfiddle.net/zbzjm/1/
Related
I have been stuck on this problem for hours and I am going mad ! I need a dropdown of checkboxes - which I populate dynamically into a select tag. I also need to append each multiselect dropdown that I deep-clone with jquery to a number of <div> elements. However, every time I do this the cloned element is rendered as a list of multiselectable items (and not as a dropdown and loses all its styling). This is the multiselect container that I would like to add my checkboxes to:
<select class="multiselect1" multiple="multiple">
</select>
I finally initialize each cloned dropdown by calling .multiselect(); The library I am using for this is: http://davidstutz.github.io/bootstrap-multiselect/
$('.multiselect1').multiselect();
var filterClone = $('.multiselect1').clone(true);
//filterClone.multiselect();
$('body').append(filterClone[0]);
When the above lines execute, the select element is indeed present in the body but is invisible. When I remove the style attribute the element becomes visible but is rendered as a list of multiselectable items (which is expected). But why is the cloned multiselectable dropdown not displayed at all in the first place ?
Any suggestions that could lead me to a solution (or the solutions itself!) using javascript or jquery would be most appreciated.
Well to make this work you need JQuery. Did you include JQuery? If you didn't you can use this: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> Did you upload all the files to your server?
Try this code on your website. Does it work?
HTML:
<select id="SOExample" multiple="multiple">
<option value="Love it!">Love it!</option>
<option value="Hate it!">Hate it!</option>
<option value="I don't know...">I don't know...</option>
</select>
JS:
<script type="text/javascript">
$(document).ready(function() {
$('#SOExample').multiselect();
});
</script>
HTML code:
<div class="controls" id="display">
<input type="text" name="demos" class="" value="1" id="displays"/>
<select class="input-medium">
<option value="">Select</option>
<option value="1">II</option>
<option value="2">AS</option>
<option value="3">AR</option>
</select>
</div>
Jquery code:
$("input[name='demos']").each(function(i,e){
var SValue = $('#displays').val();
$('option[value=' + SValue + ']').attr('selected',true);
});
I will be displaying the above html code as dynamic one for multiple times.
I will be comparing the value of #displays with the select options and make the select option as selected.
The value in #displays comes from database.
Since, am using multiple times the above html code when I pass the different values from database to that multiple code. All the multiple code shows only the first html code selected value.
However, I want all the multiple html code to show the selected value to their respective #displays.
In debug I found that $("input[name='demos']").each(function(i,e){ is not performing correctly because when i put console for Svalue it shows only the first html code input value for all the multiple html codes.
How can I fix this??
In HTML, the ID attribute is unique. You cannot use the same ID for more than one control in the same page. So, you'll need to use another approach.
I would do something like:
$("div.controls").each(function() {
$(this).children("select").eq(0).val($(this).children("input").eq(0).val());
});
EDIT: And it works, I've just made this demo!
Try this:
$("#displays").blur(function () {
var data = $(this).val();
$("#select > option").each(function () {
if (this.value == data)
$(this).attr("selected", "selected");
});
});
This example will get the input from user then the system will select the matching value.
Here is the fiddle: http://jsfiddle.net/t6kBY/
try
$("input#displays").each(function(i,e){
});
I'm trying to create a toggle that will display:block and display:none for different blocks of code similar to the code box at lob.com beside "
An intuitive RESTful API".
I have been trying to get this to work based of this jsfiddle but I can't get it to work but I'm not sure if this code is what I need to achieve what's done at lob.com
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
JavaScript:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
Ultimately it will need to be able to toggle between the two drop downs like on lob.com so there would be 8 sets of divs if there were 4 options on the left and then 2 on the right.
Could anyone point me in the right direction to learn how to do this as I'm not sure if I should be using JQuery or not. Basically I'd like to know exactly how lob.com did it so I can go down the right road!
Thanks if anyone can point me.
The website lob.com is build up with alot of pre's inside a container. Start with the HTML:
<pre class="jayOption prettyprint" style="display: none;"><code>Jay</code></pre>
<pre class="samOption prettyprint" style="display: none;"><code>Sam</code></pre>
<pre class="admOption prettyprint" style="display: none;"><code>Admin</code></pre>
Adding your selectbox:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="jayOption">Jay</option>
<option value="samOption">Sam</option>
<option value="admOption">Admin</option>
</select>
we can toggle the <pre> elements with the following code:
function admSelectCheck(nameSelect)
if(nameSelect.value){
var preElements = document.getElementsByClassName('prettyprint');
for(var i=0; i < preElements.length; i++){
//if the class contains the selected value, then show it, else hide it
preElements[i].style.display = preElements[i].classList.contains(nameSelect.value)?'block':'none';
}
}
}
Making use of classList
fiddle
You can't hide an element of a dropdown list like that. Try setting it's "disabled" attribute instead. Either that, or recreate the list dynamically.
I forked your jsfiddle to give an example of how you might acheive this using a naming convention on the divs like
<div id="admDivCheck0" style="display:none;">
corresponds to the value in
<option id="admOption" value="0">Admin</option>
http://jsfiddle.net/v7Rmh/ here is the fiddle :D
I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.
I want to fill and submit a form like below:
<form action="http://www.test.com/school" method="post">
<select name="days">
<option value="2">Monday</option>
<option value="1">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<input type="submit" value="submit" id="submitday">
I don't want to select from option so I have to create another form.
<form action="http://www.test.com/school" method="post">
<input type="text" name="days">
<input type="submit" value="submit" id="submitday">
When I want to choose Wednesday, I need to type the value 3 in a text box then click submit. It works.
But I want to know if any method that can make me just type Wednesday in text box and not the value and post it without any problem?
Your question isn't well defined enough and having an explicit goal always helps.
1.) Even though we're pretty much if not outright beyond the point where it's important to use id="same_as" name="same_as" having the same values I still highly recommend this practice (old Internet Explorer bug). You'll want to make good use of the label element (clicky clicky) as it gives users more area to click to give focus (element, checkbox, text, etc).
2.) You'll want to use the in operator to discover what tools you have available...
XHTML
<textarea id="dom_methods"></textarea>
JavaScript
for (i in document.getElementById('select_element_id')
{
document.getElementById('methods').value = document.getElementById('methods').value+'\n'+i;
}
This will let you discover different methods/functions/objects/etc that are associated with in example the select element. Keep in mind that each object may have it's own children. You can do...
for (i in window) {}
for (i in window.document) {}
for (i in document.getElementById('select_element_id')) {}
Good resources including Mozilla Developer Network here...
https://developer.mozilla.org/en/
My absolute biggest piece of advice is do not use frameworks as you will quickly veer off from learning the actual language and immediately inherit some high level issues you will not become aware of. People posting dollar signs ($) in JavaScript posts are usually good give-aways that they have not answered your question unless you have explicitly asked for a framework related answer.
If you revise your question and reply to my answer I'll be happy to append my answer to apply more directly to what you're trying to accomplish.
PART TWO
If you want to create an element you should use the createElement method...
Create the element and give it the value you want...
var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);
IMPORTANT! JavaScript has QUIET errors that you will battle for days before posting about them and someone casually pointing them out. So be exceptionally wary of using short names for variables (e.g. do not use var in = ''; as "in" is an operator and will cause a silent error) where your code simply won't execute or do odd stuff.
Now you have some VALID choices for putting this new element in to the page...
1.) Using appendChild will put the element at the end of the parent container...
document.getElementById('form_id').appendChild(d);
You should use fieldsets (usually one is fine) as a direct child to a form element...
<form action="" method="post">
<fieldset>
<!--everything form related goes here -->
</fieldset>
</form>
...in which case you could do the following (to help you get comfortable with examples and see them actually work before you)...
document.getElementById('form_id').getElementsByTagName('fieldset')[0].appendChild(d);
Notice the [0], it refers to the first fieldset element, if there were two and you wanted to append the new element in to the second you would use [1] (and [2] for the third and so forth). Also if the page only includes a single form and a single fieldset you could drop the first part (just so you can see how things are constructed)...
document.getElementsByTagName('fieldset')[0].appendChild(d);
2.) You'll usually want to use insertBefore...
var f = document.getElementById('form_id');
var element_parent = f.getElementsByTagName('fieldset')[0];
var element_before = f.getElementsByTagName('select')[0];
parent_element.insertBefore(d,element_before);
A little more information here...
https://developer.mozilla.org/en/insertBefore
NEVER EVER FOR ANY REASON USE INNERHTML!!! Lazy programmers use it all the time and fail to realize that it does NOT correctly register the DOM so elements associated with that proprietary Microsoft JScript method will NOT be seen when you try to work with them. For this reason alone you should avoid using frameworks such as jQuery as they jump to use the easiest things. Easy doesn't get the job done, easy makes the job look done long enough to make a single paycheck and then if you don't one day end up rewriting ALL of your code in that given area (long after you remember working with it and what you were trying to do) you'll be in a world of hurt.
PART THREE
JavaScript is an EVENT driven language, events are DOM based. The DOM and JavaScript are different things very closely tied together.
You can read more about DOM events here...
https://developer.mozilla.org/en/DOM/event
...and there is a good list of DOM events here...
http://en.wikipedia.org/wiki/DOM_events#HTML_events
In order to take advantage of the code you need to determine the event that best fits with your goal. Are you trying to do this when the form is submitted? That would be onsubmit. Are you trying to do this when the page loads? That would be onload.
Generally you can reuse events endlessly though you can only execute the onload event once.
If you visit my site and look at the JavaScript code you'll notice THREE things...
1.) An index.js file that is nothing but functions.
2.) An onload.js file with limited number of global variables (variables defined outside of a function) and the anonymous onload function.
Since you can only execute the onload event once if you want to do multiple things (e.g. execute multiple unrelated functions) you can use an anonymous function which is simply a function without a name...
window.onload = function()
{
my_func1();
my_func2();
my_func3();
}
Keep in mind that you should always keep script elements inside of the <head> element and not the <body> element otherwise it will lead you down a path of poor coding practices.
So if you create a standalone test file it may look something like this...
example.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<script type="application/javascript">
//<![CDATA[
function form_days()
{
var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);
d.parentNode.insertBefore(input_day,d.nextSibling);
}
function get_methods(o)
{
var m = document.getElementById('dom_methods');
var dom_list = new Array();
for (i in o)
{
dom_list.push(i);
}
dom_list.sort();
for (var i=0; i<dom_list.length; i++)
{
m.value = m.value+dom_list[i]+'\n';
}
}
window.onload = function()
{
form_days();
get_methods(document.getElementById('days').options[document.getElementById('days').selectedIndex]);
}
//]]>
</script>
<style type="text/css">
label {border: #000 dotted 1px; padding: 0px 2px 0px 2px;}
label:hover {border: #000 solid 1px;}
textarea {height: 500px; width: 400px;}
</style>
</head>
<body>
<form action="http://www.test.com/school" method="post">
<fieldset>
<label for="days">Day:</label>
<select id="days" name="days">
<option value="2">Monday</option>
<option value="1">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<div><textarea id="dom_methods"></textarea></div>
<div><input type="submit" value="submit" id="submitday" /></div>
</fieldset>
</form>
</body>
</html>
You should be able to copy-and-paste this to a file, name it example.xhtml. It's all functional, tested and working at the highest standards. Keep in mind that Internet Explorer 8 and older is not capable of XHTML (application/xhtml+xml) or comprehending the CORRECT media type/mime for JavaScript which is application/javascript so if you require backwards compatibility using text/javascript on script elements is not valid though will work.
well, you could change the values of the options, for example using jquery like this:
$('select[name=days] option').each(function(){
$(this).val($(this).html());
});
http://jsfiddle.net/RCevC/
I think you're trying to update a text input when a user picks a selection from the dropdown? Try this:
html:
<select name="days">
<option value="2">Monday</option>
<option value="1">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<input type="text" id="your_input" /> <!-- I added this field to your code -->
<input type="submit" value="submit" id="submitday">
javascript (jquery)
$('select[name=days]').change(function(){
$('#your_input').val($(this).val());
});
http://jsfiddle.net/z3peu/2/