I have a form with a textarea input field. The primary objective is to strip down all the characters other than alphabets and digits from the input text and return the results in a div. I accomplish that with the following code:
$(document).ready(function () {
$('#input').keyup(function () {
var value = $('#input').val();
var replaced = value.replace(/[^\da-z]/gi, '').toLowerCase();
$('#output').val(replaced);
});
});
All of this works perfectly, and the results are updated real time as the user enters the input text. What I want to do is to log the input text after the user has entered the input text.
I'm performing the logging by sending the input text to a PHP script using $.get. So if I perform the GET inside the .keyup(function () { ... } block, it will send a GET request for each and every character entered.
For example, if the input is hello, then the logging will be peformed as follows:
h
he
hel
hell
hello
I only need the last part to be logged. I was thinking to perform the logging every X seconds and have the PHP script check if the input is valid. I'm new to programming, so I'm not sure how to do this.
What's a good way to accomplish this? I'm not looking for code to copy paste, so just the suggestion/approach is fine too.
Use the blur event:
$(document).ready(function () {
$('#input').keyup(function () {
var value = $('#input').val();
var replaced = value.replace(/[^\da-z]/gi, '').toLowerCase();
$('#output').val(replaced);
});
$('#input').blur(function(){
//send data
});
});
http://api.jquery.com/blur/
Related
I'm trying figure out a way to format in live an amount of an input box with local's 'it-IT' and minimumFractionDigits of > 2.
This is my code https://jsfiddle.net/oLgtwjfr/
$(document).on('keyup', '#inputKeyupExample', function(event) {
var $this = $( this )
var elementThis = this
var input = $this.val()
$this.val(formatNumber(parseInt(input)))
})
function formatNumber(x) {
return x.toLocaleString("it-IT",
{ minimumFractionDigits: 2 });
}
I except the formatted output of 25000 to be 25.000,00 on keyup. But the actual output is 2,00.
I'm not sure the input box supports that kind of functionality without a lot of extra programming. Also, it would become messy for the user to edit or change the value with lots of numeric formatting in place in that text box.
Instead, consider a formatting display separate to the input like the following:
https://jsfiddle.net/declanmcd/nuy9q5g4/4/
So instead of
$this.val(formatNumber(parseInt(input)));
use
$("#output").text(formatNumber(parseInt(input)));
I have this function to validate postcodes (UK):
/* validate Post Code */
$.fn.validatePostCode = function(postcode)
{
regex = /^[A-Za-z]{1,2}\d{1,2}\s*\d{1}[A-Za-z]{2}$/i;
if (!regex.test(postcode)) {
return false;
}
};
as you can see it's just a simple regex checking for amount of character types at certain points.
To trigger it (or at least in the part I'm using it for) I use:
$(document).ready(function()
{
$('#nextBtn').on('click', function()
{
var postcode = $('#postcode').val();
console.log(postcode);
if (!$.fn.validatePostCode(postcode)) {
alert('hi');
} else {
alert('not valid');
}
});
});
doing the console.log is so I can see the value of the postcode each check, and I can see it updates. However, upon changing the input so I know it should be wrong still alert('hi') instead of Not Valid. I've even added a console.log in my validate function and that shows when the postcode is invalid, so why doesn't the alert message change each click?
I used this to validate my regex: http://www.regextester.com/ and it said my pattern was ok when I typed various postcodes in, so I'm a little lost at the moment, any ideas?
Thanks
Ok, so I found the solution rather quickly - it's because my function doesn't return a value until it fails. Needed to add a return true; outside of the if statement.
Hope this helps anyone who has a similar problem :)
I'm getting an undefined is not a function error when I try and run the following code:
$(document).ready(function() {
$("#textarea").select(function() {
var selection = window.getSelection();
$("#upper").click(function() {
// alert(selection);
var upper = selection.toUpperCase();
var text = $("#textarea").text();
$("#textarea").html(text.replace(selection, upper));
});
});
});
I'm trying to select text from a textarea, and click a button to make the selection uppercase. Here is a JSFiddle of the complete code.
getSelection returns an object. You need to call toString() on it.
$(document).ready(function () {
var selection;
$("#textarea").select(function () {
selection = window.getSelection().toString();
});
$("#upper").click(function () {
if (selection) {
var upper = selection.toUpperCase();
var text = $("#textarea").text();
$("#textarea").html(text.replace(selection, upper));
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/8syb2d8j/4/
Notes:
your event handlers were nested (usually a bad idea)
I added a check to ensure that there is a selection before trying to upppercase it.
as, potentially, the text you highlight may occur more than one, using replace is actually not a great solution. Try highlight the second i and see what I mean. You should use the properties of the selection object instead to work out the exact part of the string that was selected,
After browsing around for portable solutions, I found the jQuery TextRange plugin, which, based on the demo is more than enough for this problem.
i'm trying to live edit a text box value so that the result will be split every two character,
adding a column and starting from some default character.
what i have till now is this code, that obviously doesn't work:
$('#textboxtext').keyup(function (){
var text = $("#textboxtext").val();
//$(text).attr('maxlength', '12');
var splitted = text.match(/.{2}|.{1,2}/g);
var result = ("B8:27:EB:" + splitted.join(':'));
});
i need the live split and the default character inside the textbox but i really don't know where to start...
From your code, it seems like you're trying to create a text box that has some very specific behavior. It looks like it needs to format its value in such a way that it always begins with certain 'prefix' of B8:27:EB:, and every subsequent pair of characters is is separated by a :. This is actually a very complex behavior and you have to consider a number of different interactions (e.g. what happens when the user attempts to delete or modify the prefix). I usually try to avoid such complex controls if possible, however here is a quick implementation:
$('#textboxtext').keyup(function (e){
var prefix = "B8:27:EB:",
text = $(this).val(),
splitted, result;
if (text.indexOf(prefix) == 0)
text = text.substr(9);
else if (prefix.indexOf(text) == 0)
text = "";
text = text.replace(/:/g, '');
splitted = text.match(/.{1,2}/g) || [];
result = prefix + splitted.join(':');
$(this).val(result);
});
Demonstration
Type inside the text box and see what happens. Also note, there are all kinds of interaction that this implementation doesn't account for (e.g. right-clicking and pasting into the text box), but it's a start.
I have been reading about how to manipulate regex, and I do think I have the correct formula for my purpose, but I cannot seem to get it to work.
This is my code
$.validator.addMethod("pwcheck", function(value) {
var regex = /^[a-zA-Z0-9]*$/;
if (!regex.test(value)) {
return false;
}
});
I added this method to my password in the .validate({rules{}});
It is linked properly, but whatever I input in the text box I get the message I wrote in the .validate({messages{}});
the user should be only allowed to input letters and numbers, and seeing other methods posted on this site I tried to mimic and copy them, but it isn't working.
$.validator.addMethod("pwcheck", function(value) {
return /^[A-Za-z0-9]*$/.test(value)
});