[英]How to display user entered information using JavaScript?
我有一個表單代碼 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>
我在這方面工作了很長時間,但沒有奏效。 但是,我最近嘗試過,它奏效了! 我希望這可以幫到你。
<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>
您的代碼的問題在於您在動態設置中使用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 );
我希望這有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.