We Keep Coding

From a table row with TWO dropdowns, get selected value & which drop-down changed

I am trying to update two cascading drop down inside a table there are many answers on SO for drop downs, but I was unable to find help on cascading updates inside a Table with dynamically added rows.
Given the many rows they all have varying Id's filter #Id does'nt work. So, How do I identify which rows Dropdown triggered the change & cascade the update another Dropdown/cell in the next col of the same row?
There are 2 DropDownList (select box) inside a table row cell. To simplify this, the first is Country -> Second is state. So a user is expected to select the country and then the state.
My pseudo algorithm:
find which one was fired, and which row (unsure if its needed, should I wire in place)
then fire an ajax call... to get the values based on country
update the second drop down with value in the same table row.
Case 1 Change country and then change state.
Case 2 Just change State, but first get the Country value in the first dropdown of the same row.
I know how to get the change and value in a regular page, but how do I get those changes and update the adjacent dropdown.
$(document).on('change', 'select', function(){
var data = $(this).val();
alert(data);
});
Edit, Stephen request to show HTML
<tr>
<td>
//DropDown 1 (Imagine Country)
<span class="projectcodeid">
<select class="form-control" id="Records_1__TCode_Project_ID" name="Records[1].TCode.Project.ID"><option value=""></option>
<option value="1">Plumbing</option>
<option value="2">Modeling</option>
</select></span>
</td>
<td>
//DropDown 2 (Imagine State)
<input type="hidden" name="Records.Index" value="1">
<input class="timecodeid" name="Records[1].TCode.ID" type="hidden" value="5">
<span class="timecode timecodeDdlId"> <select class="form-control timecodeDdlId" id="Records_1__TCode_ID" name="Records[1].TCode.ID"><option value=""></option>
</select></span>
</td>
<td>
<input name="Records[1].DataRecords[0].ID" type="hidden" value="">
<input class="hours" name="Records[1].DataRecords[0].Work" type="text" value="">
</td>
<td>
<input class="bs-checkbox" name="Records[1].DeleteRow" type="checkbox" value="true"><input name="Records[1].DeleteRow" type="hidden" value="false">
</td>
</tr>
Sample image for clarification

Assuming that you can't identify dropdwns by class or anything.
Assuming that every time you change the value in a dropdown you want to update the other dropdown on the same row.
Assuming that you have only two dropdowns per row:
$('table').on('change', 'select', function() {
var $current_dropdown = $(this),
$other_dropdown = $(this).closest('tr').find('select').not(this);
/// perform any task you need with current and other dropdown
});

