We Keep Coding

How to get the number of input tags containing certain text?

My goal is to flag when a user enters the same text into one input that matches at least one other input's text. To select all of the relevant inputs, I have this selector:
$('input:text[name="employerId"]')
but how do I select only those whose text = abc, for instance?
Here is my change() event that checks for duplicate text among all the inputs on the page. I guess I am looking for something like :contains but for text within an input.
var inputsToMonitorSelector = "input[type='text'][name='employerId']";
$(inputsToMonitorSelector).change(function() {
//console.log($(this).val());
var inputsToExamineSelector = inputsToMonitorSelector
+ ":contains('" + $(this).val() + "')";
console.log(inputsToExamineSelector);
if($(inputsToExamineSelector).length > 1) {
alert('dupe!');
}
});
Or is there no such selector? Must I somehow select all the inputsToMonitorSelector's and, in a function, examining each one's text, incrementing some local variable until it is greater than one?

With input you need to use [value="abc"] or .filter()
$(document).ready(function() {
var textInputSelector = 'input[type="text"][name="employerId"]';
$(textInputSelector).on('input', function() {
$(textInputSelector).css('background-color', '#fff');
var input = $(this).val();
var inputsWithInputValue = $(textInputSelector).filter(function() {
return this.value && input && this.value == input;
});
var foundDupe = $(inputsWithInputValue).length > 1;
if(foundDupe) {
console.log("Dupe found: " + input);
$(inputsWithInputValue).css('background-color', '#FFD4AA');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="employerId" value="abc">
<input type="text" name="employerId" value="">
<input type="text" name="employerId" value="">
<input type="text" name="employerId" value="">
[value="abc"] means if the value is abc
[value*="abc"] * means if the value contains abc
[value^="abc"] ^ means if the value starts with abc
[value$="abc"] $ means if the value ends with abc
Note: :contains() not for inputs , and word text not used with inputs and <select>.. inputs and <select> has a value
In your case .. instead of using
$(inputsToExamineSelector).length > 1)
You may need to use .filter()
$(inputsToExamineSelector).filter('[value*="abc"]').length > 1)
OR
$('input[type="text"][name="employerId"]').filter(function(){
return this.value.indexOf('abc') > -1
// for exact value use >> return this.value == 'abc'
}).length;
And to use a variable on it you can use it like
'[value*="'+ valueHere +'"]'

Something like this works. Attach isDuplicated(myInputs,this.value) to a keyup event listener attached to each input.
var myInputs = document.querySelectorAll("input[type='text']");
function isDuplicated(elements,str){
for (var i = 0; i < myInputs.length; i++) {
if(myInputs[i].value === str){
myInputs[i].setCustomValidity('Duplicate'); //set flag on input
} else {
myInputs[i].setCustomValidity(''); //remove flag
}
}
}

Here's another one. I started with vanilla js and was going for an answer like Ron Royston with document.querySelector(x) but ended up with jquery. A first attempt at several things but here you go:
$("input[type='text']").each(function(){
// add a change event to each text-element.
$(this).change(function() {
// on change, get the current value.
var currVal = $(this).val();
// loop all text-element-siblings and compare values.
$(this).siblings("input[type='text']").each(function() {
if( currVal.localeCompare( $(this).val() ) == 0 ) {
console.log("Match!");
}
else {
console.log("No match.");
}
});
});
});
https://jsfiddle.net/xxx8we6s/

Prettify JSON object alert

I have a JSON object and when i alert it i get this:
and i want to get this:
function getNameById(id){
return usersArray.find(item => item.id === id).name;
}
var usersArray = [
{"id":"135","name":"Jenny"},
{"id":"162","name":"Kelly"}
];
$("#submit").click(function (e) {
var errors = {};
$(".validation").each(function(){
var worker_id = $(this).attr('id').replace(/[^\d]/g, '');
var w_name = getNameById(worker_id);
if(!errors[w_name]) errors[w_name] = [];
if ( $(this).val() == "" ) {
errors[w_name].push( $(this).attr('id').replace(/[^a-zA-Z]/g, '') + " must be filled!");
//errors[w_name].push("second number must be smaller than first");
}
if ( $(this).attr('id') == "second-"+worker_id && ($(this).val() > $('#first-'+worker_id+'').val())) {
errors[w_name].push("second number must be smaller than first");
}
});
alert(JSON.stringify(errors, null, 2));
e.preventDefault();
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
First<input id="first-135" class="validation" name="first" type="text" value="5"><br>
Second<input id="second-135" class="validation" name="second" type="text" value="8"><br>
Signature<input id="signature-135" class="validation" name="signature" type="text"><br>
<input id="submit" type="submit" value="Submit">
</form>
How can i achieve that?

Transform your object to a string like this
let obj = {
"Jenny" : [
"Second number must be smaller than first",
"Signature must be filled !"
]
};
let str = "";
Object.keys(obj).forEach(k => {
str += k + ":\n";
str += obj[k].join(",\n");
});
console.log(str);

Extract the data from the JSON data that you have in errors instead of running JSON.stringify directly. You should be able to get the data like this: errors["Jenny"] to get a list of the errors. Then combine them into a string according to your liking.

I honestly don't think your question has absolutely anything to do with JSON. The only reason why some JSON even shows up is because you're generating it for the alert():
alert(JSON.stringify(errors, null, 2));
// ^^^^^^^^^^^^^^ This generates JSON
If you want to concatenate some array items you can use a combination of the concatenation operator (+) and Array.join():
alert(w_name + ":\n" + errors[w_name].join(",\n"));
Tweak format to your liking.
var w_name = "Jenny";
var errors = {};
errors[w_name] = [];
errors[w_name].push("Second number must be smaller than first");
errors[w_name].push("Signature must be filled!");
alert(w_name + ":\n" + errors[w_name].join(",\n"));

Encoding and Decoding JSON in Hidden HTML element

I am trying to build a custom control using HTML and JQuery. The control will display a text value. The user can enter a variety of key/value pairs. Currently, I have the following HTML
<input id="keyValue" type="text" />
<select id="keyName" name="keyName">
<option value="k1">Some Name</option>
<option value="key2">Another Name</option>
<option value="arg3">How about one more</option>
</select>
<input id="keyValuePairs" type="hidden" />
The value displayed in "keyValue" will change based on the option the user chooses. I'm trying to keep the mappings in keyValuePairs. In an attempt to do this, I have the following:
$('#keyName').on('change', function() {
var key = $('#keyName').val();
var keyValuePairs = $('#keyValuePairs').val();
if (keyValuePairs[key]) {
$('#keyValue').val(keyValuePairs[key]);
} else {
$('#keyValue').val('');
}
});
$('#keyValue').on('change', function() {
var key = $('#keyName').val();
var keyValuePairs = $('#keyValuePairs').val();
if (!keyValuePairs ) {
keyValuePairs = {};
}
keyValuePairs[key] = $(this).val();
$('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});
For some reason, the text field always shows a blank string after I choose another key. I believe it has something to do with how I'm encoding or decoding the JSON. When I add console.log to the keyValuePairs I noticed that sometimes quotes are included and other times they're not. Yet, the code looks correct to me.
What am I doing wrong?

I believe you should JSON.parse $('#keyValuePairs').val() after you've read it (since you stringify the pairs when you set the value)
UPDATE:
You must also ensure that the value is not empty:
$('#keyName').on('change', function() {
var key = $('#keyName').val();
var val = $('#keyValuePairs').val();
if (val && val.length > 0) {
var keyValuePairs = JSON.parse(val);
if (keyValuePairs[key]) {
$('#keyValue').val(keyValuePairs[key]);
} else {
$('#keyValue').val('');
}
}
});
$('#keyValue').on('change', function() {
var key = $('#keyName').val();
var val = $('#keyValuePairs').val();
var keyValuePairs;
if (val && val.length > 0) {
keyValuePairs = JSON.parse(val);
} else {
keyValuePairs = {};
}
keyValuePairs[key] = $(this).val();
$('#keyValuePairs').val(JSON.stringify(keyValuePairs));
});

json_encode(#keyValuePairs) //encoding
json_decode(#keyValuePairs) //decoding
datatype : json

convert span id text into link and display as text

The scenario is: User choose a entry from dropDown list. Referring to the relevant entry i will create a new prefix for the webpath existing in . But the problem I have, the will not interpret as a link part, so the link won't be generated!
Use Case: If User choose link1 from dropDown-list, the result should be:https://link1//web/sso/bw/ostrfer.jsp (as link and as text display)
Could you help me how I can reach this?
Many thanks for your help! :)
JS:
function output (choice) {
var index = choice.selectedIndex;
var prefix = "";
if(index == 1)
prefix = "https://link1";
else if (index == 2)
prefix = "https://link2;
else if (index == 3)
prefix = "https://link3";
else if (index == 4)
prefix = "https://link4";
else if (index == 5)
prefix = ""https://link5";
document.getElementById("url").innerHTML = praefix;
}
HTML:
<body>
<form>
<p>
<select id = "list" name = "list" onchange ='output(this.form.liste);' >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
</form>
</span>/web/sso/bw/ostrfer.jsp> <span id = "url"></span> /web/sso/bw/ostrfer.jsp
</body>

See this demo:
http://jsfiddle.net/JFqrH/3/
HTML:
<form>
<p>
<select id = "list" name = "list" onchange ='output(this);' >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
<a id="url" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer.jsp</a>
<a id="url1" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer1.jsp</a>
<a id="url2" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer2.jsp</a>
</form>​
JS:
function output (choice) {
var index = choice.selectedIndex;
var prefix = "";
if(index == 1)
prefix = "https://link1";
else if (index == 2)
prefix = "https://link2";
else if (index == 3)
prefix = "https://link3";
else if (index == 4)
prefix = "https://link4";
else if (index == 5)
prefix = "https://link5";
updateLink(document.getElementById("url"), prefix);
updateLink(document.getElementById("url1"), prefix);
updateLink(document.getElementById("url2"), prefix);
}​
function updateLink(url, prefix) {
if(!url.getAttribute("postfix")) {// need to save orignal href as it will be replaced later
url.setAttribute("postfix", url.getAttribute("href"));
}
var postfix = url.getAttribute("postfix");
url.innerHTML = prefix + postfix;
url.href = prefix + postfix;
}
You have multiple syntax errors in your code. Plus a href=<span id = "url"></span> is nonsence. It can't work. Instead of that you should use attributes (see getAttribute/setAttribute). Also, it is much simpler to use swithc statement instead of if/else. Another thing: onchange=output(this.form.liste); - instead of this you can use onchange=output(this); as this will already point to your dropdown element there.

The question is pretty unclear, does this work?
document.getElementById("url").innerHTML = prefix + document.getElementById("url").innerHTML;

You could store the this snippet:
/web/sso/bw/ostrfer.jsp
as a constant like so:
var uri = "/web/sso/bw/ostrfer.jsp";
Then when the user selects the link you could append it like so:
var elem = document.getElementById("url");
elem.setAttribute('href', prefix + uri);
This should update the "href" attribute of the anchor tag with the new url.
I setup a test example so you can see it in action in this Fiddle. If you inspect the link with the browsers developer tools you can see that the href (originally an empty string "") has now been updated after executing the code to be "https://link1/web/sso/bw/ostrfer.jsp".
Hope this helps.

You have multiple syntax errors that are causing the problem:
First
prefix = "https://link2;
^ missing close quote here
Second
prefix = ""https://link5";
^ remove the extra quote here
Third
document.getElementById("url").innerHTML = praefix;
^ should be prefix
Fourth
<select id = "list" name = "list" onchange ='output(this.form.liste);' >
^ should be list or just 'this'
Even with the syntax errors, your code is still not right - it's not good to have a <span> within the href of an <a>.
Try this jsFiddle Demo - I changed the way the code works, it doesn't use the span.
Full fixed code:
<script>
function output () {
var index = this.selectedIndex;
var prefix = "";
var suffix = "/web/sso/bw/ostrfer.jsp";
prefix = "https://" + this.value;
var link = document.getElementById("url");
link.href = prefix + suffix;
link.innerHTML = prefix + suffix;
}
window.onload = function()
{
document.getElementById("list").onchange = output;
}​
</script>
<form>
<p>
<select id = "list" name = "list" >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
</form>

How can I disable an <option> in a <select> based on its value in JavaScript?

I have a <select> with a number of <option>s. Each has a unique value. I need to disable an <option> with a given defined value (not innerHTML).
Anyone have an idea how?

JavaScript, in 2022
You can use querySelectorAll, and forEach off of the resulting NodeList to do this same thing more easily in 2022.
document.querySelectorAll("#foo option").forEach(opt => {
if (opt.value == "StackOverflow") {
opt.disabled = true;
}
});
Do be mindful of string-comparisons, however. 'StackOverflow' and 'stackoverflow' are not the same string. As such, you can call .toLowerCase() on strings before comparing, or even go with a case-insensitive regular expression comparison like the this:
if ( /^stackoverflow$/i.test(option.value) ) {
option.disabled = true;
}
Pure Javascript (2010)
With pure Javascript, you'd have to cycle through each option, and check the value of it individually.
// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
(op[i].value.toLowerCase() == "stackoverflow")
? op[i].disabled = true
: op[i].disabled = false ;
}
Without enabling non-targeted elements:
// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
// lowercase comparison for case-insensitivity
if (op[i].value.toLowerCase() == "stackoverflow") {
op[i].disabled = true;
}
}
###jQuery
With jQuery you can do this with a single line:
$("option[value='stackoverflow']")
.attr("disabled", "disabled")
.siblings().removeAttr("disabled");
Without enabling non-targeted elements:
$("option[value='stackoverflow']").attr("disabled", "disabled");
​
Note that this is not case insensitive. "StackOverflow" will not equal "stackoverflow". To get a case-insensitive match, you'd have to cycle through each, converting the value to a lower case, and then check against that:
$("option").each(function(){
if ($(this).val().toLowerCase() == "stackoverflow") {
$(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
}
});
Without enabling non-targeted elements:
$("option").each(function(){
if ($(this).val().toLowerCase() == "stackoverflow") {
$(this).attr("disabled", "disabled");
}
});

Set an id to the option then use getElementById and disable it when x value has been selected, like so:
<body>
<select class="pull-right text-muted small"
name="driveCapacity" id=driveCapacity onchange="checkRPM()">
<option value="4000.0" id="4000">4TB</option>
<option value="900.0" id="900">900GB</option>
<option value="300.0" id ="300">300GB</option>
</select>
</body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){
document.getElementById("driveCapacity").value = "4000.0";
document.getElementById("4000").disabled = false;
}else{
document.getElementById("4000").disabled = true;
}
</script>

For some reason other answers are unnecessarily complex, it's easy to do it in one line in pure JavaScript:
Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;
or
selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;
The performance depends on the number of the options (the more the options, the slower the first one) and whether you can omit the escaping (the replace call) from the second one. Also the first one uses Array.find and arrow functions that are not available in IE11.

Use a straightforward selector:
document.querySelector('select[name="theName"] option[value="theValue"]').disabled = true;

Here with JQuery, if anybody search it:
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');
function select_disable_options(selectid,vals){
var selected = false ;
$('#'+selectid+' option').removeAttr('selected');
$('#'+selectid+' option').each(function(i,elem){
var elid = parseInt($(elem).attr('value'));
if(vals){
if(vals.indexOf(elid) != -1){
$(elem).removeAttr('disabled');
if(selected == false){
$(elem).attr('selected','selected');
selected = true ;
}
}else{
$(elem).attr('disabled','disabled');
}
}else{
$(elem).removeAttr('disabled');
}
});
}

I would like to give you also the idea to disable an <option> with a given defined value (not innerhtml). I recommend to it with jQuery to get the simplest way. See my sample below.
HTML
Status:
<div id="option">
<select class="status">
<option value="hand" selected>Hand</option>
<option value="simple">Typed</option>
<option value="printed">Printed</option>
</select>
</div>
Javascript
The idea here is how to disable Printed option when current Status is Hand
var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;
You may see how it works here:
https://jsfiddle.net/chetabahana/f7ejxhnk/28/

You can also use this function,
function optionDisable(selectId, optionIndices)
{
for (var idxCount=0; idxCount<optionIndices.length;idxCount++)
{
document.getElementById(selectId).children[optionIndices[idxCount]].disabled="disabled";
document.getElementById(selectId).children[optionIndices[idxCount]].style.backgroundColor = '#ccc';
document.getElementById(selectId).children[optionIndices[idxCount]].style.color = '#f00';
}
}