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">

How to get ckeditor textarea value using jquery?

I am using ckeditor on textarea but i could not get data from it.
Code :
<textarea name="DSC" class="materialize-textarea"></textarea>
<script>
CKEDITOR.replace('DSC');
</script>
Jquery :
var title = $('input[name=TITLE]').val();
var desc = $('textarea[name=DSC]').text();
var formdata = 'TITLE='+title+'&DSC='+desc;

No need for jQuery CKEditor has its own method to get data from converted textarea:
var desc = CKEDITOR.instances['DSC'].getData();
OR:
var desc = CKEDITOR.instances.DSC.getData();

Use id attibute in textarea and use that id in CKeditor instead of textarea's name check bellow
<textarea name="textareaname" id="textarea-id"></textarea>
CKEDITOR.replace( 'textarea-id');//use id not name//
var ckValue = CKEDITOR.instances["textarea-id"].getData(); or
var ckValue = CKEDITOR.instances.textarea-id.getData();

alert(CKEDITOR.instances.DSC.getData());

Past Text area id below.
CKEDITOR.instances['Text_Area_Id_Here'].getData();
For example, i have text area
<textarea class="form-control" id="Description" name="description" width="100%" height="150" ckeditor="true" maxlength="20000" ismandatory="false">
</textarea>
I got value of text area like this
var description = CKEDITOR.instances['Description'].getData();

Using the jQuery_Adapter you may write:
$(function () {
$('textarea[name="DSC"]').ckeditor();
$('#btn').on('click', function(e) {
console.log('ckeditor content: ' + $('textarea[name="DSC"]').val());
})
});
Include files:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.9/adapters/jquery.js"></script>
HTML:
<textarea name="DSC" class="materialize-textarea"></textarea>
<button id="btn">Get text</button>

<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<button type="button" id="getDataBtn">Get Data</button>
</form>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
$(document).ready(function(){
$("#getDataBtn").click(function(){
var editorData= CKEDITOR.instances['editor1'].getData();
alert(" your data is :"+editorData);
})
});
</script>

//getting data form ckeditor in textarea.
var NodeDataSessionTextarea = {};
jQuery('.class-textarea').each(function(index, el) {
var editor_id = jQuery(this).attr('id');
var elevalue = jQuery(this).val();
// Getting ckeditor instance.
var editor = CKEDITOR.instances[editor_id];
if (editor) {
editor.on('key', function(e) {
var self = this;
setTimeout(function() {
//store data in object with id
NodeDataSessionTextarea[editor_id] = self.getData();
}, 10);
});
editor.on('afterCommandExec', function(e) {
var self = this;
setTimeout(function() {
//store data in object with id
NodeDataSessionTextarea[editor_id] = self.getData();
}, 10);
});
editor.on( 'blur', function() {
//store data in session
var nodedataencodetextarea = JSON.stringify(NodeDataSessionTextarea);
sessionStorage.setItem("NodeDataSessionTextarea", nodedataencodetextarea);
});
}
});
//put data in ckeditor.
var editor = CKEDITOR.instances[id];
if (editor) {
editor.setData(getTemplateData);
}

For an update of Bogdan Kuštan's answer using CKEditor 5 (tested in may 2022):
editor.getData() is the new way of getting the Data from the editor.
Here is one common example of using it: filling an hidden field on submitting the form.
import ClassicEditor from '.../src/ckeditor.js';
ClassicEditor
.create('#editor-container')
.then(editor => {
persistForm(editor);
};
function persistForm(editor)
{
document.querySelector('form').addEventListener('submit', (e) => {
document.querySelector('.hidden-input').value = editor.getData();
});
}
This post is also a reminder for myself later.

You should use getData() method to get data from CKEDITOR.
<textarea name="DSC" class="materialize-textarea" id="DSC"></textarea>
<script>
CKEDITOR.replace('DSC');
</script>
//reference the id DSC
var desc = CKEDITOR.instances['DSC'].getData();

Regex/other method to read user email address on input and hide/show a div respectively

I am trying to read the user email address on input and if it is hotmail.com or yahoo.com then then I will hide the div element. However I am still struggling to get the hotmail.com string to be found and matched.
Here is my code below..
javascript:
$().ready(function () {
var userEmail = document.getElementById("Username");
var paymentBox = document.getElementById("divPaymentMethod");
$(userEmail).blur(function () {
if ($(userEmail).val() != "") {
var Name = $(userEmail).val();
if (Name.indexOf("#hotmail.com") > -1) {
$(paymentBox).hide();
}
else {
$(paymentBox).show();
}
}
});
html:

Your code seems correct as long as you are checking only "...#hotmail.com".
If you are using this .aspx page inside any master page then id of the username will be changed to like "ctl_something..Username".
And it is accessed by asp.net code through Username.ClientID.
So I think you are mistaking on that ID part.
Hope this helps.

this will help you to find out #hotmail.com and #yahoo.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sub").click(function(){
var v=$("#em").val();
if(v.search("#hotmail.com")!=-1 || v.search("#yahoo.com")!=-1)
{
alert();
}
});
});
</script>
<input type="text" id="em">
<button id="sub">submit</button>

