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>
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>
-
Change to
document.getElementById("Submit").onclick = display;to reference the function. If not, it inmediately executes the function – juvian Commented Oct 7, 2014 at 20:20 - @juvian I tried and it doesn't seem to change anything. I appreciate your time though – Oscar A Garcia Commented Oct 7, 2014 at 20:27
6 Answers
Reset to default 1http://jsfiddle/wqymjL32/
<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
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>
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>
Demo: http://jsfiddle/zvm0zst4/
You just need to get values of inputs. Jsfiddle and code below; http://jsfiddle/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);
});
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()).
<!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>