Develop Reference

remove duplicate entry from html input boxes in JavaScript/jQuery

I have a fiddle which checks for any duplicate entry entered in html input boxes.
It works in a way that if any duplicate entry is entered in a newly added row or the rows which are already there then the alert message "duplicate" is displayed.
I have used the following script in order to make that happen.
$('input[name*="code"]').each(function() {
$(this).change(function(){
let value = $(this).val();
let count = 0;
$('input[name*="code"]').each(function() {
if ($(this).val() != '' && $(this).val() == value) {
count++;
if (count > 1) { alert('duplicate'); }
}
});
});
$(this).addClass('e');
});
$('#addRow').on('click', function(){
$('input[name*="code"]:not(.e').each(function() {
$(this).change(function(){
let value = $(this).val();
let count = 0;
$('input[name*="code"]').each(function() {
if ($(this).val() != '' && $(this).val() == value) {
count++;
if (count > 1) alert('duplicate');
}
});
});
$(this).addClass('e');
});
});
What I am trying to achieve now is when any duplicate entry is entered in html input boxes then it should get disappeared automatically and the text "Please enter different text" left to the row should be displayed, something like this
http://jsfiddle.net/zHJSF/
This is what I have tried but it doesn't seem to work.
$('input[name*="code"]').each(function() {
$(this).change(function(){
let value = $(this).val();
let count = 0;
$('input[name*="code"]').each(function() {
if ($(this).val() != '' && $(this).val() == value) {
count++;
if (count > 1) {
alert('duplicate');
($(this).val()).stop(false,true).after(' <span style="color:red;" class="error">Please enter different text</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
}
}
});
});
$(this).addClass('e');
});
$('#addRow').on('click', function(){
$('input[name*="code"]:not(.e').each(function() {
$(this).change(function(){
let value = $(this).val();
let count = 0;
$('input[name*="code"]').each(function() {
if ($(this).val() != '' && $(this).val() == value) {
count++;
if (count > 1) {
alert('duplicate');
($(this).val()).stop(false,true).after(' <span style="color:red;" class="error">Please enter different text</span>');
$('.error').delay(600).fadeOut();
$(this).val('');
}
}
});
});
$(this).addClass('e');
});
});
Problem Statement:
I am wondering what changes I should make in the script above so that it get rid of any duplicate entry entered in the html input boxes.

EDIT
This should work. It will get the input values and put them into an array, then check if the value exists in the array.
javascript
$('input[name*="code"]').each(function() {
$(this).change(function(){
let element = this;
var array = $('input[name*="code"]').map(function() {
if (this != element)
return $(this).val()
return null;
}).get();
if (array.includes($(this).val())) {
$(this).val("");
$(this).attr("placeholder", "Please enter different text");
$(this).addClass("error");
} else if ($(this).hasClass("error")) {
$(this).removeClass("error");
}
});
$(this).addClass('e');
});
css
.error {
border: 1px solid red;
}

How to put hidden items back in alphabetical order after they have been removed

*UPDATE I found the fix. Needed to add a t to the "#ClaimtStatusSelected".
(Original problem) I am working on a project where a user will choose from 5 choices. If they pick a specific choice (LOB), for example DS only, then the items with only DS should be available. So if a user chooses the WC choice, the items that are for the DS only, should not show up. Here is the code i have so far and what is does. If you pick your item before you pick your LOB, so a DS Only option, and click WC, It will prompt the user and tell them their choice will be deleted.
(NEW PROBLEM) When selecting the LOB the ones that aren't specific are deleted as intended. However when i click on the LOB that is needed, the choices in the dropdown list appear at the bottom. How do I get them to show up in the correct alphabetical order?
function ValidateClaimStatusValues(selectedLOBs, thisDiv) {
var listItems = $("#s2id_ClaimtStatusSelected ul li");
listItems.each(function () {
var thisLI = $(this)[0];
if (thisLI.innerHTML.indexOf("(DS Only)") >= 0 &&
selectedLOBs.indexOf("DS") < 0) {
ShowMessage("Selecting this Line of Business will cause one or more of your selected condition values to be removed.",
"Warning",
false,
true,
function () {
$(thisLI).children('a').click();
},
"OK",
"Cancel",
function () {
selectedLOBs += ",DS";
thisDiv.addClass("lobSelected");
thisDiv.removeClass("noselect");
$("#" + thisDiv.attr("associatedcheckbox"))[0].checked = true;
});
}
});
var dropdownItems = $("#ClaimtStatusSelected").children();
if (selectedLOBs.indexOf("DS") < 0) {
dropdownItems.each(function () {
if ($(this)[0].value == "R") {
$("#ClaimtStatusSelected option[value='R']").remove();
}
else if ($(this)[0].value == "J") {
$("#ClaimtStatusSelected option[value='J']").remove();
}
else if ($(this)[0].value == "S") {
$("#ClaimtStatusSelected option[value='S']").remove();
}
});
}
else {
var foundDisabilityOnlyCondition = false;
dropdownItems.each(function () {
if ($(this)[0].value == "R") {
foundDisabilityOnlyCondition = true;
}
else if ($(this)[0].value == "J") {
foundDisabilityOnlyCondition = true;
}
else if ($(this)[0].value == "S") {
foundDisabilityOnlyCondition = true;
}
});
if (!foundDisabilityOnlyCondition) {
$("#ClaimtStatusSelected").append(
'<option value="R">Reinstated (DS Only)</option>');
}
if (!foundDisabilityOnlyCondition) {
$("#ClaimtStatusSelected").append(
'<option value="J">JURIS Admin (DS Only)</option>');
}
if (!foundDisabilityOnlyCondition) {
$("#ClaimtStatusSelected").append(
'<option value="S">Suspended (DS Only)</option>');
}
}
}

jquery search list name from table [duplicate]

This question already has answers here:
Live search through table rows
(21 answers)
Closed 8 years ago.
I want do searching follow by this link
but i have multiple row to search in td value, so how i can add to search with data from all td ?
Thanks!
$("#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();
}
}
});
});

