I try to get value from text input when key is down.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text" onkeydown="console.log(this.value)">
</body>
</html>
Code demo: http://jsbin.com/funexipure/1/edit?html,console,output
Trouble description:
When I write 1 I have "" as value in console.
When I write 2 after this I have "1" as value in console, and so on
So, How I can get actual current value when key is down? Thank you very much.
You can use onkeyupto get what desire output is
<input type="text" onkeyup="console.log(this.value)">
Keyup function is quite good but it doesn't work if you paste the value with mouse click.
Try this
$('input').on('input propertychange', function(){
console.log($(this).val());
})
This will work in keyboard typing also when you paste with mouse click.
Reason
keyup check when you press the key from keyboard but propertychange work when you change any property anyway.
Related
I have explicitly defined a Javascript file for my HTML document. In my HTML, I have created a text box where the user can type in their name, then click a button called "submit."
In JS, as soon as they click "submit," I want to store what they have entered as their name in a variable (I'm using eventListener to know when they click "submit"). My question is, how would I be able to do this without using onclick in my HTML doc? Here is my following code at the moment:
my_button.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
One way would be to use oninput event and every time the user types in something update the variable in which you want to store the input. The input tag would look like this: <input type="text" oninput="myFunction()"> and in the function that is declared as the handler you can take the input and store wherever you want.
You can have the code separate. All you'd have to do in the HTML document is to load the javascript file.
Here's a snippet. First the content of the javascript file, and below the simplified HTML document.
let myButton = document.getElementById("theButton");
myButton.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
<button id="theButton">Test</button>
to add a separate javascript file do this anywhere in your html
<script type='text/javascript' src = 'path/filename' > </script>
to get the value of the input yoy need to slect it first. then you get the value via the value property.
see this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="my_input" type="text">
<button id="my_btn">click</button>
</body>
</html>
then you can use the following javascript.
var my_button = document.querySelector('#my_btn');
var my_input = document.querySelector('#my_input');
var value;
my_button.addEventListener('click',function () {
value = my_input.value;
alert(value);
})
hope this helps!
Been fiddling around with jQuery and HTML5, but I am stuck on a simple simple action.
JSFiddle here: http://tinyurl.com/oqmkyhr
I have a field input where I input a number, and when I press a button, the inputted number is rounded to 2 decimal places. The catch is, you cannot use or server side code AND it is all within 1 html document.
This is what I have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scotiabank Currency Converter</title>
<meta name="description" content="Converts currencies with Yahoo! Finance API">
<meta name="author" content="Kangze Huang">
<link rel="stylesheet" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
$('Amount').value = parseFloat(value).toFixed(2);
$('h2').text(value);
});
});
</script>
</body>
When I press the Validate button, it turns into NaN (On Chrome & other web-browsers)! On JSFiddle it does nothing.
What am I doing wrong? Perhaps syntax or something I'm missing?
It is because you have $('Amount').value. You are missing the '#' and the parenthesis and referencing the value wrong. But you have the right idea. What you can try is:
$('#validate').click(function(){
var amount = $('#Amount').value();
$('h1').text(parseFloat(value).toFixed(2));
});
});
Your selector should be $("#Amount"). You are missing the #.
Also, if you are trying to ASSIGN the value, you should be using:
$("#Amount").val( parseFloat(value).toFixed(2) );
I am not sure where you are getting your 'value' variable from, I don't see it getting assigned anywhere.
i see many syntax and other mistakes in your code, use the below code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scotiabank Currency Converter</title>
<meta name="description" content="Converts currencies with Yahoo! Finance API">
<meta name="author" content="Kangze Huang">
<link rel="stylesheet" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
$('#Amount').val(parseFloat(value).toFixed(2)); //you missed # in this, normally in jquery we use .val() method to set the value of the input types
$('h1').html(parseFloat(value).toFixed(2)); // in the above code you have used h1 so here also use h1
});
});
</script>
</body>
$('#validate').click(function(){
1^
$('Amount').value = parseFloat(value).toFixed(2);
2^ 3^ 4^
$('h2').text(value);
5^
validate is not Validate
Amount will match <Amount> elements which don't exist. ID selectors begin with a #
jQuery objects don't have value properties. DOM nodes (if they are form controls) do. You are probably looking for val()
value is an undefined variable. You need to define it before you use it. You probably want $('Amount').val() instead of using value at all.
You have no elements that match this selector, and heading elements should be used for headings.
So what you are probably looking for is:
$('#Validate').click(function() {
var value = $('#Amount').val();
value = parseFloat(value).toFixed(2);
console.log(value);
$('output').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<output></output>
If you want to select something by id in jquery, you need to use a # sign. In your case $('#Amount'); Also, there are no h2 elements on your page, so $('h2').text(value); won't do anything. Additionally, if you want to get the value of an input in jquery, you use the .val() functions, and not .value.
Fixed fiddle: http://jsfiddle.net/9kqbue5t/2/
I have a HTML form that contains a textarea and submit button. and a JS script that takes the value of the textarea.
The issue I'm facing is when I type text into the textarea and hit submit, the textarea value is empty. HOWEVER, if I hard code text into the textarea the hardcoded value is returned. If I erase the hardcoded value and delete the hardcoded value and type in my own, the hardcoded vale is still returned.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery/jquery-1.9.1.min.js"></script>
<script src="contentForm.js"></script>
</head>
<body>
<form method="post" >
<textarea name ="editor" id="editBox" rows="5" cols="2">type</textarea>
<p><input type="submit" id="submit" value="Submit"></p>
</form>
</body>
</html>
JS
function add() {
$("#submit").click(function() {
var message = "start js";
console.log(message);
var contents = $("textarea").val();
if(contents === undefined) {
console.log("contents undefined");
}
console.log(contents);
var item = {"id":"12", "content": contents};
var obj = JSON.stringify(item);
var obj2 = JSON.parse(obj);
console.log(obj2.id);
console.log(obj2.content);
});
}
$(document).ready(function () {
add();
});
Notice how the textarea above has "type" preloaded. That's the returned value. If I leave it empty, type in my own text in the form and hit submit, the console log shows empty for the value of contents.
I've tried this as well (using textarea id)
var contents = $("#editBox").val();
I'm assuming the issue lies with POST. Because when I hit enter, the text I entered is replaced with "type" (pre-loaded text).
Can POST interfere with it? How else can I go about retrieving the value?
I am not sure of the actual problem, but something strange I have noticed in past few days. console.log() does not work in chrome in few cases like this one. May be it is a firebug bug? Anyways, replaced console.log() with alert and removed the default value from textarea.
Updated fiddle: http://jsfiddle.net/eVmQ9/2/
This seems to work on chrome and firefox.
In FireFox, using JavaScript, when a user presses enter to select "ok" on an alert Window the onkeyup get fired. In Internet Explore this does not happen.
This HTML code demonstrates what I'm saying. Open it, type a character in the text field and select "ok" by pressing enter. Try it in FireFox and IE.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS example</title>
<script type="text/javascript">
function popup()
{
alert("bam")
}
</script>
</head>
<body>
<form>
Each inputted character causes an alert window:<input type="text" onkeyup="popup()" />
</form>
</body>
</html>
Is this as designed or is this a problem? How do you prevent FireFox from firing again?
EDIT: I found it on bugzilla, does bugzilla have a "vote-up" or equivalent feature? This through me astray when trying to trouble shoot and I was looking for infinite loop/recursion in the function that was being called.
This is because Firefox destroys its alerts much more quickly than other browsers, and it's possible for the focus to return to your field while the Enter key is still down. It's possible to reproduce this in other browsers by holding the Enter key down a bit longer.
I faced a very interesting issue.
I'm trying to set the focus on a input field using Javascript (no jQuery, I tried that also but not worked) using window.onLoad.
Just take a look at this fiddle : setFocusOnLoad
It's working fine in chrome browser but not in Firefox. Is there any issue in Firefox? How can I resolve it.
Edited:
Here is the code I copied in html file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onloadFocus(){
var name = document.getElementById('name');
// name.value='window.onload called';
name.focus();
}
window.onload=onloadFocus();
</script>
</head>
<body>
<div><input type='text' value='' id='name' name='name'></div>
</body>
</html>
Try adding a slight delay:
function onloadFocus(){
setTimeout(function() {
document.getElementById('name').focus()
}, 10);
}
Update jsFiddle
You must wrap the function-call into a function, otherwise it will be called immediately, not onLoad(the input is still unknown at this time):
window.onload=function(){onloadFocus();}
you should use window.onload=onloadFocus; instead of window.onload=onloadFocus(); because in case of window.onload=onloadFocus(); onloadFocus will run immediately and at that time input field may not be available.
jsfiddle
I got the solution for it. If you want to focus in Firefox. Write the focus function at the starting of the script tag.
<script type="text/javascript">
document.getElementById('name').focus();
// rest of the code here.
</script>
Hope this will help you.