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;
}

JQuery Filtering Table with Search Input

I have 2 dropdowns that filter a table. These work properly. They show/hide rows based on the selection. I also want to add a search to further filter the rows, but I cannot get this to work.
For Example
The search needs to take into account the dropdown selections. So if dropdown 1='Three' and dropdown 2='Four' (for instance) - 5 rows are returned. If I start typing in the search box 'Right' then 2 rows should appear. When I back out of the search, then the 5 rows should reappear(dropdown filters intact)
CODEPEN: https://codepen.io/rblanc/pen/eYOEgXg
Here is the JQuery
$(function() {
$('#archive, #type').change(function() {
filterTable($('#archive').val(), $('#type').val());
});
});
function filterTable(archive, entry) {
var $rows = $('#filter tbody tr').show();
if (archive == "one") {
$rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
} else if (archive == "two") {
$rows.filter(":has(td:nth-child(4):contains('One'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Three'))").hide()
} else if (archive == "three") {
$rows.filter(":has(td:nth-child(4):contains('One'))").hide()
$rows.filter(":has(td:nth-child(4):contains('Two'))").hide()
}
if (entry == "one") {
$rows.filter(":has(td:nth-child(6):contains('N'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('Y'))").hide()
} else if (entry == "two") {
$rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('N'))").hide()
} else if (entry == "three") {
$rows.filter(":has(td:nth-child(6):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(7):contains('N'))").hide()
$rows.filter(":has(td:nth-child(8):contains('Y'))").hide()
} else if (entry == "four") {
$rows.filter(":has(td:nth-child(6):contains('N'))").hide()
$rows.filter(":has(td:nth-child(7):contains('Y'))").hide()
$rows.filter(":has(td:nth-child(8):contains('N'))").hide()
}
}
// SEARCH INPUT
$("#search").on("keyup", function() {
var value = $(this).val();
$("table tbody 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();
}
}
});
});

How to edit CSS of a JavaScript variable in JS?

I have a live search for a website and it's working just fine but I cannot seem to figure out how to highlight the search term in the result. Below is my JS code. I assume I need to edit the data-search-term variable but I am clueless about how to go about it.
I know only HTML/CSS. No JavaScript.
jQuery(document).ready(function($) {
$('.training-search-list li').each(function() {
$(this).attr('data-search-term', $(this).text().toLowerCase());
});
$('.training-search-box').on('keyup', function() {
var searchTerm = $(this).val().toLowerCase();
$('.training-search-list li').each(function() {
if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
Thanks in advance.

I made it long time ago
(function($){
$('#categoryFilter').focus().keyup(function(event){
var input = $(this);
var val = input.val();
if(val == ''){
$('#filter li').show();
$('#filter a span').removeClass('highlighted');
return true;
}
var regexp = '\\b(.*)';
for (var i in val) {
regexp += '('+val[i]+')(.*)';
}
regexp += '\\b';
$('#filter li').show();
$('#filter').find('a > span').each(function(){
var span = $(this);
var resultats = span.text().match(new RegExp(regexp,'i'));
if(resultats){
var string = '';
for (var i in resultats){
if(i > 0){
if(i%2 == 0){
string += '<span class="highlighted">'+resultats[i]+'</span>';
}else {
string += resultats[i];
}
}
}
span.empty().append(string);
}else {
span.parent().parent().hide();
}
});
});
})(jQuery);
Maybe you can try to make your own code with some part of mine

selections validation by value with jquery

I have 5 select fields with id's id1, id2,.. id5
and i need check if values (selected) not equal then highlight green and if equal then highlight red
but is look crazy validate each field 5 times? is posible use special functions ir validate easy than with:
if
if
if
if
I dont need a code just idea.

You can loop through each select to compare the values
$("select").change(function () {
flag = false;
var value = $(this).val();
$("select").each(function () {
if ($(this).val() != value)
flag = true;
});
if (flag)
$("select").css("color", "red");
else
$("select").css("color", "green");
});
Demo
Edit
$("select").change(function () {
var flag = true;
$("select").each(function () {
var outer = this;
$("select").not(outer).each(function () {
if ($(outer).val() == $(this).val()) {
flag = false;
return false;
}
});
});
if (flag)
$("select").css("color", "green");
else
$("select").css("color", "red");
});
Updated Fiddle
New update
I've simplified the code like this. YOu dont have to use nested loop if you do like this
$("select").change(function () {
var flag = true;
$("select").each(function () {
if ($("select").find("option:selected[value=" + this.value + "]").length > 1) {
flag = false;
return false;
}
});
if (flag)
$("select").css("color", "green");
else
$("select").css("color", "red");
});
Updated Fiddle

Try this one..
$("select").change(function(){
var selected = [];
var valiSel = [];
$('select > option:selected').each(function() {
if($(this).val() != 0){
selected.push( $(this).val() );
}
valiSel.push( $(this).val() );
});
var unique = unique12(selected);
var uniqueLength = unique.length;
var valiSelUnique = unique12(valiSel);
var selectedLength = selected.length;
if( unique.length != selected.length ){
alert( 'Two Selected value cannot be same' );
return false;
}
//return true;
});
function unique12(sel) {
var r = new Array();
o:for(var i = 0, n = sel.length; i < n; i++)
{
for(var x = 0, y = r.length; x < y; x++)
{
if(r[x]==sel[i])
{
//alert('this is a DUPE!');
continue o;
}
}
r[r.length] = sel[i];
}
return r;
}
DEMO

How to submit form only one check box is selected using java script

on edit button click a want to submit form only if one check box checked,don't submit when 0 or more than 2 check box checked
my below code is not working
$("#editbtn_id").click(function () {
var cnt = 0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
});
if (ischecked) {
checkbox_value += $(this).val();
cnt = cnt + 1;
if (cnt == 0 || cnt > 1) {
alert(cnt);
alert("Please select one Test case");
return false;
}
}
return false;
});
HTML
<form action="/editSingletest/{{ testcase.id }}" method="post" onsubmit="return" >
<input type="checkbox"/>
</form>

You can achieve this by following code
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_checked_count = 0;
var form_submit = false;
$(":checkbox").each(function () {
if($(this).is(":checked")) {
checkbox_checked_count++
}
});
if(checkbox_checked_count == 1) {
form_submit = true;
}
else if(checkbox_checked_count > 1) {
alert("Please select one Test case");
}
alert(form_submit)
$("form").submit();
});
Check working example here in this fiddle

Your counter is in the wrong loop, should be something like this:
$("#editbtn_id").click(function(){
var cnt=0;
var checkbox_value = "";
$(":checkbox").each(function () {
var ischecked = $(this).is(":checked");
if (ischecked){
checkbox_value += $(this).val();
cnt=cnt + 1 ;
}
});
if(cnt==0 || cnt > 1){ ... }
});

try this
$("#editbtn_id").click(function (e) {
if($('form input[type="checkbox"]:checked').length == 1){
$('form').submit();
}
else{
e.preventDefault();
}
});
for 'form' use your form selector