here is the link
the new jquery :
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
$row.find("td").each(function(){
var id =$(this).text();
if (id.indexOf(value) !== 0) {
$row.hide();
}
else {
$row.show();
}
});
}
});
});

You can use filter() to find td elements within the current row which match the text. Try this:
var $row = $(this);
var tdMatches = $('td', $row).filter(function() {
return $(this).text().indexOf(value) != -1;
}).length;
tdMatches == 0 ? $row.hide() : $row.show()
Updated fiddle

try
$("#search").on("keyup", function () {
var value = this.value.trim();
if (value) {
var data = $("table tr td").filter(function () {
return value == $(this).text();
}).parent();
$("table tr:gt(0)").hide();
data.show();
} else {
$("table tr").show(); // all data show if the value is 0 If you want do or remove that
}
});
DEMO

jQuery: Compact way to fetch values of all input fields?

I have a form with five input fields and a register button ('.register').
I want to enable the register button ONLY IF all fields have at least one character.
Here comes my code:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
var un_value = $('#username_operators').val();
var fn_value = $('#first_name_operators').val();
var ln_value = $('#last_name_operators').val();
var e_value = $('#email_operators').val();
var pw_value = $('#password_operators').val();
var pw_r_value = $('#password_repeat_operators').val();
if ((un_value.length > 0) && (fn_value.length > 0) && (ln_value.length > 0) && (e_value.length > 0) && (e_value.indexOf('#') !== -1) && (pw_value.length > 0) && (pw_r_value.length > 0)) {
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}
})
});
I have the feeling that there is a much easier way to achieve the same result. Does anyone of you have a compact suggestion?

That's quiet compact:
$(document).ready(function() {
// when page loads
$('.register').addClass('a_unclickable');
// Input validation
// Are all fields filled out?
$('input').on('keyup', function() {
$('.register').removeClass('a_unclickable');
$('input').each(function() {
if ($(this).val() === '') {
$('.register').addClass('a_unclickable');
}
});
})
});

