Okay probbaly my question is very common, and so many aks this question and answer this. But i have (kinda) have another problem. Usually is work if i text it into vendor, text cgame will follow what i text on vendor (keyup on real time), and i can change it on cgname (not affect to text vendor). But this is my problem, when cgname is empty or i erase text i wanna instaly text cgname into text vendor i mean duplicat text vendor to cgname if text cgname is erase or empty. How do i did that?
this my code on jquery
var cgname = $("#cgname");
$("#vendor").keyup(function() {
cgname.val( this.value );
});
I'm really2 sorry if u dont understand me what i said, my english really2 worst.
UPDATE :
So many people miss understanding my questio. So i'm gonna cleary.
1. I need duplictae text vendor into text cgname
2. If text cganme get erease or empty, go to point 1.
Based on AHJeebon's answer I think you are looking for this :
$("#vendor").keyup(function() {
$("#cgname").val( $(this).val());
});
$("#cgname").keyup(function() {
var val = $(this).val();
if(!val || val.length === 0 )
$(this).val($('#vendor').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
CG Name <input id='cgname' type='text'>
Vendor <input id='vendor' type='text'>
This is:
Edited: I took some code from #cpaulus
$("#vendor").keyup(function() {
$("#cgname").val( $(this).val());
});
$("#cgname").keyup(function() {
var val = $(this).val();
if(!val || val.length === 0 ){
$(this).val($('#vendor').val());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
CG Name <input id='cgname' type='text'>
Vendor <input id='vendor' type='text'>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<style>
div:not([class]){ color: red; }
</style>
<script>
$(document).on('keyup','#cgname',function() {
vendor = $(this).val();
console.log(vendor)
$('#vendor').val( vendor );
});
</script>
</head>
<body>
<input id="cgname" type='text'>
<input id="vendor" type='text'>
</body>
</html>
Related
Now this is just for reference for a future project but I am trying to call a function that reads in a string but displays a float after. So I first check the string then display a random number. The problem I am having, I think, is with the document.getElementById part. Any suggestions??
HTML File:
<html>
<body>
<input type="text" id="letter" value=""/><br/>
<input type="button" value="LETS DO THIS!" onclick="floatNum();"/></br>
<script type="text/javascript" src="letNum.js"></script>
</body>
</html>
External JS File:
function floatNum()
{
var val1 = document.getElementById("letter");
if (isNaN(val1)
{
alert(Math.random())
}
}
the following code is working:-
in your code,you missed closing parenthesis ")" near to "if condition"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
<script type="text/javascript">
function floatNum()
{
var letter = document.getElementById("letter");
if (isNaN(letter.value))// using input fields value not the whole object
{
alert(Math.random());
}
}
</script>
</head>
<body>
<input type="text" id="letter" value="" /><br />
<input type="button" value="LETS DO THIS!" onclick="floatNum();" />
</body>
</html>
Yes, you want to pass in the element in the function, like so:
<input type="button" value="LETS DO THIS!" onclick="floatNum(document.getElementById('letter'))"/></br>
And in your JS
function floatNum(el)
{
if (isNaN(el)
{
alert(Math.random())
}
}
In case of a reusable function - try not to make it dependent on your DOM. Think about what would happen if you rename your element or want to use this function again. You couldn't before - now you can.
The problem is on this line:
var val1 = document.getElementById("letter");
It should be:
var val1 = document.getElementById("letter").value;
The first sets val1 to the DOM element representing the input tag, the second sets it to the text value of the input tag (its contents).
You need to process the value of input field not the input field itself.
function floatNum()
{
var letter = document.getElementById("letter");
if (isNaN(letter.value) // using input fields value not the whole object
{
alert(Math.random())
}
}
You don't grab the value of the input, but the input itself.
Correct code would be :
var val1 = document.getElementById("letter").value;
I have 2 textfield with different ids. what I want to achieve is that when I write to textfield1 that content is immediately copied to the second one and if I edit the second one the first one remains unchanged, but also if I go back to first one and edit it, the content is just appended to the second one.
<input type="text" name="field1" id="f1" />
<input type="text" name="field2" id="f2" />
Code :
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
$('#f2').val($('#f1').val());
});
});
</script>
Try this,
$(document).ready(function () {
$("#f1").keypress(function (e) {
var val = $('#f2').val();
var code = e.which || e.keyCode;
$('#f2').val(val+(String.fromCharCode(code)));
});
});
Live Demo
you can write like this
<script type="text/javascript">
$(document).ready(function(){
$("#f1").keyup(function(){
var f2Text = $('#f2').val() + $(this).val();
$('#f2').val(f2Text );
});
});
</script>
you can also use the Angular JS which is more efficient and easy to use.
AngularJS
Angular JS will help you to develop SPA(Single Page Application).
I am trying to set up a donations page for people to give money to a non-profit and allow them to specify the uses of the money. I have it set up that it totals the amounts the giver puts in each field as they enter amounts. I am trying to add an input mask in each field, but it is just making my JavaScript crash and not do anything. Here is the code I currently have that works perfectly before any masks:
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
});
</script>
'toTotal' is the class name given to all the input boxes that need to be added up; that is also the class that needs a mask. 'giveTotal' is the id of the total field.
I have tried several variations I have found on StackOverflow and other sites.
Full Code:
<html>
<head>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
//This is one of the masking codes I attempted.
$('.toTotal').mask('9.99', {reverse: true});
//other options I have tried:
//$('.toTotal').mask('9.99');
//$('.toTotal').mask('0.00');
//$('.toTotal').inputmask('9.99');
//$('.toTotal').inputmask('mask', {'mask': '9.99'});
var calcTot = function() {
var sum = 0;
$('.toTotal').each( function(){
sum += Number( $(this).val() );
});
$('#giveTotal').val( '$' + sum.toFixed(2) );
}
calcTot();
$('.toTotal').change( function(){
calcTot();
});
//I have tried putting it here, too
});
</script>
<title>Addition</title>
</head>
<body>
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" class="toTotal"><br />
<input type="text" id="giveTotal">
</body>
</html>
There is no masking library script referenced in the sample code. You need to download the Digital Bush Masked Input Plugin Script and copy it into your JS folder.
Then add following script reference after 'jquery.js' line:
<script src="/js/jquery.maskedinput.min.js"></script>
I'm doing some very rudimentary javascript work and seem to hit a bump. For the life of me, I can't seem to find what should be a very basic answer on Google.
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function lowerCase(){
var input = document.send.inputText;
input.toLowerCase();
document.write(input);
alert(input);
}
</script>
</head>
<body>
<h1>Test Page</h1>
<form name="send">
<input type='text' name="inputText" onkeypress="lowerCase()"/>
</form>
</body>
</html>
My intent is that the function lowerCase is executed on entering information into the textbox and pressing enter. However, I can never seem to get the function to execute.
How about...
HTML:
<input type='text' name="inputText" onkeypress="lowerCase(this)">
JavaScript:
function lowerCase ( input ) {
setTimeout( function () {
input.value = input.value.toLowerCase();
}, 0 );
}
Live demo: http://jsfiddle.net/vXpj8/3/
function lowerCase ( e ) {
if ( e.keyCode === 13 ) {
this.value = this.value.toLowerCase();
e.preventDefault();
}
}
document.send.inputText.onkeypress = lowerCase;
Live demo: http://jsfiddle.net/vXpj8/1/
Notice, how I bind the event handler with JavaScript. I do this because I want to have the event object available in the function.
There's a space between the onkeypress attribute and equals sign. Remove that; it should work.
Fiddle: http://jsfiddle.net/iambriansreed/jEnxH/
<form name="send">
<input type='text' name="inputText">
</form>
<script>
document.send.inputText.onkeypress = function(event){
if(event.keyCode != 13) return;
this.value = this.value.toLowerCase();
alert(this.value.toLowerCase());
event.preventDefault();
};
</script>
If you want it to work when the enter key is pressed, then you'll need to deal with the form being submitted, since pressing enter in a text input element that is a form control submits the form.
More likely you want to change the value to lower case on some other event, such as keup, e.g.
<input onkeyup="this.value = this.value.toLowerCase();" ... >
Doing this sort of thing is a bit annoying for users though, since upper case letters are magically changed to lower case. If there is a back-end requirement for lower case letters, better to deal with it there than confuse users entering text.
a few issues with your code
first var input is a input box not the string, toLowerCase() is a string method, you need input value
var input = document.send.inputText;
alert(input.value);
second, onkeypress is excuted before text is entered, maybe you should consider change onkeypress to onkeyup
try if this helps
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function lowerCase(){
var input = document.send.inputText;
input.value = input.value.toLowerCase();
}
</script>
</head>
<body>
<h1>Test Page</h1>
<form name="send">
<input type='text' name="inputText" onkeyup="lowerCase()">
</form>
</body>
</html>
I am new with JavaScript, I have a value in an input field, like 0 or 1 and then when this value changes a word is changed to 'Off' or 'On' respectively.
I know this is pretty simple but I'm new with JavaScript as I said.
How does your code look like currently?
What have you tried so far?
EDIT
I'm working in the code right now so nothing great so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(value) {
if (value == 1)
return "ON";
else
return "OFF";
}
</script>
</head>
<body>
<input type="text" value="1" />
<p>ON OR OFF RIGHT HERE</p>
</body>
</html>
What difficulties are you encountering?
I need this values keep been updating all the time, if the value of the input field change the word must change either.
If you are new to javascript what tutorials/articles/books did you read so far in order to get started?
Not a specific tutorial right now, I'm googling.
EDIT 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}
}
</script>
</head>
<body>
<input type="text" id="toggler" value="1" onkeyup="change()" />
<div id="onoff"></div>
</body>
</html>
I'm trying to following the suggestions but still not working, what am I doing wrong here guys ?
You don't posted any code but here it goes some general code:
Your input:
<input type='text' id='myinput' onkeyup='contentChanged(this)' />
Look for other key events: http://unixpapa.com/js/key.html
Then, your function:
function contentChanged(myinput)
{
var myvalue = myinput.value;
if (myvalue == "1")
{
// Do something with value = 1
}
else if (myvalue == "0")
{
// Do something with value = 0
}
// And so on...
}
EDIT:
Now that you've posted your code, you can do like as I said:
<input type="text" value="1" onkeyup="change(this.value)" />
EDIT 2:
You're setting two events to your object and onChange just works to select object. Because of this I suggested you to use onkeyup or another key event. Just remove your onChange event out of your function.
Change to this and try:
function change(){
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
onoff.value = (Number(toggler.value)==1)? 'on' : 'off';
}
Number function is important to cast your input data and be sure that is a number.
Plus add an maxlength attribute on your textfield to limit user input data:
<input type="text" id="toggler" value="1" onkeyup="change()" maxlength="1" />
You need to add an onChange handler to your input field, this can be done in many ways. for example, let's say your input has an id of #toggler, and the element where either on or off needs to be shown has an id of #onoff
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}