我正在制作一個 HTML 表單，并且對這一切都很陌生。我想使用下拉框和 textarea 在表單中向用戶提出不同的問題。在用戶選擇/輸入所有答案后，我希望能夠在底部創建一個按鈕，用戶將在該按鈕單擊它，它將顯示他們的所有輸入，而無需在每個問題后按提交。
我完全迷路了，根本不知道該怎么做。我認為這將包括一些我也完全不知道的 JavaScript——我只知道 HTML（菜鳥——仍在練習）和一些 css。誰能修復我的腳本/顯示它的外觀。將不勝感激！
<!DOCTYPE html>
<HTML>
<head>
<title>Ttile Ex.</title>
</head>
<body>
<h1>...Certification Creation Form</h1>
<div>
<label for="Choose">Choose the type of...</label>
</div>
<div>
<select name="type of CSR">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for ="CN"> Enter the...</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="FQDN"> Enter the FQDN...</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="alternate name"> Enter the alternate name</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<div>
<label for ="name of cert"> Enter the name you want to give to the cert</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT -->
</form>
</body>
</HTML>我試圖找到一些關于如何做到這一點的教程，但它將只顯示一個輸入或在每個單一輸入之后顯示：/
uj5u.com熱心網友回復：
提交您的輸入需要在表單標簽內。標簽標簽“for”應該等于輸入標簽“ID”，最好將 JavaScript 放在檔案末尾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<h1>...Certification Creation Form</h1>
<div>
<label for="typeOfCSR">Choose the type of...</label>
<select name="typeOfCSR" id="typeOfCSR">
<option value="">Select an Option </option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
</div>
<div>
<label for="CN"> Enter the...</label>
<textarea cols="50" rows="5" id="CN"></textarea>
</div>
<div>
<label for="FQDN"> Enter the FQDN...</label>
<textarea cols="50" rows="5" id="FQDN"></textarea>
</div>
<div>
<label for="alternateName"> Enter the alternate name</label>
<textarea cols="50" rows="5" id="alternateName"></textarea>
</div>
<div>
<label for="nameOfCert"> Enter the name you want to give to the cert</label>
<textarea cols="50" rows="5" id="nameOfCert"></textarea>
</div>
<button type="button" id="review">Review</button>
<button type="submit">Submit</button>
</form>
<br/>
<div id="result" style="border: 3px solid black;"> Result will show here</div>
<script>
const btn = document.getElementById('review');
btn.addEventListener('click',()=>{
let typeOfCSR = document.getElementById('typeOfCSR').value;
let CN = document.getElementById('CN').value;
let FQDN = document.getElementById('FQDN').value;
let alternateName = document.getElementById('alternateName').value;
let nameOfCert = document.getElementById('nameOfCert').value;
document.getElementById('result').innerHTML = typeOfCSR "<br/>" CN "<br/>" FQDN "<br/>" alternateName "<br/>" nameOfCert;
})
</script>
</body>
</html>
uj5u.com熱心網友回復：
是的，您需要基本的 javascript 才能在同一頁面上列印出結果或輸入。我剛剛將 JS 添加到您的代碼中，請檢查一下-
<!DOCTYPE html>
<HTML>
<head>
<title>Ttile Ex.</title>
</head>
<script>
function testVariable() {
var strText = document.getElementById("textone").value;
var strText1 = document.getElementById("textTWO").value;
var strText3 = document.getElementById("textThree").value;
var result = strText ' ' strText1 ' ' strText3;
document.getElementById('spanResult').textContent = result;
}
</script>
<body>
<h1>...Certification Creation Form</h1>
<div>
<label for="Choose">Choose the type of...</label>
</div>
<div>
<select name="type of CSR">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div>
<label for="CN"> Enter the...</label>
</div>
<div>
<textarea cols="50" id="textone" rows="5"></textarea>
</div>
<div>
<label for="FQDN"> Enter the FQDN...</label>
</div>
<div>
<textarea cols="50" id="textTWO" rows="5"></textarea>
</div>
<div>
<label for="alternate name"> Enter the alternate name</label>
</div>
<div>
<textarea cols="50" id="textThree" rows="5"></textarea>
</div>
<div>
<label for="name of cert"> Enter the name you want to give to the cert</label>
</div>
<div>
<textarea cols="50" rows="5"></textarea>
</div>
<!-- SOME BUTTON HERE TO CLICK AND DISPLAY ALL THEIR INPUT -->
<button onclick="testVariable()">Submit</button> <br />
<span id="spanResult">
</span>
</form>
</body>
</HTML>
請檢查代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453542.html
標籤：javascript html jQuery 形式