A couple of things come to mind. First:
$('input').on('keyup', function() {
var valid = true;
$('#username_operators, #first_name_operators, #last_name_operators, #email_operators, #password_operators, #password_repeat_operators').each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});
You can combine all the Ids into one CSS selector. Really the cleanest way is to add a class name to each required input, then utilize event.target.form to find all required fields inside the form.
$('input').on('keyup', function(event) {
var valid = true;
$(event.target.form).find(".required").each(function() {
if (/^\s*$/.test(this.value)) {
valid = false;
}
});
if (valid) {
$('.register').removeClass('a_unclickable');
}
else {
$('.register').addClass('a_unclickable');
}
});

Wrap the inputs in a <div class="verifyLength" ></div>
Add the a_unclickable class to the register field by default.
Then jquery:
$('input').on('keyup', function() {
var emptyField = false;
$(".verfyLength").find("input").each(function()
{
if((this).val().length() <=0)
emptyField = true;
});
if(emptyField)
$('.register').addClass('a_unclickable');
else
$('.register').removeClass('a_unclickable');
});

Here you go JSFiddle
var arr = [un_value, fn_value, ln_value, e_value, pw_value, pw_r_value];
$.each(arr,function(i,item){ if(item.length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})
if you are able to read all the values with selector you could pass them
like:
$.each($('input'),function(i,item){ if($(item).val().length > 0){
$('.register').removeClass('a_unclickable');
} else {
$('.register').addClass('a_unclickable');
}})

Have a look at this jsfiddle:
var i = 0, count = 0;
$.each($( ":input" ), function( index, value ) {
if(value.value.length > 0) {
count++;
}
});
if(count === 6) {
console.log(true);
} else {
console.log(false)
}

Using jquery to get values of radio buttons and display text depending on selection

I have this code here http://jsfiddle.net/fQTUp/302/ everything works fine, until I add second group of radio buttons.
$("input").click(function (event) {
var total = 0;
$("input:checked").each(function () {
if ($(this).attr("price") !== undefined) {
total += parseInt($(this).attr("price"));
} else {
total += 0;
}
});
if (total === 0) {
$('.total-price').text('Some new text.');
} else {
$('.total-price').text('Total price: $' + total);
}
});
$("input").click(function (event) {
$("input:checked").each(function () {
if ($("input:checked").attr("value") == "ownlogo") {
$('.logo_p').text('Own logo.');
}
if ($("input:checked").attr("value") == "textlogo") {
$('.logo_p').text('Text logo.');
}
if ($("input:checked").attr("value") == "Starter") {
$('.plan_price').text('Strtr price.');
}
if ($("input:checked").attr("value") == "Business1") {
$('.plan_price').text('Business price.');
}
if ($("input:checked").attr("value") == "Pro") {
$('.plan_price').text('Pro price.');
}
});
});
When I start clicking on second group of buttons - it works, but when I select something from first group, second group stops working.
Please take a look at the script to get the idea of my problem.
Thank you for help!

You have to use $(this) reference in your .each() loop. $("input:checked") inside the .each() loop will simply return the first matched element, That is the problem in your code.
Try,
$("input").click(function (event) {
$("input:checked").each(function () {
if ($(this).attr("value") == "ownlogo") {
$('.logo_p').text('Own logo.');
}
if ($(this).attr("value") == "textlogo") {
$('.logo_p').text('Text logo.');
}
if ($(this).attr("value") == "Starter") {
$('.plan_price').text('Strtr price.');
}
if ($(this).attr("value") == "Business1") {
$('.plan_price').text('Business price.');
}
if ($(this).attr("value") == "Pro") {
$('.plan_price').text('Pro price.');
}
});
});
DEMO

Try this to check
if ($('input[name=RadioGroupName]:checked').attr("value") == "textlogo")
where RadioGroupName is your radio button group name. In this way you can check your each group separately.