We Keep Coding

Change specific text into dots

$("#txtField").keyup(function(){
let data = $(this).val();
//alert(data);
let splitData = data.split("-");
splitData[1] = "****";
splitData[3] = "*******";
if($(this).val().length == 19 && $(this).val().indexOf("-") > 0)
$(this).val(splitData.join("-"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">
Sample Input
ABC-1234-11-1234567
I have this code above as example. But the problem here is that I can still see the 1234 upon inputting a text to the textbox. What I want to achieve here is that when I input the 1234 is it will automatically change into dot (like the type="password").
Note
Sample text above may change but the format is fix. It has three(3) dashes(-)
Expected Output
BLG-****-11- ******

Another version you can try, using RegExp:
//$('#txtField').on('keyup', function(){ // works
$('#txtField').on('input', function(){ // better
let s = this.value;
if (
/^(.{3}\-.{4}\-.{2}\-)(.{1,7})$/.test(s) ||
/^(.{3}\-)(.{1,4})$/.test(s)
) {
this.value = RegExp.$1 + RegExp.$2.replace( /./g, '*' );
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">
And I totally agree with #User863 - using the input event is better.

You can do it like this using regular expressions:
$("#txtField").keyup(function() {
let data = $(this).val();
dots = data.replace(/\d+/g, "*");
$(this).val(dots);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtField"/>

My suggestion is to prevent to use input method because its new and not supported in all browsers reference, this is mostly same to #User863 user's answer, here i have used keyup event, this is bit show a character when type in textbox and then after it will be convert into *.
$("#txtField").on('keyup', function() {
let data = $(this).val();
let splitData = data.split("-");
if (splitData[1])
splitData[1] = splitData[1].replace(/./g, '*');
if (splitData[3])
splitData[3] = splitData[3].replace(/./g, '*');
$(this).val(splitData.join("-"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">

Using input event.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
https://caniuse.com/#search=input%20event
$("#txtField").on('input', function() {
let data = $(this).val();
let splitData = data.split("-");
if (splitData[1])
splitData[1] = splitData[1].replace(/./g, '*');
if (splitData[3])
splitData[3] = splitData[3].replace(/./g, '*');
$(this).val(splitData.join("-"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<input type="text" id="txtField" maxlength="19">

populate input fields from php / javascript

How can I populate 50 html5 input fields from an external delimited "|" text file ("players.txt"):
Smith, Bob|Jones, James|Cavanaugh, Harvey|
I have input fields like so:
<input type="text" name = "N01" id = "I01">
<input type="text" name = "N02" id = "I02">
<script>
$jQuery.get('assets/players.txt', function(data) {
splitString = dataString.split("|");
$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);
});
</script>

Try getting html elements using jquery $ sign such as
$('#I01').val(splitString[0]);
$('#I02').val(splitString[1]);
$('#I03').val(splitString[2]);

You're currently referencing the wrong data variable dataString, instead reference data. Also, if you know your IDs are sequential, you can avoid writing 50 different lines of JS and run a for loop, for instance:
for(i=0; i<splitString.length; i++){
id = "#I0"+(i+1);
$(id).val(splitString[i]);
}

Don't set the value of each element individually, use a forEach loop.
Make sure to take into account string padding.
splitString.forEach((str, i) => {
document.querySelector('#I' + String(i).padStart(2, '0'))
.value = str;
});

let dataString = "Smith, Bob|Jones, James|Cavanaugh, Harvey|";
let splitString = dataString.split("|");
for (let i = 0; i < splitString.length; i++) {
$("#I0" + i).val(splitString[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="N01" id="I01">
<input type="text" name="N02" id="I02">

Example without ajax:
$(function(){
var splitString = 'Smith, Bob|Jones, James|Cavanaugh, Harvey';
splitString = splitString.split("|");
$('#playersInputs').empty();
$.each(splitString, function(i,v){
$('<input type="text" />')
.attr('name', 'N'+("0"+(i+1)).slice(-2))
.attr('id', 'I'+("0"+(i+1)).slice(-2))
.val(v)
.appendTo('#playersInputs');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>
Example With ajax:
you must replace /path/to/your/text-file with the actual url
$(function(){
$.get('/path/to/your/text-file', function(data) {
var splitString = data.split("|");
$('#playersInputs').empty();
$.each(splitString, function(i,v){
$('<input type="text" />')
.attr('name', 'N'+("0"+(i+1)).slice(-2))
.attr('id', 'I'+("0"+(i+1)).slice(-2))
.val(v)
.appendTo('#playersInputs');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='playersInputs'>
</div>

append html node with multi input from value

I want input to enter value number
and When entering the value will be create html node with input inside it
ex
<input>
and when enter value like 3
it will apper
<div><input id='input1-3'><input id='input1-3'><input id='input1-3'></div>
<div><input id='input2-3'><input id='input2-3'><input id='input2-3'></div>
thanx

try this i think it will help you ,
<body>
<input type="text" id='inputnum'>
</body>
jquery,
$(document).ready(function(){
$('#inputnum').on('change',function(){
var a=parseInt($(this).val());
console.log(a);
for(var i=1;i<a+1;i++)
{
var divs='<div>'
for(var j=1;j<a+1;j++)
{
divs=divs+'<input id="input'+i+'-'+j+'">';
}
divs=divs+'</div>';
$('body').append(divs);
}
})
});
Complete JSFiddle Example https://jsfiddle.net/Praveent696/7bt74fbj/

If I correctly understand what you want to do, i think that you just have to use append function like this.
<input id="input1">
<script>
$(document).on("keypress", "input#input1", function() {
var n = this.value;
for (var i=0;i<n;i++){
var x = document.createElement("input");
x.setAttribute("id", "wathever");
document.body.appendChild(x);
}
});
</script>

how to store input box number in jQuery

Imagine how a normal calculator do. Use click button to input the data in a display box. Now i want to click a button to show "+" and also remove all the number in display but store it. So I can click to show the new number. After that, store those data include number1, "+" and number 2. For example: ("1","+" "2"). The reason of doing that but not using javascript for normal calculating is because I want to use Ajax to send to php and use php to execute the maths.However, I get stuck in this part.
var memory = "";
$("#add").click(function() {
memory += $show.val() + "+";
if($show.val().length >= 1){
$show.val("+");
} else {
$show.val("");
}
}

[Obligatory warning against evaluated code from a string on a server]
I would recommend trying to get a working version of your project using only javascript before trying more advanced concepts.
var memory = [];
$("#add").click(function() {
var val = $show.val();
if (val)
memory.push(val);
$show.val('+');
});
$('#submit').click(function () {
var s = memory.join('+');
memory = [];
$.get(...
});

Check Fiddle here
var one = $("#one");
var two = $("#two");
var add = $("#add");
var show = $("#show");
var equal = $("#equal");
var memory = "";
one.click(function(){
memory += "1";
show.val("1");
});
two.click(function(){
memory += "2";
show.val("2");
});
add.click(function(){
memory += "+";
if(show.val().length >= 1)
show.val("+");
else
show.val("");
});
equal.click(function(){
show.val(memory)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="show" type="text"/>
<input id="one" type="button" value="1"/>
<input id="two" type="button" value="2"/>
<input id="add" type="button" value="+"/>
<input id="equal" type="button" value="="/>

why are names not being added to the list?

I found this fiddle and I am trying to get it to work...I can not figure out why the names are not being added to the list, for some reason Add button is acting like a submit button and I can not tell why...It should add all the numbers to a list so when I click submit, then it should send the numbers in an array..
JavaScript:
function bindName() {
var inputNames = document.getElementById("names").getElementsByTagName("inputNames");
for (i = 0; i < inputNames.length; i++) {
inputNames[i].onkeydown = function() {
if (this.value == "") {
setTimeout(deletename(this), 1000);
}
}
}
}
document.getElementById("addName").onclick = function() {
var num1 = document.getElementById("name");
var myRegEx = /^[0-9]{10}$/;
var myRegEx = /^[0-9]{10}$/;
var itemsToTest = num1.value;
if (myRegEx.test(itemsToTest)) {
var form1 = document.getElementById("names");
var nameOfnames = form1.getElementsByTagName("inputNames").length;
var newGuy1 = document.createElement("inputNames");
newGuy1.setAttribute("id", nameOfnames);
newGuy1.setAttribute("type", "text");
newGuy1.setAttribute("value", num1.value);
form1.appendChild(newGuy1);
num1.value = "";
bindName();
}
else {
alert('error');
}
};
HTML:
<h1>Enter Name</h1>
<div id="mainName">
<h2>name</h2>
<label for="name">Add Names: </label>
<input id="name" type="text">
<button id="addName">Add</button>
<form>
<div id="names">
</div>
<input METHOD="POST" action="text.php" type="submit" value="Submit">
</form>
</div>

I've seen
document.createElement("inputNames");
Shouldn't be
document.createElement("input");
?

Because this /^[0-9]{10}$/; will accept only 10 numbers and only that, try entering 1234567890 and you will see no error.

I'm not sure why your "name" field is restricted to 10 digit numbers, but I've got the thing to work.
http://jsfiddle.net/y8Uju/4/
I think the problem was that you were trying to create an element with the tag name inputNames, but that's not a valid tag. Instead I changed it to create inputs, and set the class to inputNames.