You need to give both your <select> elements class names and use relative selectors to select the associated element in the same row.
Assuming your html is
<table id="table"> // give this an id attribute
<tbody>
<tr>
<td><select class="country" ....> ..... </select></td>
<td><select class="state" ....> ..... </select></td>
</tr>
</tbody>
</table>
Then your script will be
$('#table').on('change', '.country', function() {
var selectedValue = $(this).val();
var row = $(this).closest('tr'); // get the row
var stateSelect = row.find('.state'); // get the other select in the same row
// make you ajax call passing the selectedValue to your controller
// in the success callback, update the options of stateSelect
$.ajax({
url: ...
data { id: selectedValue },
....
success: function(data) {
stateSelect.empty();
$.each(data, function(item, index) {
stateSelect.append($('<option></option>').val(iem.ID).text(item.Name));
}
}
});
}
Refer also better way to load 2 dropdown in mvc for details of the code for populating cascading dropdownlists (consider caching the options as per the 2nd code example to avoid repeated ajax calls)

How to save information based on what the user has clicked on (category)

example img of a category selection by user
Hey, I'm trying to set up a selection where the user has to pick a category and a second category and I have no idea how to get the information he clicked on.
After the user has clicked on the category it will add the .active and the next button appears.
After clicking the next button a formular (based on the category he picked) will fadeIn and I need the category Information, because after submitting the formular I want the category to be saved, too.
So, how can I save the information he clicked on? I don't want to use a dropdown or radiobuttons but I'm open to anything else (js / jquery, php) if it looks like the example on the image.
I tried it with buttons like:
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="1st cat"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="1st cat"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="1st cat">
</form>
I also thought about looking for the class-combo (which one has the .active when clicking the next button)
like:
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
})
so the clicked category has both:
/*$('.cat1.active')*/
But I don't know how to read this out,
This isn't the complete code for what I'm trying to do, but I only need to know the data save part. Please help me :(

just change the value
<form id="cat1" method="post">
<input type="submit" id="1st_cat_1" class="cat1" name="cat1" value="apple"><br>
<input type="submit" id="1st_cat_2" class="cat1" name="cat2" value="banana"><br>
<input type="submit" id="1st_cat_3" class="cat1" name="cat3" value="orange">
</form>
you can get the value from this method
$('.cat1').click(function(){
$('.cat1').removeClass('active');
$(this).addClass('active');
var v = $(this).val();//the v is apple or banana or orange
})
or just like that
var v = $('.cat1.active').val();//the v is apple or banana or orange

You can cache off their selection like this:
var food = 'apple'
function getFood(element) {
food = document.getElementById('foods').value;
console.log(food);
}
<select id="foods" onChange="getFood(this);">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>

Update multiple radio buttons based on select option

I'm trying to update a series of radio button in a sharepoint 2013 custom new form, based on a select option. My code so far:
function setTierDestinations(destination) {
var radios = $("#DeltaPlaceHolderMain").find("span[title='" + destination + "']:first-child");
console.log(radios);
$.each(radios, function(i, value) {
$(value).prop("checked",true);
});
}
document.getElementByID(ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice).onchange = function () {
var destination = document.getElementByID(ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice).value;
setTierDestinations(destination);
};
<select name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff151$ctl00$DropDownChoice" id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice" title="Destination" class="ms-RadioText">
<option selected="selected" value=""></option>
<option value="Store">Store</option>
<option value="Shed">Shed</option>
</select>
<span id="radioA"><span dir="none">
<table cellpadding="0" cellspacing="1">
<tr>
<td>
<span class="ms-RadioText" title="Store">
<input id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl00" type="radio" name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff271$ctl00$RadioButtons" value="ctl00" checked="checked" /><label for="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl00">Store</label>
</span>
</td>
</tr>
<tr>
<td>
<span class="ms-RadioText" title="Shed">
<input id="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl01" type="radio" name="ctl00$ctl43$g_f596e023_21bc_42e0_b68b_c8a7b74467a3$ff271$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff271_ctl00_ctl01">Shed</label>
</span>
</td>
</tr>
</table>
</span></span>
All the content in #radioA gets duplicated several times as #radioB, #radioC, etc.
I think I'm not selecting the radios var properly. In console I'm getting an array of multiple "span.ms-RadioText" where I should be getting inputs. Is this the correct usage of first-child?

Your use of first-child isn't selecting the children of your target element. You want .children()
This should work
var radios = $("#DeltaPlaceHolderMain").find("span[title='" + destination + "']").children()[0];
Which will select the first child of the span.
The :first-child selector doesn't select the first child of the element, but the element that matches the selector that is the first child of the parent.
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:first-child
To reiterate and elaborate on what Zakaria said,
getElementByID is written incorrectly. It should be document.getElementById
Note the lowercase d.
Your id should be in quotes, as it is a string, and not a variable. So document.getElementById('ctl00_ctl43_g_f596e023_21bc_42e0_b68b_c8a7b74467a3_ff151_ctl00_DropDownChoice').onchange etc.

How can I add to my table filter to allow for multiple checkbox selections, as well as filtering from a dropdown?

I've got a table that can be filtered by multiple checkboxes, as well as by a "select" dropdown. Essentially, what I want to be able to do is click on multiple checkboxes in order to find each row containing that class, so class 1 and 3, or example, and then filter it by the location.
I've gotten really close at this point, where I can select both the location (which is also a class, two letters for state abbreviations), and a single class from the checkboxes, but I want people to be able to compare multiple classes from the checkboxes.
The problem is something I understand, but can't seem to figure out how to fix. The code adds each class to the end of the "tr". This means if you apply 2 filters from the checkboxes, it finds nothing, instead of finding everything from each filter. While this behavior is perfectly functional for 1 checkbox and the Dropdown, meaning it will only give me Filter 1 values from Tennessee, I want it to be able to give me Filter 2, Filter 3, and Filter 4 at the same time, if I so choose.
Any ideas on how to alter this to make it allow multiple checkbox selections?
By the way, I'm very limited in what JavaScript/jQuery plugins I can use, which is why I'm fighting so hard to use tableSorter with this solution.
My HTML:
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="1" /><label for="filter_1">Filter 1</label>
<input type="checkbox" name="filterStatus" value="2" /><label for="filter_2">Filter 2</label>
<input type="checkbox" name="filterStatus" value="3" /><label for="filter_3">Filter 3</label>
<input type="checkbox" name="filterStatus" value="4" /><label for="filter_4">Filter 4</label>
<select type="dropdown" name="filterStatus" id="chooseState" class="filter">
<option value="ZZ">--Choose State--</option>
<option value="TN">Tennessee</option>
<option value="MO">Missouri</option>
<option value="NV">Nevada</option>
<option value="IA">Iowa</option>
</select><label>State</label>
</form>
<table id="StatusTable">
<tbody>
<tr class="1 TN">
<td class="Name"></td>
<td class="ID"></td>
<td class="Type"></td>
<td class="Location">City, Tennessee</td>
<td class="Class"></td>
<td class="Received"></td>
<td class="Action"></td>
<td class="Status">Active</td>
</tr>
</tbody>
</table>
JavaScript:
$("input[name='filterStatus'], select.filter").change(function () {
var classes = "";
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes += "." + $(this).val();
}
});
$("select.filter").each(function() {
if ($(this).val() != 'ZZ') {
stateClass += "." + $(this).val();
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + classes + stateClass);
if (rows.size() > 0) {
rows.show();
}
}
});

