We Keep Coding

display second menu based on first one along with value and id

I am referring to another question display select options based on previous selections
I have while loop to fill the var data and inside a foreach loop to give the sub-menu and all work fine, var data = {'B|1':['B5|1','B4|2']
now after displaying menu1 How do I display second one, am just stopped there.
my code is:
for (var i in data) {
var ii = i.split('|');
$('#menu1').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
$('#menu1').change(function () {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
var ii = data[key][i].split('|');
$('#menu2').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
}).trigger('change');
menu1 is ok, now I need to show #menu2 with the value and text ??

This may help you
$('#menu1').change(function() {
var key = $(this).val();
var keyText = $('#menu1 :selected').text();
$('#menu2').empty();
for (var i in data[keyText +"|" + key]) {
var ii=data[keyText +"|" + key][i].split('|');
$('#menu2').append('<option value='+ii[1]+'>' + ii[0] + '</option>');
}
}).trigger('change');

Javascript - Getting removed item name from table?

So I have an table. By click of a button, information will be added there, so each item has also X button, which removes them from the list. I've been trying to do that, if you click that X button, then it will output to console the item name which you deleted. How could I do that?
Here's the function
function sitaSeen(img, name, condition, price) {
$('tbody').append("<tr id='itemCart'><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");
Which is called, when item has to be added.
Here's the X button code
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').ignore('span').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
There's also kind of my try, but ofc it wont work.

There is no ignore() method in jQuery so it will throws error in console. So either clone the tr and remove span from cloned object and then get text or get all td which is not contains span and get text.
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').clone().remove('span').text();
// or
// var removedname = $(this).closest('tr').find('td:not(:has(span))').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
UPDATE : Since you just want the second column you can simply use :nth-child or :eq() selector(or eq()).
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:nth-child(2)').text();
// or
// $(this).closest('tr').find('td:eq(1)').text();
// or
// $(this).closest('tr').children().eq(1).text();
console.log(removedname);
$(this).closest('tr').remove();
});
});

I think it might be better to use:
```
// better way to get to the tr element
var trElem = $(this).parentNode.parentNode;
```
The parentNode attribute is a better way to access the parent of an element.

