We Keep Coding

Jquery - serialize form fields in DIV's by class?

Is it possible to get form field data and serialize it by using the class assigned to two divs ?
I have 4 divs that contain form fields, only two DIVs are shown at a time. What is shown depends on a drop down selection.
if select = 1, the divs with the class classOne are show and divs with classTwo are hidden
if select = 2, the divs with the class classTwo are show and divs with classOne are hidden
When I submit the form, I want to serialize either both divs with classOne, or classTwo, depending on what was selected in the dropdown.
So far I can't get it to serialize the form date from the divs..
data: $('.classOne').serializeArray(),
This doesn't pass any data to my back end script.

You need to target the form controls within those elements. You can use the pseudo selector :input to cover various control tags and types
data: $('.classOne :input').serializeArray()
DEMO
Another common way to do this is to use <fieldset> tags and disable the inactive ones. Disabling a fieldset disables any form controls within it so you can then effectively use serialize() on the whole form since it does not include disabled controls

serializeArray() return all enabled input field data. You need to disable the input fields which you don't want serializeArray() to return.
When you select the dropdown, set the attribute of input fields to disabled.
To make input field disabled :
$(input).attr('disabled','disabled');
if select = 1, the divs with the class 'classOne' are show and divs with 'classTwo' are hidden and disabled
if select = 2, the divs with the class 'classTwo' are show and divs with 'classOne' are hidden and disabled

shopping list app: using checkboxes to cross off items

i'm creating a shopping list application via javascript/jquery and i'm having trouble using checkboxes to cross off items on the list. i'm getting close though. when a box is checked, all of the items in the list become crossed off, and also the text in the main text-input at the top of the application has the strikethrough quality as well. checking one of the boxes should only strikethrough the corresponding text next to it.
here is my javascript for this particular function:
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().siblings('input[type=text]');
$('input').css('textDecoration','line-through');
});
also here is a link for the current version of the application:
https://dl.dropboxusercontent.com/u/91499081/ShoppingList/shoppingList.html

Simple mistake - made it many times myself.
jsFiddle demo
You correctly identify the specific input tag that you want to underline, and you assign that tag to a variable.
But in your next jQuery line, you put the variable name as a string, which tells jQuery that you want to get all elements of that type. Since "input" is a valid type of elements, all input elements are modified.
Therefore, change:
$('input').css('textDecoration','line-through');
To:
$(input).css('textDecoration','line-through');
I would also recommend choosing a different var name. Had you used a different var name, such as "myInput", you may have found the solution yourself.
Per your comment question:
To check/uncheck the text field:
jsFiddle example
$('#shopping-list').on('change','input[type=checkbox]',function(){
var input = $(this).parent().find('input[type=text]');
if ($(this).is(':checked') ) {
$(input).css('textDecoration','line-through');
}else{
$(input).css('textDecoration','none');
}
});

I think you're looking for:
$('#shopping-list').on('change','input[type=checkbox]',function(evt){
var checkbox = $(evt.target),
textInput = checkbox.next('input[type=text]');
textInput.css('text-decoration', checkbox.is(':checked') ? 'line-through' : 'none');
});
You were going up to the parent, then selecting all the input children that were text inputs, instead of only the text right after the check box.
Checking if the checkbox is checked will allow the line through to toggle as the user keeps clicking the box.

Select element by dynamically changed attribute

Solved by #Grundy, solution at bottom of post
I have a form with a radio option where the elements are selected programmatically and without the user directly clicking on the radio element.
var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
$("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
$elem.attr("checked", true); // Check the found element from before
}
This works, I can see the attributes change in Chrome's developer tools. The previous checked input is unchecked and the appropriate item becomes checked. This works every time specifically works multiple times (I'll explain why that's relevant later).
Next I hide all the unchecked radio buttons and show only the checked one.
$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();
This works the first time an input is selected. All the unchecked inputs will be hidden and the checked one will be unhidden. If the input is selected a second time (either immediately again or after other options have been selected in between) then all of the inputs are hidden including the checked one.
If I check the number of matched elements for $("input[name=type]:checked + label") it returns 1 for the first time and 0 for the second time meaning it won't be selected only after the second time. I feel like this is because the checked attribute has been changed dynamically at that point but that may not be the cause of the problem.
EDIT - Here's a Fiddle
fiddle Clicking on the gray box will show you its normal behavior when changed by the user clicking on the values. Each value can be selected multiple times in any order but if you click the text at the bottom (they're poor looking buttons) it will change the form programmatically. It only works for the first time, it does not seem to care if it was selected by the user previously.
Solution - Credit #Grundy
Since I know the $elem object I found earlier is the object being changed I can reference it directly instead of trying to search for an element with the checked attribute. So I use this:
var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes
Instead of using this:
$("input[name=type]:checked + label").show(); // Referenced after all the changes

try use
$elem.next("label").show();
instead of
$("input[name=type]:checked + label").show();
because $elem is checked checkbox that you find

how to mimic Control-Click (multiple selection) of divs with Jquery?

I have rows of divs and I need to multi-select different rows ...but w/o using checkboxes. My rows "highlight" on hover , and gets permanent highlighting when selected w/ this function:
function load_to_que(elemID){
is_selected = $(elemID).attr('is_selected')
console.log(is_selected);
if(is_selected != "true"){
$(elemID).attr('is_selected','true');
$(elemID).attr('style','background-color: #88C4FF;');
}else{
$(elemID).attr('is_selected','false');
$(elemID).attr('style','');
}
//etc....
}
w/ the above code i can select and unselect div/rows by clicking, and see visual feedback ... click once, and the div is highlighted, click again and it's background is back to normal.. click on different divs/rows once and you have multiple selections/highlights..
Now what i need to do is...
When clicking on a different div, all the rest of the divs should go back to normal (not highlighted) .. i have 2 ways to do this
1.1) loop through the elements and evaluate if already selected iva the is_selected attribute, then unselect
1.2) create a window.selectedIDs variable and maintain a record of selected divs there, and use that to loop through and unselect all currently selected divs
question: w/c is better of the above? or are there are better techniques?
PS
I don't need code detailed examples.. i basically just need good ideas to go about this..

Fetch value from one of two HTML elements with same ID

I have two span's which contain a HTML text box with same id say "field1". Based on a drop down value, only of these two span's are shown in the screen at a given time. Either one of the span's is shown or none of them are shown.
I am using .hide(); and .show(); in prototype js to show and hide these span's based on the drop down value. But whenever I try to get the value by $F('field1'); on submit, I only get the first HTML text box's value(which is empty).
Is there a way I can solve this to get the value of visible HTML text box value?

id should be unique within a page.
I am assuming you have different dropdown values. If so, assign different id's to these spans and use selected dropdown value to pick one of them.

Use class. ID for an element should be unique as it's an ID ;)
select all elements with specified class name. you will get an array of elements having specified class name.
var eleCollection = document.getElementByClassName("anyClassName");
After this, u can loop through this array of elements and get their values
for(element in eleCollection) {
var thisValue = element.getAttribute("value");
console.log("Element: ",element," value: ",value);
}