html/javascript how to display user input with a method on button click?
Question
I'm trying to get an alert window to display the first and last name a user inputs after they click "submit". I'm trying to do this using methods in javascript, but I can't get it to display after the user clicks the button.
Here is my code:
<html>
<head>
<meta charset = 'utf-8'>
<title>Form</title>
<script type = 'text/javascript'>
var firstName; //first name
var lastName; //last name
function getFirstName() { //get first name
return document.getElementById("first_name").value;
}
function getSecondName() { //get last name
return document.getElementById("last_name").value;
}
function display() { //get the names and display them
firstName = getFirstName();
lastName = getLastName();
window.alert(firstName + lastName);
}
document.getElementById("Submit").onclick = display();
</script>
</head>
<body>
<form id='form' method = 'post'>
<p> First Name: <input type='text' id = "first_name"/></p>
<p> Last Name: <input type='text' id = "last_name"/> </p>
<p><input id ="Submit" type = "button" value = 'clickme' /></p>
</form>
</body>
</html>
6 answers
solution1
1 ACCPTED 2014-10-07 20:32:26
<form id='form' method = 'post'>
<p> First Name: <input type='text' id = "first_name"/></p>
<p> Last Name: <input type='text' id = "last_name"/> </p>
<p><input id ="submit" type = "button" onclick="display()" value='clickme'/></p>
</form>
Slight change to the html, so that the onclick attribute / event is added to the submit button.
var firstName; //first name
var lastName; //last name
function getFirstName() {
return document.getElementById("first_name").value;
}
function getSecondName() {
return document.getElementById("last_name").value;
}
function display() {
firstName = getFirstName();
lastName = getSecondName();
window.alert(firstName + lastName);
document.getElementById("form").submit();
}
Slight change to the javascript to call getSecondName instead of getLastName
solution2
0 2014-10-07 20:30:01
Try this
<html>
<head>
<meta charset = 'utf-8'>
<title>Form</title>
<script type = 'text/javascript'>
var firstName; //first name
var lastName; //last name
function getFirstName() { //when this function is called, I retrieve the values and display them
return document.getElementById("first_name").value;
}
function getSecondName() {
return document.getElementById("last_name").value;
}
function display() {
firstName = getFirstName();
lastName = getSecondName();
window.alert(firstName + lastName);
}
</script>
</head>
<body>
<form id='form' method = 'post'>
<p> First Name: <input type='text' id = "first_name"/></p>
<p> Last Name: <input type='text' id = "last_name"/> </p>
<p><input id ="Submit" type = "button" value = 'clickme' onclick="display()" /></p>
</form>
</body>
</html>
solution3
0 2014-10-07 20:30:36
Move your script to after your HTML and change your handler to take a function reference. Your function for the last name is also named getSecondName but you call getLastName
<html>
<head>
<meta charset = 'utf-8'>
<title>Form</title>
</head>
<body>
<form id='form' method = 'post'>
<p> First Name: <input type='text' id = "first_name"/></p>
<p> Last Name: <input type='text' id = "last_name"/> </p>
<p><input id ="Submit" type = "button" value = 'clickme' /></p>
</form>
<script type = 'text/javascript'>
var firstName; //first name
var lastName; //last name
function getFirstName() { //get first name
return document.getElementById("first_name").value;
}
function getSecondName() { //get last name
return document.getElementById("last_name").value;
}
function display() { //get the names and display them
firstName = getFirstName();
lastName = getSecondName();
window.alert(firstName + lastName);
}
document.getElementById("Submit").onclick = display;
</script>
</body>
</html>
solution4
0 2014-10-07 20:36:59
You just need to get values of inputs. Jsfiddle and code below; http://jsfiddle.net/zvdwkL6o/
document.getElementById("Submit").addEventListener("click", function(e){
e.preventDefault(); // to prevent form from submiting
fn = document.getElementById("first_name").value;
ln = document.getElementById("last_name").value;
alert(fn + " " + ln);
});
solution5
0 2014-10-07 20:47:44
The main reason why your code isn't working is because of the order the browser processes the tags in the HTML document.
In your case, the browser first executes the javascript code and only then renders the HTML form and its inputs. Because of this, if you look in the Chrome Developer Console, you can see you have an error: Uncaught TypeError: Cannot set property 'onclick' of null (line 19) . The error is thrown because the call to document.getElementById('Submit') returns null .
To solve your issue, you can move the script tag below the HTML code, as suggested above, or you could bind the onclick handler after the window or the body has loaded:
window.onload = function() { document.getElementById("Submit").onclick = display; }
PS. As juvian mentioned above, you should assign the function itself to the onclick handler, not the value returned by the function, like in your initial example ( display instead of display() ).
solution6
0 2018-06-28 13:31:05
<!doctype html> <html> <head> <title>Show first name</title> <script type="text/javascript"> function shw(){ var rev,str,l,i; str=document.getElementById("name").value; l=str.length; for(i=0;i<=l;i++){ if(str.charAt(i)==' ') break; else document.write(str.charAt(i)); } } </script> <body> <label> Enter Name: </label> <input type="text" id="name"/> <input type="submit" value="Display" onClick="shw()"/> </body> </html>
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.