I'm doing a small script with jquery, I'd like, that by clicking on the checkbox, I'll take the first textarea and pass it to the 2 text area without numbers, but, that textarea 1 will be as it is in 2
$(document).ready(function() {
function validate() {
if (document.getElementById('cheker').checked) {
results = document.getElementById("all").value;
final = results.string.replace(/\d+/g, '');
document.getElementById("filtrado").value(final);
} else {
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="all"></textarea>
<input id="checker" name="checker1" type="checkbox" />
<textarea id="filtrado"></textarea>
"value" is a property , as mentioned by jonas and you have a wrong in id "cheker > checker" , try this
$(document).ready(function() {
function validate() {
if (document.getElementById('checker').checked) {
results = document.getElementById("all").value;
final = results.replace(/\d+/g, '');
document.getElementById("filtrado").value = final;
} else {
}
}
});
No need to call string on a variable that is already a string, that and some typos and LGSon's comment, try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function validate() {
if (document.getElementById('checker').checked) {
results = document.getElementById("all").value;
final = results.replace(/\d+/g, '');
document.getElementById("filtrado").value=final;
} else {
}
}
$('#checker').change(function(){
validate()
});
});
</script>
</head>
<body>
<textarea id="all"></textarea>
<input id="checker" name="checker1" type="checkbox" />
<textarea id="filtrado"></textarea>
</body>
</html>
Related
I'm trying to clear the textfield in html using javscript if the given condition is met. For ex:- if the user types awesome in textfield then it should reset the textfield (no blank space nothing).
<html>
<input type="text" id="real" onkeypress="blank()" placeholder="tempo"/><br>
<script>
function blank(){
if(document.getElementById('real').value=="awesome"){
real.value='';
}
}
</script>
</html>
Here real is undefined, so instead of
...
real.value = '';
...
do this
...
document.getElementById('real').value = '';
...
Use variable real to store input element and use onkeyup event:
function blank() {
var real = document.getElementById('real');
if (real.value == "awesome") {
real.value = '';
}
}
<input type="text" id="real" onkeyup="blank()" placeholder="tempo" />
<br>
Another good example would be:
document.addEventListener('DOMContentLoaded', function() {
var real = document.getElementById('real');
real.addEventListener('keyup', blank, false);
}, false)
function blank() {
if (this.value === "awesome") {
this.value = '';
}
}
<input type="text" id="real" placeholder="tempo" />
<br>
Change the line
real.value=''
to
document.getElementById('real').value = '';
You can't just say "real.value" because javascript doesn't know what "real" is.
<html>
<input type="text" id="real" onkeypress="blank()" placeholder="tempo"/><br>
<script>
function blank(){
var real = document.getElementById('real');
if(real.value=="awesome"){
real.value='';
}
}
</script>
</html>
You where facing issue with input event "onkeypress" if change the event and use "onkeyup"
issue will be resolved.
<html>
<script>
function blank() {
var real = document.getElementById('real');
if (real.value == "awesome") {
real.value = '';
}
}
</script>
<input type="text" id="real" onkeyup="blank()" placeholder="tempo"/><br>
</html>
I have looked through a lot of the already asked questions and cannot find it. I need the previous appended message to be deleted once you hit the submit button again. So this will let you choose your character that you type into the input field and then it will append a message bellow telling you that you choose x character. After that you can resubmit another character which I want, but I do not want the previous append to be there.
I tried to do a search function in javascript and if it was not equal to -1 then delete the first p in the div, but that did not work=/
Thanks for your help in advance.
html:
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
<link rel='stylesheet' type='text/css' href='styles/main.css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='text/javascript' src='jquery/script.js'></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) : <br><br><input id='text' type="text" name="mess" value="">
<button id='button1' type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br>
<div id="box_holder"></div>
<br><br>
<button id='button2' type='button' name='button2' onclick="redirect()">Start Your Adventure</button>
</body>
</html>
JS:
$(document).ready(function() {
$('#button1').click(function(){
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
chooseChar = function () {
var text = document.getElementById('text').value;
var text = text.toLowerCase();
if(text == 'human') {
$(document).ready(function() {
$('#button1').click(function(){
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function(){
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text+".html";
window.location.href = url;
}
So your variable send gets sent and then it clears out the input field with either of those functions
$(document).ready(function() {
$('#button1').click(function(){
$('#box_holder').children('p').remove(); <===========
or Either of these should work
$('#box_holder').empty(); <===========================
var send = $("input[name=mess]").val();
$('#box_holder').append('<p>'+ 'You have chosen your character to be: '+send+'</p>');
});
$('input').css("color","blue");
});
Instead of using append, try using html as follows
$('#box_holder').html('<p>'+ 'You have chosen your character to be: '+send+'</p>');
Here is a Plunkr to explain it a little better
$(document).ready(function() {
$('#button1').click(function() {
var send = $("input[name=mess]").val();
$('#box_holder').html('<p>' + 'You have chosen your character to be: ' + send + '</p>');
});
$('input').css("color", "blue");
});
chooseChar = function() {
var text = document.getElementById('text').value;
text = text.toLowerCase();
if (text == 'human') {
$(document).ready(function() {
$('#button1').click(function() {
var div = $("#box_holder p").val();
var searchTerm = "You";
var searchDiv = div.search(searchTerm);
if (searchDiv != -1) {
$('div p').first().remove();
}
});
});
window.alert("HUMAN YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'orc') {
window.alert("ORC YOU ARE! (You may change your character at anytime)");
return;
} else if (text == 'elf') {
window.alert("ELF YOU ARE !(You may change your character at anytime)");
return;
} else {
window.alert("Start over! Please choose one of the characters above!");
$(document).ready(function() {
$('div').remove();
});
return;
}
$(document).ready(function() {
});
};
redirect = function() {
var text = document.getElementById('text').value;
var url = text + ".html";
window.location.href = url;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form class="" action="index.html" method="post">
Chose your character (human, orc, elf) :
<br />
<br />
<input id="text" type="text" name="mess" value="" />
<button id="button1" type="button" name="button" onclick="chooseChar()">Submit</button>
</form>
<br />
<div id="box_holder"></div>
<br />
<br />
<button id="button2" type="button" name="button2" onclick="redirect()">Start Your Adventure</button>
</body>
</html>
You have to remember, the append() function appends the content on the selected component. The html() function replaces all content inside of it.
Hope it helps
I want to disable submit button if there is a validation error from form inputs using jquery. The following is code that I am using:
HTML:
<form action="/order" id="orderForm" class="orderform" autocomplete="off" method="post" accept-charset="utf-8">
<div class="orderform-inner">
<ol class="questions" id="questions">
<li>
<span><label for="oName">Please enter your name or the company name</label></span>
<input class="finput" id="oName" name="oName" type="text" maxlength="20"/>
<span class="input-error"></span>
</li>
</ol>
</div>
<button name="submit" class="submit" type="submit">Submit</button>
</form>
JS:
function _validate(input) {
if( input.val() === '' ) {
_showError(input, 'EMPTYSTR');
return false;
}
return true;
}
function _checkForm() {
$('#orderForm .finput').each(function(){
$(this).focusout(function() {
_validate($(this));
});
});
}
$(document).ready(function() {
_checkForm()
$('form#orderForm').submit(function(event) {
event.preventDefault(); // for ajax submission
if(!_checkForm()) {
$('button.submit').prop('disabled', true);
}
else {
// ajax post
}
});
});
Update: There is no problem with disabling button. The problem is that after correcting errors, again the disabled attribute remains! What am I doing wrong?
You are not returning a result from the _checkForm(){} function. You do from the _validate one, and pass it to it, but you don't use/pass the result from _checkForm(), therefore this validation:
if(!_checkForm()) {...}
is always true, because _checkForm returns nothing(undefined) and your !-ing it. Also, if the check passes, you should return false to break the submit.
You forget the return false.
please try this:
function _validate(input) {
if( input.val() === '' ) {
_showError(input, 'EMPTYSTR');
return false;
}
return true;
}
function _checkForm() {
$('#orderForm .finput').each(function(){
$(this).focusout(function() {
_validate($(this));
});
});
}
$(document).ready(function() {
$('form#orderForm').submit(function(event) {
event.preventDefault(); // for ajax submission
if(!_checkForm()) {
$('button.submit').prop('disabled', true);
return false;
}
else {
// ajax post
}
});
});
test1.html
function _validate(input) {
if( input.val() === '' ) {
_showError(input, 'EMPTYSTR');
return false;
}
return true;
}
function _checkForm() {
$('#orderForm .finput').each(function(){
$(this).focusout(function() {
_validate($(this));
});
});
}
$(document).ready(function() {
_checkForm();
$('form#orderForm').submit(function(event) {
event.preventDefault(); // for ajax submission
if(!_checkForm()) {
$('button.submit').prop('disabled', true);
}
else {
// ajax post
}
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<form id="orderForm">
<input class="finput">
<button class="submit">submit</button>
</form>
<script type="text/javascript" src="test1.js"></script>
</body>
</html>
I am trying to get the initials (upper case letters) of the name that the user enters inside the text field. I get and error that my function getInitials() is not defined. Why do I get this error? Also I want to check if the function exists with typeof.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Second task HS</title>
</head>
<body>
<form name="myForm" id="eForm" action="#">
<label for="name">Name</label>
<input type="text" id="name" name="fullname"/><br>
<input name="button" type="button" value="Pick" onclick="getInitials();"/>
</form>
<div id="result">
</div>
<script type="javascript">
var nameInput = document.getElementById('name').value;//I need to stringify the input and use it!
var arr, nameArr, first, last;
nameArr = name.split(' ');
first = nameArr[0][0].toUpperCase();
last = nameArr[nameArr.length - 1][0].toUpperCase();
if(typeof getInitials == 'function'){
function getInitials(nameArr) {
return {first: first, last: last};
}
getInitials(nameInput);
}else{
alert('Check getInitials!');
}
</script>
</body>
</html>
From what I see, you are checking if the function exists... before creating it !
Try rather this JS code :
function getInitials( nameInput ) {
var nameArr = nameInput.split(' ');
return {
first: nameArr[0][0].toUpperCase(),
last: nameArr[nameArr.length - 1][0].toUpperCase()
};
}
function getInitialsFromInput() {
var nameInput = document.getElementById('name').value;
if(getInitials instanceof Function){ //strictly speaking, useless because it is obviously a function
alert(getInitials(nameInput));
}else{
alert('Check getInitials!');
}
}
getInitialsFromInput() ;
(and use "getInitialsFromInput()" for the onclick to gather the input's value)
You missed the text in <script type="javascript">, the statement should be like this <script type="text/javascript">
Here is the simple version of what you wanted, try it, this program expects first name Or first and last name only.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Second task HS</title>
<script type="text/javascript">
var arr, first, last;
function getInitials() {
var nameInput = document.getElementById('name').value; //I need to stringify
nameArr = nameInput.split(' ');
if(nameArr.length > 1){
first = nameArr[0].toUpperCase();
last = nameArr[1].toUpperCase();
}else{
first = nameInput.toUpperCase();
}
var result = {first: first, last: last};
alert(result.first);
alert(result.last);
}
</script>
</head>
<body>
<label for="name">Name</label>
<input type="text" id="name" name="fullname"/><br>
<input name="button" type="button" value="Pick" onclick="getInitials()"/>
<div id="result">
</div>
</body>
</html>
Your code makes no sense. getInitials Just is not assigned initially, so the inline click handler within the button will never work.
If you need the input value with first characters uppercased and initials, try something like:
document.querySelector('button[value=Pick]').onclick = getInitials;
function getInitials(e) {
var value = document.querySelector('#name')
.value.split(/\s+/)
.map( first2Upper );
if (value[0].length){
var ret = {first: value[0],
last: value[1],
initials: value[0][0] +(value[1] && value[1][0] || '')};
document.querySelector('#result').innerHTML =
value.join(' ') + ' (initials: '+ret.initials+')';
return ret;
} else {
alert('please enter a value');
}
}
function first2Upper(str) {
return str.slice(0,1).toUpperCase() + str.slice(1);
}
Here's a mockup in jsFiddle
For example i have a textbox, I am entering 12000 and i want it to look like 12,000 in the textbox How would I do this? Im using html to do the textbox
Try something like this
function addCommas(nStr)
{
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Then use it on your textboxes like so
<input type="text" id="txtBox" onchange="return addCommas(this.value)" />
Hope that helps
Use the jQuery autoNumeric plugin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Input with separator</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="autoNumeric.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
$("#myinput").autoNumeric(
'init', {aSep: ',', mDec: '0', vMax: '99999999999999999999999999'}
);
});
</script>
</head>
<body>
<input id="myinput" name="myinput" type="text" />
</body>
</html>
This is probably a bad idea...
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Comma Thousands Input</title>
<style>
label, input, button{font-size:1.25em}
</style>
<script>
// insert commas as thousands separators
function addCommas(n){
var rx= /(\d+)(\d{3})/;
return String(n).replace(/^\d+/, function(w){
while(rx.test(w)){
w= w.replace(rx, '$1,$2');
}
return w;
});
}
// return integers and decimal numbers from input
// optionally truncates decimals- does not 'round' input
function validDigits(n, dec){
n= n.replace(/[^\d\.]+/g, '');
var ax1= n.indexOf('.'), ax2= -1;
if(ax1!= -1){
++ax1;
ax2= n.indexOf('.', ax1);
if(ax2> ax1) n= n.substring(0, ax2);
if(typeof dec=== 'number') n= n.substring(0, ax1+dec);
}
return n;
}
window.onload= function(){
var n1= document.getElementById('number1'),
n2= document.getElementById('number2');
n1.value=n2.value='';
n1.onkeyup= n1.onchange=n2.onkeyup=n2.onchange= function(e){
e=e|| window.event;
var who=e.target || e.srcElement,temp;
if(who.id==='number2') temp= validDigits(who.value,2);
else temp= validDigits(who.value);
who.value= addCommas(temp);
}
n1.onblur= n2.onblur= function(){
var temp=parseFloat(validDigits(n1.value)),
temp2=parseFloat(validDigits(n2.value));
if(temp)n1.value=addCommas(temp);
if(temp2)n2.value=addCommas(temp2.toFixed(2));
}
}
</script>
</head>
<body>
<h1>Input Thousands Commas</h1>
<div>
<p>
<label> Any number <input id="number1" value=""></label>
<label>2 decimal places <input id="number2" value=""></label>
</p></div>
</body>
</html>
You can use the Javascript Mask API
You can try this simple Javascript
<script type="text/javascript">
function addcommas(x) {
//remove commas
retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;
//apply formatting
return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
HTML Code
<div class="form-group">
<label>Amount </label>
<input type="text" name="amount" onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
</div>
For user input I would recommend not formatting the value to include a comma. It will be much easier to deal with an integer value (12000), than a string value (12,000) once submitted.
However if you are certain on formatting the value, then as #achusonline has recommended, I would mask the value. Here is a jQuery plugin which would be useful to get this result:
http://digitalbush.com/projects/masked-input-plugin/
adding punctuation or commas of numbers on input change.
html code
<input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)">
Javascript Code
<script>
function addPunctuationToNumbers(number) {
return number.replace(/(\d{3})(?=\d)/g, "$1,");
}
</script>
<!DOCTYPE html>
<html>
<body>
<h1>On change add pumctuation to numbers</h1>
<input type="text" onkeyup="this.value=addPunctuationToNumbers(this.value)">
<script>
function addPunctuationToNumbers(number) {
return number.replace(/(\d{3})(?=\d)/g, "$1,");
}
</script>
</body>
</html>
You can use very handy JavaScript method, called Intl.NumberFormat:
<script>
//Value formatting
document.getElementById('your-input-id').addEventListener('change', function(event) {
//Check for specific CSS class of your input first
if (event.target.classList.contains('some-css-class')) {
// remove any commas from earlier formatting
const value = event.target.value.replace(/,/g, '');
// try to convert to an integer
const parsed = parseInt(value);
//NumberFormat options
const options = {
style: 'decimal',
maximumFractionDigits: 10,
useGrouping: true,
maximumSignificantDigits: 20,
};
// check if the integer conversion worked and matches the expected value
if (!isNaN(parsed) && parsed == value) {
// update the value
event.target.value = new Intl.NumberFormat('en-GB', options).format(value);
}
}
});
</script>