Since you know the problem, ill skip the explication and jump to the solution.
Use the .filter() method mixed with an array.
Instead of expending a string, push the class name into an array :
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
Then when selecting the row, use .filter() just like that :
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*')
Then everything work fine!
Fiddle

show form value in alert after click on button

I am very new on HTML. I just trying to accept form value and want to show this value
in Alert. I try following code but it didn't help me...
I know this is very easy question but i am newbie on HTML,JavaScript. I search but didn't find relative to my requirement....
Javascript function....
function updateTxt(field1,field2)
{
var field1 = document.getElementById(field1);
var field2 = document.getElementById(field2);
alert(field1,field2);
}
HTML form
<input name="textfield" type="text" id="textfield" value="Search by keyword" class="search_input" >
<select name="select" id="select" class="input_list" >
<option>Search jobs by category</option>
<option>Business Sales Leadership Development Program</option>
<option>Business Sales Solutions</option>
<option>CTO</option>
<option>Call Center</option></select>
<input name="button" type="button" class="btn" value="Go" onClick="updateTxt(select,textfield)">
Please give me hint or direct me where i wrong...
Thanks in Advance

change this code
<input name="button" type="button" class="btn" value="Go" onclick="updateTxt()">
and also this
function updateTxt()
{
var field1 = document.getElementById('textfield').value;
var field2 = document.getElementById('select').options[document.getElementById('select').selectedIndex].value;
alert(field1+'&'+field2);
}

You need to pass strings into the updateTxt function. And alert can only take one parameter, so you'll have to concatenate the values of the fields, not the fields themselves. Your code would look like this:
JS:
function updateTxt(field1,field2)
{
var field1 = document.getElementById(field1).value;
var field2 = document.getElementById(field2).value;
alert(field1 + '\n' + field2);
} ​
HTML:
<input name="textfield" type="text" id="textfield" value="Search by keyword" class="search_input" >
<select name="select" id="select" class="input_list" onkeyup="updateTxt('select','txt2');">
<option>Search jobs by category</option>
<option>Business Sales Leadership Development Program</option>
<option>Business Sales Solutions</option>
<option>CTO</option>
<option>Call Center</option></select>
<input name="button" type="button" class="btn" value="Go" onClick="updateTxt('select', 'textfield')">​
Demo

You will need to change the onClick to:
onclick="updateTxt('select','textfield');
because when you are using reserved words in JS it is not good - to say the least ;)
For full list of reseved words: http://www.javascripter.net/faq/reserved.htm
You can see there 'select'.
Btw, you might want to change the names to something better and avoid 'onClick' and JS inside your html.
Good luck.

Your code does not have an element with the id 'txt2'. Also try to use more explicit IDs, like 'myTextField' instead of 'select', it will make it easier to read and maintain your code.
Other than that, Amaan's answer should work.