this provide you real-time checking
<script type="text/javascript">
$(document).ready(function () {
$("#em").focusout(function(){
var v=$("#em").val();
if(v.search("#hotmail.com")!=-1 || v.search("#yahoo.com")!=-1)
{
alert();
}
});
});
</script>
<input type="text" id="em">

Cannot get jQuery to get 2 values of input boxes

I am developing a little script on jsfiddle.com
I can get it to work with one element like in this jsfiddle: http://jsfiddle.net/8hXGq/3/
Here's the jQuery code:
jQuery(function() {
$("input[name=action]").click(function() {
value = $(':Password').val();
alert(value);
});
})
but then when I try to get 2 input values like in this jsfiddle it does not work
Visit http://jsfiddle.net/8hXGq/2/
Here's the jQuery code
jQuery(function(){
$("input[name=action]").click(function(){
newas = $(':Login').val();
value = $(':Password').val();
alert(value);
alert(newas);
});
})
How do I fix this problem?

':Password' is shorthand for input[type="password] thus works. Your problem is $(':Login') here you are looking for element input[type="Login] which doesn't exists
Use
jQuery(function () {
$("input[name=action]").click(function () {
newas = $("input[name=Login]").val();
alert(newas);
value = $(':Password').val();
alert(value);
});
})
DEMO

Try this:
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('input[name=Login]').val();
value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
DEMO

Please try this:
if get value on the basis of name property then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $('input[name=Password]').val();
alert(value);
alert(newas);
});
});
If get value on the basis of id then use it:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $("input[id$='Login']").val();
var value = $("input[id$='Password']").val()
alert(value);
alert(newas);
});
});

Change your jquery to look like this
jQuery(function(){
$("input[name=action]").click(function(){
newas = $('[name=Login]').val();
value = $('[name=Password]').val();
alert(value);
alert(newas);
});
});

:Password is pseudo for type password, not for name. To access by name use [name=Login].
Also use var keyword as without var you initialized two global variable which is not allowed in ecmascript 5 strict mode and cause confusion sometime:
jQuery(function () {
$("input[name=action]").click(function () {
var newas = $('input[name=Login]').val();
var value = $(':Password').val();
alert(value);
alert(newas);
});
})
Here is Demo

:password is the Password selector of jQuery, thats why its not working with other pseudos.
https://api.jquery.com/password-selector/
i recommend NOT to do it how you did. instead it'll be better to acces by IDs.
this is working:
http://jsfiddle.net/Vy23k/1/
<input type="text" size="20" maxlength="15" name="login" id="login" />
<input type="password" size="32" maxlength="64" name="password" autocomplete="off" id="password" />
<input type="submit" name="action" class="button" value="Preview">
jQuery(function(){
$("input[name=action]").click(function(){
login = $("#login").val();
//pw = $(':Password').val(); //pseudo selector
pw = $("#password").val(); //better way
alert(login + " - " + pw);
});
})

Delete default value of an input text on click

I have an input text:
<input name="Email" type="text" id="Email" value="email#abc.example" />
I want to put a default value like "What's your programming question? be specific." in Stack Overflow, and when the user click on it the default value disapear.

