Develop Reference

how to make sure j query function deduction work after clone

the clone and calculate code working well with first section but calculate code stops for cloned form
// CODE OF CLONE FOR TRANSFERS
var gentransferid = 2;
$(".add-row-transfer").click(function() {
var $clone = $("ul.transfer-details").first().clone();
var $input = $clone.find('#transferid');
$input.val(gentransferid).attr('gentransferid', +gentransferid)
$clone.find('#transfer_sale').val('');
$clone.find('#transfer_cost').val('');
$clone.find('#transfer_profit').val('');
$clone.append("<button type='button' class='remove-row-transfer'>-</button>");
$clone.insertBefore(".add-row-transfer");
gentransferid++;
});
// CODE OF REMOVE CLONE FOR TRANSFERS
$(".cloned-removed-div-transfer").on("click", ".remove-row-transfer", function() {
$(this).parent().remove();
gentransferid--;
});
$(document).on('change', '.transfer_cost', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});
$(document).on('change', '.transfer_sale', function() {
$(".transfer_profit").val((parseFloat($(".transfer_sale").val()) - parseFloat($(".transfer_cost").val())));
});
jsfiddle
by the way how to rest drop down list when clone

Please try this:
$(document).ready(function() {
$("#btnAddNew").click(function (e) {
e.preventDefault();
var $tableBody = $("#systable");
var $trLast = $tableBody.find("tr:last");
var $trNew = $trLast.clone();
var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('<a href="#" class="remove" >Remove</a>');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var oldN = $(this).attr('name');
var newN = oldN.replace('_' + suffix , '_' + (parseInt(suffix) + 1) );
$(this).attr('name', newN);
$(this).attr('id', newN);
});
$trLast.after($trNew);
});
// 2. Remove
$(document).on('click', 'a.remove', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
$(document).on("blur", ".transfer_sale_css", function () {
CalculateDifference();
});
$(document).on("blur", ".transfer_cost_css", function () {
CalculateDifference();
});
$(document).on("blur", ".transfer_profit_css", function () {
CalculateDifference();
});
/*$("#transfer_sale_0").blur(function () {
CalculateDifference();
})
$("#transfer_cost_0").blur(function () {
CalculateDifference();
})
$("#transfer_profit_0").blur(function () {
CalculateDifference();
})*/
function CalculateDifference() {
var transfer_sale=[],transfer_cost=[],transfer_profit=[];
var i = 0;
$('#systable tr td:nth-child(2)').each(function () {
if (i == 0) {
transfer_sale[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_sale[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
i = 0;
$('#systable tr td:nth-child(3)').each(function () {
if (i == 0) {
transfer_cost[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_cost[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
i = 0;
$('#systable tr td:nth-child(4)').each(function () {
if (i == 0) {
transfer_profit[i] = $(this).find('input[type="text"]').val();
}
else {
transfer_profit[i]= "," + $(this).find('input[type="text"]').val();
}
i++;
});
for(i=0;i<=transfer_profit.length-1;i++) {
var transfer_sale_val = parseFloat($("#transfersale_"+i.toString()).val());
var transfer_cost_val = parseFloat($("#transfercost_"+i.toString()).val());
var transfer_profit_val = transfer_sale_val - transfer_cost_val;
$("#transferprofit_"+ i.toString()).val(transfer_profit_val);
}
//alert(transfer_sale);
//alert(transfer_cost);
//alert(transfer_profit);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<table align="center" id="systable">
<tr>
<td>
<select name="dropdown_0">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td><td>
<input type="text" id="transfersale_0" name="transfersale_0" class="transfer_sale_css" >
</td>
<td>
<input type="text" id="transfercost_0" name="transfercost_0" class="transfer_cost_css">
</td>
<td>
<input type="text" id="transferprofit_0" name="transferprofit_0" class="transfer_profit_css">
</td>
<td></td>
</tr>
</table>
<table align="center">
<tr>
<td>
<button type="button" id="btnAddNew" class="add-row-transfer" >+ New Car</button></td>
</tr>
</table>
</form>
</div>

Jquery search table td last character of string

if i search 'abc' tan result is like 'testoneabc.com,testtwoabc.com,hwvdhgabc.com'
but my code search like this https://drive.google.com/file/d/0B9uqoluJ-ZTLYnlxQmZqVjNuYjg/view?usp=drivesdk
but i want like this https://drive.google.com/file/d/0B9uqoluJ-ZTLWXJ6dmFWZlNka2M/view?usp=drivesdk
HTML:
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>testabc.com</td><td>442</td></tr>
<tr><td>teerfrestabc.com</td><td>556</td></tr>
<tr><td>teerfsderestabc.com</td><td>4666</td></tr>
<tr><td>teerasdefrestabc.com</td><td>334</td></tr>
<tr><td>teerfrestabcdsad.com</td><td>54364</td></tr>
</table>
<br />
<input type="text" id="search" placeholder=" live search"></input>
Script:
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td:first").text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
}
});
});
This code shows result like this

Disable textbox when two textbox is equal

How can i disable textbox when selected (textbox name) and quantity (textbox name) is equal. i used this codes its working but when selected (textbox name) is equal to 3 the txtCombo (textbox name) is not disabled but when equal to 4 it became disabled how should i work on this ? thank you in advance.
// disable button if equal
// $('#button').click(function(){
$('#button').click(function() {
var firstValue = $("#quantitytotransfer").val();
var secondValue = $("#selected").val();
if ((firstValue == secondValue)) {
$("#txtCombo").prop("disabled", true);
}
});
function addCombo() {
var textb = document.getElementById("txtCombo");
var combo = document.getElementById("combo");
var option = document.createElement("option");
option.text = textb.value.trim();
option.value = textb.value.trim();
option.selected = true;
if ($('#combo option[value="' + textb.value.trim() + '"]').text() == textb.value.trim()) {
alert("Duplicate found or you entered empty value");
return false;
}
try {
combo.add(option, null); //Standard
} catch (error) {
combo.add(option); // IE only
}
textb.value = "";
}
$("#txtCombo").on("keydown", function(e) {
return e.which !== 32;
});
$(document).ready(function() {
$('#button').click(function() {
var data = [];
$.each($("#combo option:selected"), function() {
data.push($(this).attr("value"));
});
$('#imei').val(data.join(","));;
var count = $("#combo :selected").length;
$('#selected').val(count);
});
});
$(document).ready(function() {
$('#button').click(function() {
var data = [];
$.each($("#combo option:selected"), function() {
data.push($(this).attr("value"));
});
$('#imei').val(data.join(","));;
var count = $("#combo :selected").length;
$('#selected').val(count);
});
});
$("#combo").on('change', function() {
var count = $("#combo :selected").length;
$('#selected').val(count);
});
var text = $("#text").val();
var previousOption;
$('select[name=combo] option').each(function() {
if (this.text == previousOption) $(this).remove();
previousOption = this.text;
});
// separated by comma to textbox
$(document).ready(function() {
$("#combo").change(function() {
var data = [];
$.each($("#combo option:selected"), function() {
data.push($(this).attr("value"));
});
$('#imei').val(data.join(","));;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<BODY style="font-family: sans-serif">
<fieldset>
<legend>Combo box</legend>
Add to Combo:
<input type="text" name="txtCombo" id="txtCombo" />Selected:
<input type="text" name="selected" id="selected" />IMEI Selected:
<input type="text" name="imei" id="imei" />Quantity:
<input type="text" name="quantity" value="3" id="quantitytotransfer" />
<br>
<input type="button" id="button" value="Add" onclick="addCombo()">
<br/>Combobox:
<select name="combo" multiple id="combo"></select>
</fieldset>
</BODY>

You can achieve this easily :
function checkIfEqual(){
if($("#selected").val() === $("#quantitytotransfer").val())
$("#txtCombo").prop("disabled", true);
else
$("#txtCombo").prop("disabled", false);
}
$("#button").click(function(){
$("#selected").val($("#combo option:selected").length);
checkIfEqual();
});
demo here

Have you tried this:
function addCombo() {
var txtSelected = $('#selected').val();
var qty = $('#quantitytotransfer').val();
if(parseInt(txtSelected) == parseInt(qty)) {
alert('Equal');
document.getElementById('txtCombo').disabled = true;
} else {
alert('Not equal');
document.getElementById('txtCombo').disabled = false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<BODY style="font-family: sans-serif">
<fieldset>
<legend>Combo box</legend>
Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/><br>
Selected: <input type="text" name="selected" id="selected" class="toggle"/><br>
IMEI Selected: <input type="text" name="imei" id="imei"/><br>
Quantity: <input type="text" name="quantity" value="3" id="quantitytotransfer" class="toggle"/><br>
<input type="button" id="button" value="Add" onclick="addCombo()"><br>
Combobox: <select name="combo" multiple id="combo"></select>
</fieldset>
</BODY>

Dynamically Clone or create the row only if the first row data is filled and the dropdown state is change

Below code Creates the html table and creates a static row and then on button click the same row is created but my problem is i don't want to
create or clone the row on button click
the row should be created on if the data of textbox(s) of that row are not null and the select value is not test then a new row needs to be created beneath that row .
Js fiddle demo
HTML:
<div id="results"></div>
<input id="buttonclck" type="button" value="button"/>
JS:
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option> <option value="demo">demo</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});

You can use this approach
When a form element is focused check and save current state of all form elements
Once content of a form element changes set data-filled to true for that element, see if all elements on current row have data-filled set.
If data-filled is set, if that row's data-done attribute is not set to true then add new row and set rows data-done attribute to true
Since all the rows are added dynamically, delegated events would be used.
$('#results').append('<table width="100%" border="1" cellspacing="0" cellpadding="5" id="productanddates" class="border"> <tr><td> <input type="text" name="to1" id="to1" value="" /> </td> <td> <select name="Phonenumberdd1" id="Phonenumberdd1"> <option value="test">test </option><option value="test2">test 2</option></select></td> <td> <input type="text" name="renewal_by1" id="renewal_by1" /> </td> <td> <input type="text" name="Renivaul_to1" id="Renivaul_to1" value="" /> </td></TR></TABLE>'
);
$('#results').on('focus', ':input', function() {
$(this).closest('tr').filter(function() {
return !$(this).data('saved');
})
.find(':input').each(function() {
$(this).data('value', this.value);
$(this).closest('tr').data('saved', true);
});
})
.on('input change', ':input', function() {
$(this).data('filled', this.value != $(this).data('value'))
var tr = $(this).closest('tr');
all = tr.find(':input'),
fld = all.filter(function() {
return $(this).data('filled');
});
if( all.length == fld.length ) {
if( !tr.data('done') ) {
$('#buttonclck')[0].click();
tr.data('done', true);
}
} else {
if( tr.data('done') ) {
tr.next('tr').remove();
tr.data('done', false);
}
}
});
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>
<input id="buttonclck" type="button" class="hide" value="button"/>

Try this - work only for first input (is example)
http://jsfiddle.net/xegnt0uh/1/
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').closest('#productanddates').find("tr:last-child");
//eg. if input[0] value isnt ""
if(lastRow.find('input')[0].value !== "") {
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
$(this).attr('name', newId);
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
}
});

I renamed select to selectbox
$('#buttonclck').on('click', function () {
var lastRow = $('#productanddates').find("tr:last-child");
var selectLastRow = lastRow.find('select[name=selectbox]').val(); // <-- add this select value
if(typeof selectLastRow !== 'undefined' && selectLastRow != '' && selectLastRow != 'test') { // <-- add this condition
var cloned = lastRow.clone();
cloned.find('input, select').each(function () {
var id = $(this).attr('id');
var regIdMatch = /^(.+)(\d+)$/;
var aIdParts = id.match(regIdMatch);
var newId = aIdParts[1] + (parseInt(aIdParts[2], 10) + 1);
$(this).attr('id', newId);
// $(this).attr('name', newId); // REMOVE THIS BECAUSE WE FIND IN TR
});
cloned.find("input[type='text']").val('');
cloned.insertAfter(lastRow);
}
});
DEMO JSFIDDLE
EDIT
-------
if all the condition are met a same new row to be created below that
so on
so set number of empty inputs
var emptyInputs = lastRow.find('.input').filter(function () { return this.value.length == 0; }).length;
and modify condition like below
if(typeof selectLastRow !== 'undefined'
&& selectLastRow != ''
&& selectLastRow != 'test'
&& emptyInputs == 0
) { ....
DEMO2 JSFIDDLE

How to find Currently Selected value from this Custom HTML form Tag?

I have an element which is text box but its value is populated from another hidden select element.
<input type="text" id="autocompleteu_17605833" style="box-shadow: none; width: 119px;" class="mobileLookupInput ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<select id="u_17605833" name="u_17605833" style="visibility: hidden">
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
var mySelObju_17605833 = document.getElementById("u_17605833");
$(function () {
var availableTagsu_17605833 = new Array();
for (var i = 0; i < mySelObju_17605833.options.length; i++) {
if (mySelObju_17605833.options[i].text != 'Other') {
availableTagsu_17605833[i] = mySelObju_17605833.options[i].text;
}
}
$("#autocompleteu_17605833").width($(mySelObju_17605833).width() + 5);
availableTagsu_17605833 = $.map(availableTagsu_17605833, function (v) {
return v === "" ? null : v;
});
$("#autocompleteu_17605833").autocomplete({
minLength: 0,
source: function (request, response) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
var a = $.grep(availableTagsu_17605833, function (item, index) {
var items = item.split(" ");
for (i = 0; i < items.length; i++) {
if (matcher.test(items[i])) return matcher.test(items[i]);
}
return matcher.test(item);
});
response(a);
},
close: function (event, ui) {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
}
});
});
$("#autocompleteArrowu_17605833").click(function () {
$("#autocompleteu_17605833").autocomplete("search");
$("#autocompleteu_17605833").focus();
});
$("#autocompleteu_17605833").focusout(function () {
for (var i = 0, sL = mySelObju_17605833.length; i < sL; i++) {
if (mySelObju_17605833.options[i].text.toLowerCase() == $("#autocompleteu_17605833").val().toLowerCase()) {
mySelObju_17605833.selectedIndex = i;
$("#errorTDu_17605833").html("");
break;
}
mySelObju_17605833.selectedIndex = 0;
$("#errorTDu_17605833").html("Error: Invalid Input");
}
$("#autocompleteu_17605833").trigger("onchange")
//$(this).autocomplete("close");
});
I want to find value selected in the hidden select box!
I tried to do the following
$("#autocompleteu_17605833").on("click", function (event) {
$((this.id).substring((this.id).indexOf("_") - 1)).attr("onchange", function (event) {
var selece = this.value;
alert(selece);
});
});
$("#autocompleteu_17605833").next().on("click", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Click on Arrow" + selectedValue);
});
$("#autocompleteu_17605833").on("change", function (event) {
var selectedValue = document.getElementById((this.id).substring((this.id).indexOf("_") - 1)).value;
alert("Changing the value" + selectedValue);
});
what I'm getting is older value where as I need the current assigned value.
How to achieve this??

WORKING DEMO
If am not wrong you want the selected value for this you can use select method
select:function(event,ui) {
alert("You have selected "+ui.item.label);
alert("You have selected "+ui.item.value);
}

This is a simple piece of code that will work as you required.
function result(){
document.getElementById("result").innerHTML= document.getElementById("u_17605833").value;
}
<html>
<head>
</head>
<body>
<div>
<select id="u_17605833" name="u_17605833" >
<option value="127468">Virginia</option>
<option value="127469">Washington</option>
<option value="127470">West Virginia</option>
<option value="127471">Wisconsin</option>
<option value="127472">Wyoming</option>
</select>
<input type="button" value="Show the result" onclick="result()"/>
</div>
<div id="result"></div>
</body>
</html>