How to input data with more than one text box in a form with JavaScript and get it displayed

Question

I'm trying to do a simple code that such accepts data input into two text boxes (firstname and lastname) ad upon the user clicking a submit button the input data should get displayed on the screen. But I only get the first input data displayed. Why?

Here is my code:

<HTML>
<HEAD>
<TITLE>Forms With JavaScript</TITLE>
</HEAD>

<BODY>
<H1>Forms With JavaScript</H1>

<FORM name=myForm>
Enter your firstname: <INPUT TYPE="text" name="theFirstname"><BR><BR>
Enter your lastname: <INPUT TYPE="text" name="theLastname"><BR><BR>
<INPUT TYPE="submit" VALUE="Process" onclick="PrintFullName()">
</FORM>



<SCRIPT type="text/JavaScript">


function PrintFullName()
{   
    var fname = document.myForm.theFirstname;
    document.write(fname.value);

    var sname = document.myForm.theLastname;
    document.write(sname.value);
}

</SCRIPT>

</BODY>

</HTML>

Psychemaster · Accepted Answer · 2014-05-03 20:45:00Z

2

Once you call document.write(), sname becomes undefined and throws an error. You can get around it by changing the function to the following:

function PrintFullName()
{   
    var fname = document.myForm.theFirstname;    
    var sname = document.myForm.theLastname;
    document.write(fname.value + " " + sname.value);
}

answered May 3, 2014 at 20:45

Psychemaster

87611 silver badges21 bronze badges

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

3 Comments

Hermes1160 Over a year ago

Hi Psychemaster. I did the change as you suggested but now nothing gets displayed when I click the submit button.

Psychemaster Over a year ago

Can't imagine why that would be, I used your code verbatim with my changed function and it worked perfectly fine...

Hermes1160 Over a year ago

Thank you Psychemaster, it worked now. One more thing though, I noticed that the output is sent to another page. Could you tell me why does that happen?

Collectives™ on Stack Overflow

How to input data with more than one text box in a form with JavaScript and get it displayed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related