如何使用JavaScript在表单中使用多个文本框输入数据并显示它

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

本文关键字:输入 文本 数据 显示 JavaScript 何使用 表单      更新时间:2023-09-26

我试图做一个简单的代码,这样接受数据输入到两个文本框(姓和名),并在用户单击提交按钮的输入数据应该显示在屏幕上。但是我只显示了第一个输入数据。为什么?

下面是我的代码:
<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>

一旦调用document.write(), sname变为未定义并抛出错误。您可以通过将函数更改为以下内容来绕过它:

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