In all honesty my brain is rather fried after getting this far today.
I am trying to save the state of multiple select drop downs on page using this plugin:
http://plugins.jquery.com/project/cookies
I am using this jQuery to set cookies for the different title drop downs based on their ID:
$(document).ready(function() {
// hide 'Other' inputs to start
$('.jOther').hide();
// event listener on all select drop downs with class of jTitle
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
//$(this).nextAll('.jOther').hide();
$(this).parent().find(".jOther").hide();
} else {
//$(this).nextAll('.jOther').show();
$(this).parent().find(".jOther").show();
}
// Sets a cookie with named after the title field's ID attribute
$(this).cookify();
});
$(".jTitle").each(function(){
// get the id of each Title select drop down
var $titleId = $(this).attr('id');
// get the value of the cookie for each cookie created above in $(this).cookify()
var $cookieValue = $.cookies.get($titleId);
// if value is 'Other' make sure it is shown on page refresh
if ($cookieValue == 'Other') {
// Show the other input
$(this).parent().find(".jOther").show();
// set select value to 'Other'
$(this).val('Other');
} else {
// set to whatever is in the cookie
$(this).val($cookieValue);
}
});
});
What is happening is that when no cookies are set the select drop down is displaying a blank option when i want it to default to 'Please select'.
Sample HTML that i am using:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
So if it is the first time the user is on page and they have not clicked any drop downs the first value will be null rather than 'Please select'.
I'd change this portion, if the cookie isn't there, just don't mess with the dropdown:
$(".jTitle").each(function(){
var $titleId = $(this).attr('id');
var $cookieValue = $.cookies.get($titleId);
if ($cookieValue == 'Other') {
$(this).parent().find(".jOther").show();
$(this).val('Other');
} else if($cookieValue) {
$(this).val($cookieValue);
}
});
The only change is to add an if check on the end, see if there is a cookie...if not the default position of 0 in the dropdown (browser default) will be left alone.
Related
I'm working on an html page that will allow users to get pre-populated text filled into the text input field, based on the option they select. I'm trying to do this via javascript but I can't get the function to "fire" when I do an onchange within the select input field.
Trying to figure out what I'm doing wrong, either with the function, the innerHTML, or both.
Example code I'm working on below:
HTML
<label for='accountg'>Goal</label>
<select id="accountg" name="accountg" style="border-radius:1px;border:1px solid #003399;font-size:14px;width:50px;" onchange="accountSelect()">
<option value=''></option>
<option value='1'></option>
<option value='2'></option>
<option value='3'></option>
<option value='4'></option>
<option value='5'></option>
</select>
<input type="text" id="account1" name="account1" style="width:900px;" title="140 character maximum" />
JAVASCRIPT
function accountSelect() {
var aSelect = document.getElementById('accountg').value;
var account1 = '';
if(aSelect == '') {
} else if(aSelect == 1){
if(account1 == '')
{
var act1 = 'Outlines written policies and procedures to ensure consistent adherence by staff.';
document.getElementById('account1').innerHTML = act1;
} else {}
}
}
<input> doesn't have an inner content, it has a value though:
document.getElementById('account1').value = act1;
I am in the process of building an e-Commerce shop and have hit a small bump in the road for my actual product page. Based on any product options set that would add to the price if selected, I would like to be able to update the price on the page live when these options have been added. I have managed to iterate through every element with a "data-price-effect" attribute attached to them, HOWEVER, when it comes to a select element, I would need to check if the item is selected as an option, each option has their respective price change attribute of course, but the value would only update to the actual select element.
Here is my code upto now:
function updatePrice(){
$('[data-price-effect]').each(function( index ) {
// do something
});
}
Basic HTML set-up to explain further:
<form>
<input type="text" name="foo" onchange="updatePrice();" data-price-effect="10.00" />
<select name="bar" onchange="updatePrice();">
<option selected value="Item1" data-price-effect="5.00">Item 1</option>
<option selected value="Item2" data-price-effect="8.00">Item 2</option>
<option selected value="Item3" data-price-effect="10.00">Item 3</option>
</select>
</form>
I have NO idea how to even logically do this, not even with some huge messy code. Any pointers here from someone more experienced with Javascript?
Instead of having "updatePrice()" on each element, you could have a listener for all form elements for the function:
var EffectElements = $('form input[data-price-effect], form select');
EffectElements.on('change', function() {
var PriceEffect = 0;
EffectElements.each(function() { // Loop through elements
if ($(this).is('select')) { //if this element is a select
$(this).children().each(function() { //Loop through the child elements (options)
if ($(this).is(':selected')) { //if this option is selected
PriceEffect += parseFloat($(this).attr('data-price-effect'));
}
});
} else {
PriceEffect += parseFloat($(this).attr('data-price-effect'));
}
});
});
You could then use the PriceEffect variable to update your price on the website.
Ultimately it's the IS function doing the dirty work you needed ~_o
Working Example
I have an ecommerce website with a <span> that contains the SKU of each product on the product detail page as follows:
<span class="VariationProductSKU">052077</span>
When the customer selects a size in the following <select> menu...
<div class="productOptionViewSelect">
<select id="4ab0094cccc675de3daaa83d6b1819e2" class="validation" name="attribute[110]">
<option selected="selected" value=""> -- Please Choose an Option -- </option>
<option value="69">S</option>
<option value="70">M</option>
<option value="71">L</option>
<option value="72">XL</option>
<option value="73">XXL</option>
</select>
</div>
the SKU displayed in the <span> tag is dynamically updated as follows (in this example, they selected size "L"):
<span class="VariationProductSKU">052077.L</span>
I need to get the value of the <span> tag containing the new dynamically updated SKU using jQuery. I've tried the following jQuery code, but it seems to always be passing me back the previous value of the <span> tag and not the new value.
if ($('div.productAttributeList').html() !== ''){
$("div.productOptionViewSelect select").on( 'change', function () {
var val = "";
val = $('span.VariationProductSKU').text().trim();
alert(val);
});
}
Any insight into how I can get the correct value from the <span> tag would be greatly appreciated!
Try waiting a bit for the remote script to finish:
if ($('div.productAttributeList').html() !== '') {
$("div.productOptionViewSelect select").on('change', function () {
var val = "";
setTimeout(function() {
val = $('span.VariationProductSKU').text().trim();
alert(val);
}, 50); // adjust this value until it's working reliably
});
}
I'm having trouble trying to accomplishing this.. Whatever option I select from a dropdown list named programs_dropdown I want to add to a text field named programs_input and separate the options values by a comma.
e.g. php, jquery, html
Below the dropdown list I have an add div. On click, it should add what I selected from the dropdown to the text field.
$(document).ready(function(){
$('#add').click(function() {
var programs = $("#programs_dropdown").val(); //get value of selected option
$('#programs_input').val(programs.join(',')); //add to text input
});
});
HTML
<select name="programs_dropdown" id="programs_dropdown">
<option value="php">php</option>
<option value="jquery">jquery</option>
<option value="html" selected="selected">HTML</option>
</select>
<div id=add">Add</div>
<input type="text" name="programs_input" id="programs_input" />
I'm getting skill.join is not a function
The select has to multi option if you want to select multiple. Change it to
<select name="programs_dropdown" id="programs_dropdown" multiple>
Then it would start working.
Demo
EDIT:
$(document).ready(function(){
$('#add').click(function() {
var program = $("#programs_dropdown").val(); //get value of selected option
var programs = $('#programs_input').val().split(",");
if (programs[0] == "") {
programs.pop()
}
if ($.inArray(program, programs) == -1) {
programs.push(program);
}
$('#programs_input').val(programs.join(',')); //add to text input
});
});
DEMO
I think this is what you require Demo
I have a form that has two drop down fields lets say A is one and B is another. I want the drop down box B to be disabled until one of the value in the drop down A is selected .
How should I write a Java script?
Use the onchange event of dropdown A to check it's value and change the disabled property of dropdown B:
document.getElementById("dropdown_A").onchange = function ()
{
if (this.selectedIndex == 2) // if the 3rd option is selected
document.getElementById("dropdown_B").disabled = true;
}
Note this code needs to run after the dropdown A element (or the entire document) has been parsed.
For your dropdown_b, make the disabled property = "disabled"
for your dropdown_a, make the onchange to a function that will change dropdown_b's disabled property.
<html>
<head>
window.onload = function()
{
dda = document.getElementById("dropdown_A");
ddb = document.getElementById("dropdown_b");
dda.onchange = function()
{
if(dda.options[dda.selectedIndex] != "")
ddb.disabled = "";
};
}
</head>
<body>
<select id="dropdown_A">
<option value="" selected="selected"></option>
<option value="asdf">asdf</option>
<option value="12345">12345</option>
</select>
<select id="dropdown_B">
..
</select>
</body>
</html>
Basically, until the user selects an actual option nothing will happen... so the blank option [""] won't deselect the other select.