I would like my page to display a progress bar that fills up as the user selects options on drop-down lists. So far I've been able to set variables to contain the value of the drop-down, and functions that alter the bar's value, but nothing that works together. Here's one of the drop-downs:
<select id="optionA">
<option value=" " disabled selected>Choose One...</option>
<option value="mike">Mike</option>
<option value="ryce">Andrew</option>
<option value="michael">Michael</option>
<option value="dannyl">Danny</option>
<option value="cozz">Cozz</option>
<option value="drew">Andrew</option>
<option value="pete">Pete</option>
<option value="sean">Sean</option>
<option value="dom">Dom</option>
<option value="marc">Marc</option>
<option value="lou">Lou</option>
<option value="rob">Rob</option>
</select>
For now there are two identical drop-downs, so it's id="optionA" and id="optionB". And here's the script I've tried:
var optAVal;
var optBVal;
$('#optA').on('change', function() {
var optAVal = this.value;
});
$('#optB').on('change', function() {
var optBVal = this.value;
});
if (optAVal == " " && optBVal == " ") {
$("#progressBar").attr('value','0')
;}
if (optAVal !== " " || optBVal !== " ") {
$("#progressBar").attr('value','50');
}
if (optAVal !-- " " && optBVal !== " ") {
$("#progressBar").attr('value','100');
}
You can see the idea is that if neither have selections, the bar reads 0, if one or the other are selected, it reads 50, and if both are selected it reads 100, problem is nothing's working properly. I've tried a few different combinations, including nesting the if statements in $('#optX').on('change', function() {}); and this current combination sets the progress bar to 100% on load. Appreciate the help in advance. Thanks!!!
The essential problem, in addition to small errors and typos, is that your conditionals are never called after the initial load. Thus the progress bar never gets updated.
If you use html like this:
<select id="optionA">
<option value=" " disabled selected>Choose One...</option>
<option value="mike">Mike</option>
...
</select>
<select id="optionB">
<option value=" " disabled selected>Choose One...</option>=
<option value="rob">Rob</option>
...
</select>
<progress id='progressBar' max='100' value='0'></progress>
And JQuery like this:
var doneA = false;
$('#optionA').on('change', function() {
if (!doneA) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+50);
doneA = true;
}
});
var doneB = false;
$('#optionB').on('change', function() {
if (!doneB) {
$("#progressBar").prop('value', $("#progressBar").attr('value')+50);
doneB = true;
}
});
The result should be as you desire. Here's a working JSFiddle to verify: http://jsfiddle.net/wLt4z/2/
Edit 1: If you want to be more clever, you could assign each form option a shared class, like class='formOption', and craft a generic bit of JQuery to update the progress bar appropriately. For example:
$('.formOption').data("done", false);
$('.formOption').on('change', function() {
if (!$(this).data("done")) {
$("#progressBar").attr('value', $("#progressBar").prop('value')+100/$('.formOption').length);
$(this).data("done", true);
}
});
Edit 2: Updated to ensure altering a value doesn't increased the completion percentage. In both cases, this is done by means of a simple boolean flag, which in fact supersedes checking the value.
Related
I have two dropdowns, and I want it so that, when the user changes the first dropdown, the second gets updated automatically to the same value. Due to some complicated reasons, I have to trigger the change via an on() delegate event. My code is like this:
<form>
<select id="destino_1">
<option value="268">AAA</option>
<option value="409">BBB</option>
<option value="570">CCC</option>
<option value="895">DDD</option>
<option value="943">Arena</option>
</select>
<select id="origen_2" class="origen">
<option value="268">AAA</option>
<option value="409">BBB</option>
<option value="570">CCC</option>
<option value="895">DDD</option>
<option value="943">Arena</option>
</select>
</form>
And my Javascript is this:
$("body").on('change',"#destino_1", function(){
$("#origen_2").trigger("cambiaOrigen");
});
$('body').on('cambiaOrigen', '.origen', function() {
var nombre=this.id;
var numero=parseInt(nombre.slice(-1));
//alert("Mooooo " + nombre);
if (numero > 1) {
var anterior = $("#destino_" + (numero - 1)).val();
this.find("option[value='" + anterior + "']").prop("selected", "selected").change();
//this.val(anterior);
}
});
I've created a fiddle at http://jsfiddle.net/w7c4o4cd/
As you can see, the event gets correctly triggered, the code gets the value of the first dropdown... but then I can't change the value of the second dropdown. I've tried both ways: with
this.find("option[value='" + anterior + "']").prop("selected", "selected").change();
And also with this.val(anterior);. Neither of them work. When executing in a browser, the error I get in the console is that this.find and this.val() are not functions... and yet, if you try to display this.id, it seems that this is referring correctly to the second dropdown, instead of to, say, body. (Also, if I try to display this, it says that it's an "HTML selectElement").
What's going on?
In your cambiaOrigen handler, this refers to a node not a jQuery object, what you would want is $(this) instead.
Also to set the selected option of a select tag you can simply set its value
this.value = anterior;
http://jsfiddle.net/mowglisanu/w7c4o4cd/2/
$("body").on('change',"#destino_1", function(){ $("#origen_2").trigger("cambiaOrigen");
});
$('body').on('cambiaOrigen', '.origen', function() {
var nombre=this.id;
var numero=parseInt(nombre.slice(-1));
//alert("Mooooo " + nombre);
if (numero > 1) {
var anterior = $("#destino_" + (numero - 1)).val();
//alert("Meeeept " + anterior);
//alert (this);
this.value = anterior;
//this.val(anterior);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<select id="destino_1">
<option value="268">AAA</option><option value="409">BBB</option><option value="570">CCC</option><option value="895">DDD</option><option value="943">Arena</option>
</select>
<select id="origen_2" class="origen">
<option value="268">AAA</option><option value="409">BBB</option><option value="570">CCC</option><option value="895">DDD</option><option value="943">Arena</option>
</select>
</form>
Just change this line
this.find("option[value='" + anterior + "']").prop("selected", "selected").change();
to this
$(this).find("option[value='" + anterior + "']").prop("selected", "selected").change();
Just set the value of the section dropdown based on the value of the first like this.
$("body").on('change', "#destino_1", function () {
$('#origen_2').val($(this).val());
});
$("body").on('change', "#destino_1", function () {
$('#origen_2').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="destino_1">
<option value="268">AAA</option>
<option value="409">BBB</option>
<option value="570">CCC</option>
<option value="895">DDD</option>
<option value="943">Arena</option>
</select>
<select id="origen_2" class="origen">
<option value="268">AAA</option>
<option value="409">BBB</option>
<option value="570">CCC</option>
<option value="895">DDD</option>
<option value="943">Arena</option>
</select>
</form>
I am trying to write a JavaScript function where if value 1 from the first dropdown(pcount) automatically selects value 1 for drop down 2(listedname), But then if anything besides value 1 (2,3,4) is chosen I do not want drop down 2 to do anything except default back to please select if value 1 was selected and then changed to another value. I am very new to JavaScript and programming in general and have not been able to find any examples similar to this. So any help will help!
JavaScript Funtion:
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value = 1){
document.getElementById("listedname").value = 1;
}else
document.getElementById("listedname").value = 2;
}
}
</script>
Dropdown 1 and 2:
<select id="pcount" onchange="leaveChange()">
<option value="" selected="selected">Please Select</option>
<option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
</select>
<select id="listedname">
<option value="" selected="selected">Please Select</option>
<option value="1">Business Name</option>
<option value="2">Individual Owner</option>
</select>
If you are doing your if clause with one equals sign, Javascript will check if your element is set to the new value successfully.
Instead, when you do a comparison, use double equal signs (in your case)
if (document.getElementById("pcount").value == 1){
If anyone is looking for the JavaScript function here you go!
<script type="text/javascript">
function leaveChange() {
if (document.getElementById("pcount").value == 1){
document.getElementById("listedname").value = 1;
}
else if (document.getElementById("pcount").value != 1){
document.getElementById("listedname").value = "";
}
}
</script>
having a bit of trouble here, any help would be greatly appreciated...
I am trying to hide and show a bunch of list items based on several classes assigned to them.
In my JS Fiddle Example I have several items with classes relating to their description.
I have managed to hide and show these, but complex selections are not possible...
example: If I wanted to only see fabrics that are "premium", "blue" and "linen".
Something like this (that works lol) is what I am after...
$('.sel_range').click(function() {
range = document.getElementById("range").value;
if ($('.fabric_option').hasClass(range)) {
$('.' + range).fadeIn('fast', function() {
!$('.fabric_option').hasClass(range).fadeOut("fast");
});
}
});
Something like this should work
var selects = $('#range, #fabric, #colour');
selects.on('change', function() {
var el = selects.map(function(i, item) {
return item.value.indexOf('all_') === 0 ? '' : '.' + item.value;
}).get().filter(function(x) {
return x.length;
}).join('');
$('#fabric_options li').show().not(s?s:'*').hide();
});
FIDDLE
It starts with showing all the list items, then joins the values together to create a clas selector, leaving out the class if all_something is selected etc. and then hides everything that doesn't match, and if nothing is selected excludes everything.
I think it can be solved like this:
var range, fabric, colour;
var updateShown = function() {
$('li').show()
if (range) {
$('li:not(.' + range + ')').hide();
}
if (fabric) {
$('li:not(.' + fabric + ')').hide();
}
if (colour) {
$('li:not(.' + colour + ')').hide();
}
}
// Range
$('#range').change(function() {
range = $(this).val();
updateShown();
});
// Fabric
$('#fabric').change(function() {
fabric = $(this).val();
updateShown();
});
// Colour
$('#colour').change(function() {
colour = $(this).val();
updateShown();
});
With value="" of each select first option
<select id="range">
<option class="sel_range" value="">All Ranges</option>
<option class="sel_range" value="luxury">Luxury</option>
<option class="sel_range" value="premium">Premium</option>
<option class="sel_range" value="base">Base</option>
</select>
<select id="fabric">
<option class="sel_fabric" value="">All Fabrics</option>
<option class="sel_fabric" value="leather">Leather</option>
<option class="sel_fabric" value="linen">Linen</option>
<option class="sel_fabric" value="cotton">Cotton</option>
</select>
<select id="colour">
<option class="sel_colour" value="">All Colours</option>
<option class="sel_colour" value="red">Red</option>
<option class="sel_colour" value="blue">Blue</option>
<option class="sel_colour" value="green">Green</option>
</select>
jsFiddle demo
what about this?
$('#range').on('change',function () {
range = $("#range").val();
$('li').each(function(){
if(!$(this).hasClass(range)){
$(this).hide();
}else{
$(this).show();
}
});
});
// just for range, rest in fiddle
http://jsfiddle.net/J3EZX/6/
If you're using jQuery, just string them together with a . and no space, e.g.:
$(".linen.red.base").text("Help! I'm being replaced!");
This is only for IE.
I have a function noted below it copies the content of the div when the div is clicked. It works fine. It used the getElementById.
I have 19 items I would like to use this for ... 'option1 - option19.
Instead of having to create 19 variables is there any other way of doing this...
I am totally a noob to this stuff....
function CopyToClip() {
var Cdiv = document.getElementById('option1');
Cdiv.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(Cdiv);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';
}
I should mention that these id's are for Divs.
These divs are a show / hide based on a drop down selection.
The drop down has its on function to show the selected div.
The function is:
$(window).load(function () {
$(document).ready(function () {
$('.block').hide();
$('#option1').show();
$('#selectField').change(function () {
$('.block').hide();
$('#' + $(this).val()).fadeIn();
});
});
});
My HTML is:
<div class="col_1">
<h1>communication:</h1>
<div class="box">
<select id="selectField" style="padding-left: 20px;width:175px">
<option value="option1">Device Shipped to ASC</option>
<option value="option2">Device Received at ASC</option>
<option value="option3">ASC Shipped Device to Store</option>
<option value="option4">Device Pick-up Follow-up</option>
<option value="option5">Device Pick-up Final Reminder</option>
<option value="option6">Impress Phase Direct Feedback</option>
<option value="option7">Abandon Notice</option>
<option value="option8">Mailer Shipped to Client</option>
<option value="option9">Mailer Received by Client</option>
<option value="option10">Mailer Pick-up Notice</option>
<option value="option11">Mailer Final Pick-up Notice</option>
<option value="option12">Mailer Failed to Pick-up</option>
<option value="option13">Mailer Return Defective Device Notice</option>
<option value="option14">Mailer Final Return Defective Device Notice</option>
<option value="option15">Mailer Failed to Return Defective Device</option>
<option value="option16">Mailer Defective Device Received at ASC</option>
<option value="option17">Mailer Charges to Customer</option>
<option value="option18">Mailer Process Confirmation</option>
<option value="option19">Quote Un-replied</option>
</select>
<div id="option2" class="block" style="background-color:white" onClick="javascript:CopyToClip()"> blah </div>
Had I have 19 of this divs.
I don't know if this helps ... Sorry I am in way over my head on this one.
I had to hack things about a little, and your clipboard code will not work on all browsers:
JSFiddle: http://jsfiddle.net/THU5f/2/
function CopyToClip($div) {
var div = $div[0];
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
alert("Copied: " + div.html());
}
div.contentEditable = 'false';
}
$(function () {
// Hide copy button
$('#copy').hide();
// Hide all content divs
$('.content').hide();
$('#selectField').change(function () {
// Show the copy button
$('#copy').show();
// Hide all content divs
$(".content").fadeOut();
// Show the select content div
$('#' + $(this).val()).fadeIn();
});
$('#copy').click(function(){
// Get the div the current selection points to
var $div = $('#' + $('#selectField').val());
// Copy the div to the clipboard
CopyToClip($div);
});
});
I added comments throughout. Hope this helps.
I've been working on similar thing lately. I was supposed to show/hide DIV depending on the selection. The HTML code is generated and there can be 1 to 8 selects generated, with each dependent div shown under the its select. I came up with this solution.
"Second half" of the code basically finds all select elements with given ID, loops trough them and depending on the selected value, shows or hides the div. I had to use this selectors: $('*[id*=delegate_form]') and $('*[id*=show_hidden_delegate'), because if I used $("#delegate_form") the code only affected the element with index 0. I have no idea why.
First half of the code handles the same situation on the read-only page.
I'm using jQuery 1.9.1 and jQuery Mobile 1.3.1, and I have HTML like this:
<p>
How many days did your menstrual cycle last?
<select id="menstrualCycle" onclick="changeFunc('menstrualCycle')">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</p>
Then I have a JS like this:
function changeFunc(select) {
var selectBox = document.getElementById(select);
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if (select == 'monthCycle') {
monthDays = selectedValue;
console.log("Month value is: " + monthDays);
} else if (select == 'menstrualCycle') {
menstrualDays = selectedValue;
console.log("Menstrual value is: " + menstrualDays);
} else if (select == 'lutealPhase') {
lutealValue = selectedValue;
console.log("Luteal value is: " + lutealValue);
}
}
The point is that I get the values, by clicking the options or selecting other options. But when the page is open, where my page id is "ovulInfoPicker", by defualt it doesn't get the first values. I want to get the first values by default, without changing the values or pressing the otions.
Trigger the change event programmatically: http://api.jquery.com/trigger.
$('#id1, #id2, #id3').trigger('change');
You trigger the event which will execute the event handlers without actual user interaction.
<option value="3" selected="selected">3</option>