Accessing input value on click or enter press
Question
I'm trying to simply return a value entered into an input field.
I want to use jQuery to access the value, store to a variable, and return it from a called function.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script language = "javascript" type = "text/javascript" src="jquery-2.1.1.js"> </script>
<script language = "javascript" type = "text/javascript" src = "Database.js"></script>
</head>
<body>
<div id="wrapper">
<input type ="text" id="input"/></br>
<input type="button" id="insert"/>
</div>
</body>
</html>
Here is my Javascript:
$(document).ready(function() {
var toSubmit = function() {
var text = $("#input").val();
return text;
};
var enterPressed = function() {
$('#input').keyup(function(button) {
if(button.keyCode==13) {
toSubmit();
}
};
function enterPressed();
});
I haven't worked on the functionality of the button included, please ignore that.
When I run this in Chrome's Javascript console I get "Unexpected token function for line 15. Am I incorrectly calling the function?
All I want the program to do is to return the value of the input box as soon as the user presses enter.
Update
HTML:
$(document).ready(function() {
var toSubmit = function() {
var text = $("#input").val();
return text;
};
var enterPressed = function() {
$('#input').keyup(function(button) {
if(button.keyCode==13) {
toSubmit();
}
});
};
enterPressed();
});
Javascript:
$(document).ready(function() {
var values = [];
var toSubmit = function() {
var text = $("#input").val();
values.push(text);
console.log(values);
return false;
};
var formSubmit = function(e) {
$('#form').submit(toSubmit);
};
});
1 answers
solution1
3 ACCPTED 2014-07-23 19:45:42
As @DontVoteMeDown said in the comments, function enterPressed(); is a syntax error and you forgot to close enterPressed . You also forgot to close the keyup with }); . I've corrected the errors in this code:
EDIT: Changed to event.which rather than event.keyCode ( which normalizes keyCode and charCode ).
$(document).ready(function() {
var toSubmit = function() {
var text = $("#input").val();
return text;
};
var enterPressed = function() {
$('#input').keyup(function(event) {
if(event.which == 13) {
toSubmit();
}
});
};
enterPressed();
});
Working jsFiddle example: http://jsfiddle.net/D66Zw/1/
UPDATE:
If you can, it would be better if you just listened for a form's submit event. That way you can call toSubmit and it will handle the enter key press and the submit button. Here is how you could do that:
JavaScript:
$(document).ready(function() {
var toSubmit = function(e) {
var text = $("#input").val();
// do whatever you want to do with 'text' variable here
// stop form from submitting
e.preventDefault();
return false;
};
var formSubmit = function() {
$('#form').submit(toSubmit);
};
// call this when you want to bind the submit handler
formSubmit();
});
HTML:
<form id="form">
<input type ="text" id="input"/><br />
<input type="submit" id="insert"/>
</form>
New jsFiddle example, clicking the submit button and pressing enter works: http://jsfiddle.net/D66Zw/2/
Pushing value to array
Before the toSubmit function, create the array:
var list = [];
In the toSubmit function:
// push text to array
list.push(text);
// output array in console
console.log(list);
jsFiddle: http://jsfiddle.net/D66Zw/4/ (open up the console to see the array every time enter is pressed)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.