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>

Change to document.getElementById("Submit").onclick = display; to reference the function. If not, it inmediately executes the function — juvian
– 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
– Oscar A Garcia, Commented Oct 7, 2014 at 20:27

Ben Temple-Heald · Accepted Answer · 2014-10-07 20:32:26Z

1

http://jsfiddle.net/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

answered Oct 7, 2014 at 20:32

Ben Temple-Heald

7082 gold badges6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oscar A Garcia Over a year ago

It worked! So I guess it was just a syntax error on my part -_-

Harutyun Abgaryan · Accepted Answer · 2014-10-07 20:30:01Z

0

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>

answered Oct 7, 2014 at 20:30

Harutyun Abgaryan

2,0231 gold badge14 silver badges15 bronze badges

1 Comment

Harutyun Abgaryan Over a year ago

on input subbmit add on click atrribute and remove your document.getElementById("Submit").onclick = display; code

tymeJV · Accepted Answer · 2014-10-07 20:30:36Z

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.net/zvm0zst4/

Beckafly · Accepted Answer · 2014-10-07 20:36:59Z

0

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);

});

answered Oct 7, 2014 at 20:36

Beckafly

4112 silver badges5 bronze badges

Comments

Corina · Accepted Answer · 2014-10-07 20:47:44Z

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()).

Amarnath · Accepted Answer · 2018-06-28 13:31:05Z

0

<!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>

answered Jun 28, 2018 at 13:31

Amarnath

1

1 Comment

Alexander Over a year ago

While this code may answer the question, providing additional context regarding how and why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

html/javascript how to display user input with a method on button click?

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related