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

if statement echo out different links for different codes

I am using this code
HTML:
<div id="message">some message</div>
<input type="text" id="myInput" />​
jQuery:
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS']
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
if($.inArray(firstTwoUpper, prefix) >= 0) {
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});
​
To be a post code check. I got the above code from here: Jquery check array perform function and it works just fine but I want to display a message containing a link which all differ from one another. For example I want code 'HX' to link to facebook and I want 'BD' to link to the BBC. How would I write the if statement correctly? I have tried various ways but I am not achieving what I need.
Could someone give me a little guideance please?
Thanks,
Ben.

This fiddle does what you might be looking for
<div id="message">Some link</div>
<div id="fail">Invalid postcode</div>
<input type="text" id="myInput" />
$(function () {
$("#message").hide();
$("#fail").hide();
var prefix = ['HX', 'HD', 'BD', 'LS'];
var links = ['http://www.facebook.com','http://www.example.com','http://www.bbc.com','#'];
$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
var index = $.inArray(firstTwoUpper, prefix);
if (index >= 0) {
$("#fail").hide();
$("#message").fadeIn();
$("#message a").attr("href",links[index]).html(links[index])
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
});

this fiddle: http://jsfiddle.net/um67M/2/
I changed prefix from an array of strings to an array of objects.
You're going to see an issue if users type really fast because of the speed of fadeIn().
$(function() {
$("#message").hide();
$("#fail").hide();
var prefix = [{code:'HX',link:'www.facebook.com'}, {code:'BD',link:'www.bbc.com'}];
$('#myInput').keyup(function(e) {
var value = $(this).val();
var firstTwo = value.substr(0,2);
var firstTwoUpper = firstTwo.toUpperCase();
if(firstTwo != firstTwoUpper) {
$(this).val( value.replace(/^\w\w/, firstTwoUpper) );
}
if(value.length > 1) {
for(var obj in prefix){
console.log(firstTwoUpper, prefix[obj].code, firstTwoUpper == prefix[obj].code);
if(firstTwoUpper === prefix[obj].code){
$("#fail").hide();
var link = ''+prefix[obj].link+'';
$("#message").append(link);
$("#message:hidden").fadeIn();
break;
}else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
};
} else {
$("#message").empty();
$("#message").hide();
$("#fail").hide();
}
});
});

$('#myInput').keyup(function (e) {
var value = $(this).val();
var firstTwo = value.substr(0, 2);
var firstTwoUpper = firstTwo.toUpperCase();
if (firstTwo != firstTwoUpper) {
$(this).val(value.replace(/^\w\w/, firstTwoUpper));
}
if (value.length > 1) {
if ($.inArray(firstTwoUpper, prefix) >= 0) {
if (firstTwoUpper == "HX") {
$("#message").empty();
$("#message").html('<p>some message</p>Google');
} else if (firstTwoUpper == "HD") {
$("#message").empty();
$("#message").html('<p>other message</p><a `enter code here`href="http://www.stackoverflow.com">Stack OverFlow</a>');
}
$("#fail").hide();
$("#message:hidden").fadeIn();
} else {
$("#message").hide();
$("#fail:hidden").fadeIn();
}
} else {
$("#message").hide();
$("#fail").hide();
}
});
the fiddle is here
fiddle

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

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

combining element ids

I'm trying to get both labels to appear but unfortunately only one of them is showing #city_label
<script type="text/javascript">
$(document).ready(function() {
function showDiv(element, pro2) {
if (pro2.children("option:selected").val() == 2) element.show();
else element.hide();
}
var myElement = $("div#pro2");
var mypro2 = $("select#ptype");
$("select").change(function() {
showDiv(myElement, mypro2)
});
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label" && "#city_label").hide();
else {
$("#state_label" && "#city_label").show();
stateSelect.show();
}
});
});
</script>
HTML code:
<label id="state_label" style="display:none">State:</label><br />
<label id="city_label" style="display:none">Postal or City:</label>

That's... not how && works. In this case, it will return its right operand. What you want is this, using a comma in the selector:
<script type="text/javascript">
$(document).ready(function() {
function showDiv(element, pro2) {
if (pro2.children("option:selected").val() == 2) element.show();
else element.hide();
}
var myElement = $("div#pro2");
var mypro2 = $("select#ptype");
$("select").change(function() {
showDiv(myElement, mypro2)
});
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label, #city_label").hide();
else {
$("#state_label, #city_label").show();
stateSelect.show();
}
});
});
</script>

You can't use the && operator the way you are, to select multiple elements at once you should include them in a single string separated by a comma; try this:
if (stateSelect.length === 0)
$("#state_label,#city_label").hide();
else {
$("#state_label,#city_label").show();
stateSelect.show();
}