For future reference, I have to include the HTML5 way to do this.
<input name="Email" type="text" id="Email" value="email#abc.example" placeholder="What's your programming question ? be specific." />
If you have a HTML5 doctype and a HTML5-compliant browser, this will work. However, many browsers do not currently support this, so at least Internet Explorer users will not be able to see your placeholder. However, see JQuery HTML5 placeholder fix « Kamikazemusic.com for a solution. Using that, you'll be very modern and standards-compliant, while also providing the functionality to most users.
Also, the provided link is a well-tested and well-developed solution, which should work out of the box.

Although, this solution works, I would recommend you try MvanGeest's solution below which uses the placeholder-attribute and a JavaScript fallback for browsers which don't support it yet.
If you are looking for a Mootools equivalent to the jQuery fallback in MvanGeest's reply, here is one.
--
You should probably use onfocus and onblur events in order to support keyboard users who tab through forms.
Here's an example:
<input type="text" value="email#abc.example" name="Email" id="Email"
onblur="if (this.value == '') {this.value = 'email#abc.example';}"
onfocus="if (this.value == 'email#abc.example') {this.value = '';}" />

This is somewhat cleaner, i think. Note the usage of the "defaultValue" property of the input:
<script>
function onBlur(el) {
if (el.value == '') {
el.value = el.defaultValue;
}
}
function onFocus(el) {
if (el.value == el.defaultValue) {
el.value = '';
}
}
</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

Using jQuery, you can do:
$("input:text").each(function ()
{
// store default value
var v = this.value;
$(this).blur(function ()
{
// if input is empty, reset value to default
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
// when input is focused, clear its contents
this.value = "";
});
});
And you could stuff all this into a custom plug-in, like so:
jQuery.fn.hideObtrusiveText = function ()
{
return this.each(function ()
{
var v = this.value;
$(this).blur(function ()
{
if (this.value.length == 0) this.value = v;
}).focus(function ()
{
this.value = "";
});
});
};
Here's how you would use the plug-in:
$("input:text").hideObtrusiveText();
Advantages to using this code is:
Its unobtrusive and doesn't pollute the DOM
Code re-use: it works on multiple fields
It figures out the default value of inputs by itself
Non-jQuery approach:
function hideObtrusiveText(id)
{
var e = document.getElementById(id);
var v = e.value;
e.onfocus = function ()
{
e.value = "";
};
e.onblur = function ()
{
if (e.value.length == 0) e.value = v;
};
}

Enter the following
inside the tag, just add onFocus="value=''" so that your final code looks like this:
<input type="email" id="Email" onFocus="value=''">
This makes use of the javascript onFocus() event holder.

Just use a placeholder tag in your input instead of value

we can do it without using js in the following way using the "placeholder" attribute of HTML5
( the default text disappears when the user starts to type in, but not on just clicking )
<input type="email" id="email" placeholder="xyz#abc.example">
see this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

<input name="Email" type="text" id="Email" placeholder="enter your question" />
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.
I think this will help.

Why remove value? its useful, but why not try CSS
input[submit] {
font-size: 0 !important;
}
Value is important to check & validate ur PHP

Here is a jQuery solution. I always let the default value reappear when a user clears the input field.
<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email#abc.com" />
<script>
$("#Email").blur(
function (){
if ($(this).val() == "")
$(this).val($(this).prop("defaultValue"));
}
).focus(
function (){
if ($(this).val() == $(this).prop("defaultValue"))
$(this).val("");
}
);
</script>

I didn't see any really simple answers like this one, so maybe it will help someone out.
var inputText = document.getElementById("inputText");
inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; }
inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; }

Here is an easy way.
#animal represents any buttons from the DOM.
#animal-value is the input id that being targeted.
$("#animal").on('click', function(){
var userVal = $("#animal-value").val(); // storing that value
console.log(userVal); // logging the stored value to the console
$("#animal-value").val('') // reseting it to empty
});

Here is very simple javascript. It works fine for me :
// JavaScript:
function sFocus (field) {
if(field.value == 'Enter your search') {
field.value = '';
}
field.className = "darkinput";
}
function sBlur (field) {
if (field.value == '') {
field.value = 'Enter your search';
field.className = "lightinput";
}
else {
field.className = "darkinput";
}
}
// HTML
<form>
<label class="screen-reader-text" for="s">Search for</label>
<input
type="text"
class="lightinput"
onfocus="sFocus(this)"
onblur="sBlur(this)"
value="Enter your search" name="s" id="s"
/>
</form>