如何使用 JavaScript 显示用户输入的信息？

Question

我有一个表单代码 tat 将允许用户输入信息。 我正在尝试使用 javascript 将该信息的某些部分显示到新页面上。 基本上，该页面旨在让用户输入信息并在新选项卡或页面中显示姓名、日期、时间和电子邮件。 但我似乎无法显示它。 谁能帮我？

<html lang="en" >
    <head>
    <title>Shy Music Booking Confirmation</title>
    <link rel="stylesheet" href="music.css" type="text/css" />

<body>
<div id="wrapper">
<div id="form">
    <header><h1>Shy Music Private Lessons</h1></header>

<script type="text/javascript">

      function addtext()
      {
         var userName = document.booking.userName.value;
         var userDate = document.booking.userDate.value;
         var userTime = document.booking.userTime.value;
         var userEmail = document.booking.userEmail.value;

         document.writeln("Thank you! You have just entered the following:");
         document.writeln("<pre>");
         document.writeln("Name: " + userName);
         document.writeln("Date: " + userDate);
         document.writeln("Time: " + userTime);
      }
    </script>
</head>
<hr>
<form name="booking">
<h1>Book a Slot Here!</h1>
    <label for="userName">Name: <br><input type = "text" name = "userName"></label>      <br><br>
    <label for="userEmail">E-mail Address: <br><input type = "email" name = "userEmail"></label><br><br>
<label for="userPhone">Phone Number: <br><input type = "tel" name = "userPhone">    </label><br><br>
<label for="userInstrument">Instrument: 
<select>
<option>Guitar</option>
<option>Drums</option>
<option>Piano</option>
</select>
</label>
<br><br>
<label for="userTime">
Preffered Time: 
<select>
<option>9:00</option>
<option>9:30</option>
<option>10:00</option>
<option>10:30</option>
<option>11:00</option>
<option>11:30</option>
<option>12:00</option>
<option>12:30</option>
<option>1:00</option>
<option>1:30</option>
<option>2:00</option>
<option>2:30</option>
<option>3:00</option>
<option>3:30</option>
<option>4:00</option>
<option>4:30</option>
</select>
</label>
<select>
<option>AM</option>
<option>PM</option>
</select>
<br>
<br>
    <label for="userDate">Date: <br><input type = "date" name = "userDate"></label><br><br>

<input type="submit" value="Submit" >
<form action="#">
<input type="button" value = "Back" onclick="javascript:history.go(-1)" />
</form>
</form>
</div>
</div>
</body>
</html>

Answer 1

我在这方面工作了很长时间，但没有奏效。 但是，我最近尝试过，它奏效了！ 我希望这可以帮到你。

<html>
<head>
<h1> Welcome</h1>
</head>
<body>
<p> Enter name: </p>
<input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required>`
<input type="Submit" onclick="submitted()"> <br> <br>
<a id="new" href="www.google.com"> </a>
<script>

      function submitted()
      {
        var a = document.getElementById("name").value;

        if (a=="")
        {
      document.getElementById("new").innerHTML="";
      alert("Please Enter a valid name!");
        }
        else if (a==" ") {
        document.getElementById("new").innerHTML=""
      alert("Please Enter a valid name!");
        }
        else
        {
          document.getElementById("new").innerHTML="Thank you, " + a + ". " + "Click here to continue.";
        }
      }
</script>
</body>
</html>

或者，稍微收紧，作为一个工作片段：

 function submitted() { var a = document.getElementById("name").value.trim(); document.getElementById("new").innerHTML= a===""?"":"Thank you, " + a + ". " + "Click here to continue."; }

 <p> Enter name: </p> <input id="name" name="name"class="Name" type="text" placeholder="Enter Full name" required> <input type="Submit" onclick="submitted()"> <br> <br> <a id="new" href="www.google.com"> </a>

Answer 2

您的代码的问题在于您在动态设置中使用document.write 。 在此上下文中使用它时， document.write将擦除当前文档的内容并用其参数指定的文本替换它。 出于这个原因， document.write通常被认为是表示和插入文本/数据的糟糕方式。 它通常会影响大量学习 JavaScript 的初学者。 以下是您应该记住的一些替代方案：

element.innerHTML ：就像我在评论中所说的那样。 使用.innerHTML通过页面上的元素将格式化的 HTML 插入到文档中。 它不一定必须由id属性指定。 它可以很好地通过任何其他形式的元素获取来给出。

node.appendChild ：这个方法比第一个方法对 DOM 更友好。 它允许您在 node 指定的元素主体的末尾插入一个node 。 例如：

 var form = document.myForm, new_element = document.createElement('input'); new_element.type = "button"; new_element.value = "Submit"; form.appendChild( new_element );

我希望这有帮助。

如何使用 JavaScript 显示用户输入的信息？

问题描述

2 个解决方案

解决方案1
2 2020-09-10 04:33:53

解决方案2
0 2013-04-21 22:54:00

如何使用 JavaScript 显示用户输入的信息？

问题描述

2 个解决方案

解决方案1 2 2020-09-10 04:33:53

解决方案2 0 2013-04-21 22:54:00

解决方案1
2 2020-09-10 04:33:53

解决方案2
0 2013-04-21 22:54:00