Develop Reference

jQuery change input value on product page that will carry over to cart

I'm using some jQuery to set the value of a specific select option; I'm trying to make it so if the user selects a certain option they have to buy the set quantity (10 in this case). I'm using val(), which sets it, but when I add the product to the cart, the cart page only shows 1. Is there a different jQuery function I should use, or does what I want to accomplish involve much more code?
jQuery(function($) {
$('form').on('change', '#purchase', function(){
if($(this).val()=="Table of 10") {
$('input[type="number"]').val("10").prop('disabled', true);
}
});
});

it's hard to debug with all the wordpress/woocommerce code around,
I think i've found the problem though.
You're not only changing the value to 10 but you're also disabling the element which prevents it from being submitted. instead of disabling you should make it readonly:
jQuery(function($) {
$('form').on('change', '#purchase', function(){
if($(this).val()=="Table of 10") {
$('input[type="number"]').val("10").prop('readonly', true);
}
});
});
BEWARE! this does prevents most users from entering less but someone experienced with code can inspect the code, remove the readonly or disable tag and just change the value. you have to check for invalid values server side.

Best way to assign value from radio button selection

I have created this little jsbin, with the framework for my use case: http://emberjs.jsbin.com/kufijixicu/1/edit?html,js,output
What I have tried to achieve in various ways, is to be able to assign the color value based on the selection in the list of radio buttons. I believe there to be a simple solution to this.
The solution must also provide a way where a potential existing value is already selected in the list. So if color is already selected, the selected one should be checked in the list.
Current solution
My current solution may be irrelevant, but I'll post it here for context.
As mentioned, I've tried various solutions. The one I have in my application at this moment works as described, it's buggy and messy which is why I'm looking for a better solution:
The ColorController has an action, which is attached to what would be the <li> in above jsbin:
selectColor: function(color) {
this.send('setColor', color);
this.forEach(function(item) {
item.set('isChecked', item.get('model') == color);
});
}
The IndexController has the setColor action:
setColor: function(color) {
this.set('color', color);
}
And the initial selection is set through this observer on the ColorController:
colorsChanged: function() {
if (this.filterBy('isChecked', true).get('length') == 0) {
var selectedColorId = this.parentController.get('model.color_id')+'',
selectedColor = this.filterBy('id', selectedColorId);
if (selectedColor.get('length') == 0) return;
selectedColor.objectAt(0).set('isChecked', true);
}
}.observes('this.[]')
This seems way too messy, but it also doesn't work 100%. For instance, a click on the radio button itself will actually un-check the radio button again.

In Ember, things like radio buttons and checkboxes are best wrapped up in components. Unfortunately, a few edge cases have prevented Ember from shipping a radio button component as part of core.
The first thing I'd do is see if someone else has already implemented this. Are you using Ember CLI? If not, you should be. Browsing Ember Addons I find two radio button components.
I'd give ember-radio-button a shot.

Have a button open the right form JQuery

I have a while loop in my php page which sets a different id for every button and form through a counter variable. Every button has to open a different form (they each have different default information preselected, this is for a prescription renewal ability). I can get this to work by having in my javascript a click function for every id which calls a show on the right form. But, obviously this is not scalable, and so it cannot adapt to the amount of prescriptions I have. Looking through the web, I saw people using classes and the id starts with solutions to this problem. However, when I use this solution, the buttons open all the forms... not the desired behavior. Currently my javascript function is the following:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
Like mentioned above, the function does get called by all different IDs button. That code however opens all the forms every time one of the buttons get click. IDs are actually of the form add-renew-form0, add-renew-form1, add-renew-form2... (same pattern for add-renew-link). Forms and links with the same number at the end are meant to be linked. Does anybody know how I can achieve this? Thanks a lot!!

You can't have multiple DOM elements with the same ID. What you can do here is to assign classes for the elements:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
And then use .each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
You can check out the JSFiddle here.

You're close. The $('[id^="add-renew-form"]').show(); is going to match ALL ELEMENTS that start w/ "add-renew-form" as the id, so that's why you're experiencing all forms being shown when clicking any link/button.
You can use a regex to pull the number from the end of the id to find a match on the associated form as below:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/\d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
This jsbin has a full working example.
http://jsbin.com/xicuwi/1/edit

Try, using the .each() method:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});

Prevent select option from changing back to default

I have a page that has 6 options in a drop down menu. I use the below code to make the default select option "Full Name"
$(function(){
$('select option[value="Full Name"]').attr("selected",true);
});
this works fine however since the page is called on itself and I change the option to search for Team for example, when the page loads the default option will obviously change back to Full Name. I need to change it back to what was previously selected.
This sounds easy to do and I'm just coming up with a blank at the moment.
Thanks for your help.

You will need to store the state of the dropdown either using server or client side technology.
In client side you can use a cookie or html5 storage like local storage to store the selected value and when the page is revisited and there is a stored value then you can select that value instead of the default value
If you are planning to use cookie to store the information, then you can think of a jQuery plugin like this or this
An abstract implementation might look like
$('select').change(function(){
storeValue('mykey', $(this).val());
})
function storeValue(key, value){
$.cookie(key, value)
}
function getValue(key){
return $.cookie(key);
}
$(function(){
var val = getValue('mykey') || 'Full Name';
$('select option[value="' + val + '"]').prop("selected",true);
});

how to hide field in same row as field its dependent on

I'm pretty novice at jquery but I have a table with a field in each row that is dependent on another field (checkbox) in the row. Since its in a table I need to handle them in bulk. I don't think I'm using next() correctly but I'm trying to grab the next .subnet_mask since it will be the one in the same row as hide it. I'll also have to update it once I get that far so that it handles hiding and showing if the checkbox is checked or not.
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$('.subnet_mask').next().hide();
});
});
});
Any help is appreciated!
EDIT: ok ok :) well the page is actually written in VisualForce (for salesforce). For simplicty sake lets say its just a form wrapped around a table (up to 20 rows representing different records) displaying a checkbox field with the class .dhcp and a field after it called .subnet_mask that should be shown/hidden based on the checkbox. Is that helpful?

I'd rather do this
$('.dhcp').on('click', function() {
$(this).nextAll('.subnet_mask').toggle();
});
Then you show/hide the next .submask (assuming one .submask per <tr>) each time you click the .dhcp

I'd suggest the following, though this suggestion may well change once I see the relevant HTML:
$('.dhcp').click(
function(){
$(this).closest('tr').find('.subnet_mask').hide();
});
This assumes that there will be only one .subnet_mask element per row (otherwise this will hide all of them) in response to the click event. You mention that this depends upon a checkbox, so perhaps the following would be better, using the change() method:
$('.dhcp').change(
function(){
var that = $(this);
if (that.is(':checked')) {
that.closest('tr').find('.subnet_mask').hide();
}
else {
that.closest('tr').find('.subnet_mask').show();
}
});
References:
change().
:checked selector.
click().
closest().
find().
hide().
is().
show().

You're using next incorrectly. It should be more like this:
$(function() {
$('.dhcp').each(function() {
$(this).click(function(){
$(this).next('.subnet_mask').hide();
});
});
});
For this case, I'm assuming that .dhcp and .subnet_mask are indeed siblings, wit the latter coming immediately after the former. Otherwise, .nextAll() can be substituted for .next()
Edited as per point below.