The item name is the second td so you can use:
var removedname = $(this).closest('tr').find('td:eq(1)').text();
Because the ID have to be unique I added a new parameter to your function.
function sitaSeen(seq, img, name, condition, price) {
$('tbody').append("<tr id='itemCart" + seq + "'>" +
"<td><img src=" + img + "></td>" +
"<td>" + name + seq + "</td>" +
"<td>" + condition + "</td>" +
"<td>$" + price + "</td>" +
"<td><span>X</span></td>" +
"</tr>");
}
$(function () {
$('#addRow').on('click', function(e) {
var seq = +$(this).attr('data-seq');
$(this).attr('data-seq', seq + 1);
sitaSeen(seq, 'img', 'name', 'condition', 'price');
});
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:eq(1)').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="sweet-container">
<button id="addRow" data-seq="1">Add Row</button>
<table>
<tbody>
</tbody>
</table>
</div>

How to store multiple drop down values inside a variable?

So I have this javascript function that loops through each user account and displays them in a drop-down menu. When the user selects an option from the drop-down menu, it takes the Iban number as its main id which is stored in ddlAccountFrom. Is there a way how I can store two values when the user selects an option, like for instance the Iban and Currency into separate variables?
function getAccountFrom() {
var username = $("#hiddenUsername").val();
var url = "http://localhost:63723/api/BankAccountsApi/GetBankAccounts/?username=" + username + "&id=2";
$.getJSON(url, function (data) {
var table = "<select id=\"ddlAccountFrom\">";
table += "<option value=\"-1\">Select an Account</option>";
$.each(data, function (key, val) {
table += "<option value=\"" + val.Iban + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
});
table += "</select>";
$('#divAccountFrom').html(table);
});
}
I am using the ddlAccountFrom in this function..
function Transfer() {
var accountFrom = $("#ddlAccountFrom").val();
var accountTo = $("#txtAccountTo").val();
var amount = $("#txtAmount").val();
var url = "http://localhost:63723/api/BankAccountsApi/TransferFunds/?
ibanFrom=" + accountFrom + "&ibanTo=" + accountTo + "&amount=" + amount;
$.getJSON(url, function (data) {
alert(data);
})
.error (function () {
alert("Not enough balance! The amount entered exceed the balance found in this account. Please try again.");
})
}

You can use the data-custom attribute, like this:
table += "<option value=\"" + val.Iban + "\" data-currency=\"" + val.Currency + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
To access variable see jquery-cant-get-data-attribute-value
So you can read:
var selectedCurrency= $("#ddlAccountFrom :selected").data('currency');

You could :
Concatenate your 2 data in 1 string with a separator (for ex myIban#myCurrency) and then split your value to get back your 2 distinct data
Listen to your dropdown changes, for example adding a onchange=updateData(val.Iban, val.Currency) attribute to your option html, and in your js :
var currentIban, currentCurrency;
function updateData(iban, currency) {
currentIban = iban;
currentCurrency = currency;
}
Add a data-custom attribute, like data-currency or data-iban

How to append value " select " to the Select dropdown?

I want add "All" option to the existing dropdown as a first option. Pls help me
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
I want "All" to be the first option in select dropdown

Instead of empty() use .html() and pass the html of the All Option. This will clear the select first then will add all option and then will add other options, and will save you an unnecessary .empty() operation.
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.html('<option value="'+all+'">All</option>');
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}

Try this: You can add ALL option just right after emptying the output variable as shown below -
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
output.append("<option value='ALL'></option");//add here
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}

Try this:
$('#mysampledropdown').empty();
$.each(response.d, function(key, value) {
$("#mysampledropdown").append($("<option></option>").val(value.ID).html(value.text));
});
$('<option>').val("").text('--ALL--').prependTo('#mysampledropdown');

js add row (clone) get variables

I am working on a script to add a row to a form using js.
this is the js script I have.
<script>
jQuery(function($) {
var $button = $('#add-row'),
$row = $('.timesheet-row').clone();
$button.click(function() {
$row.clone().insertAfter('#clone-row');
});
});
</script>
Then my form's elements are set up like this.
<div class="form-group col-lg-2">
<label>In Time</label>
<input class="form-control" type="datetime" id="intime" name="intime[]">
</div>
My problem is I cant seem to figure out how to retrieve the values of the form fields
here is the jfiddle
jfiddle
Updated jfiddle to revised code to post to php file
<?php
$pos= $_POST['position'];
$position = json_decode($pos);
echo $position;
echo "This should work";
If anymore than one line is found no response is returned.

Basically you'll need to iterate through the elements to get their values.
.each() will help you in that.
select an element input or select with their name and call .each() on it.
In .each() fetch the value of current element and store it.
Here's the updated jsFiddle.
I took the liberty of adding a button(id = "get-row-values") on whose click you'll see an alert with all the values of your inputs and selects in .timesheet-row.
Also I removed [] from the names of your inputs and selects.
$("#get-row-values").click(function () {
var position = "";
var unit = "";
var employee = "";
var intime = "";
var outtime = "";
$(".timesheet-row select[name=position]").each(function () {
position += " " + $(this).val();
});
$(".timesheet-row select[name=unit]").each(function () {
unit += " " + $(this).val();
});
$(".timesheet-row select[name=employee]").each(function () {
employee += " " + $(this).val();
});
$(".timesheet-row input[name=intime]").each(function () {
intime += " " + $(this).val();
});
$(".timesheet-row input[name=outtime]").each(function () {
outtime += " " + $(this).val();
});
alert("Positions : " + position + "\nUnits : " + unit + "\nEmployees : " + employee + "\nIntimes : " + intime + "\nOuttimes : " + outtime);
});