[英]Get input from textbox and write it below
我需要從輸入框中獲取值，然后單擊按鈕將其寫在輸入框下方。 我曾想使用標簽，但如果有其他方法，我也歡迎您提出建議。
到目前為止，我的代碼：
<h1>Test</h1>
<form name="greeting">
Type your name here: <input type = "Text" name="fullname" id="name"> <button onclick="getName()">Create</button><br>
Hello <label id="greet">Hello</label>
</form>
<script lang="javascript">
function getName() {
var inputVal = document.getElementById("name").value;
if (inputVal == "") {
document.getElementById("name").style.backgroundColor = "red";
}
else {
document.write("Hello " + document.getElementById("name"));
}
首先，您不想提交表單，因此將按鈕類型從“提交”（默認）更改為“按鈕”。
然后，您幾乎永遠不要使用document.write ，它在非常特殊的情況下使用。 使用適當的DOM操作方法，例如appendChild 。 我會使用方便的insertAdjacentHTML ：
function getName() { var input = document.getElementById("name"); if (input.value == "") { input.style.backgroundColor = "red"; } else { input.insertAdjacentHTML('afterend', '<div>' + input.value + '</div>'); } }
<form name="greeting">Type your name here: <input type="Text" name="fullname" id="name" /> <button type="button" onclick="getName()">Create</button> <br>Hello <label id="greet">Hello</label> </form>
首先，您需要停止提交表單。 其次，您不應該使用document.write，因為它不會在輸入字段后添加所需的文本。 最后，您需要驗證元素值，而不是元素本身。
<html>
<head>
<script>
//First put the function in the head.
function getName(){
var input = document.getElementById("name");
input.style.backgroundColor = ''; //Reseting the backgroundcolor
if (input.value == ''){ //Add the.value
input.style.backgroundColor = 'red';
}
else{
//document.write('Hello ' + input.value); //This would overwrite the whole document, removing your dom.
//Instead we write it in your greeting field.
var tE = document.getElementById('greet');
tE.innerHTML = input.value;
}
return false //Prevent the form from being submitted.
}
</script>
</head>
<body>
<h1>Test</h1>
<form name = 'greeting'>
Type your name here: <input type = "Text" name="fullname" id="name"> <button onclick="return getName()">Create</button><br>
Hello <label id="greet">Hello</label>
</form>
</body>
</html>
您需要取消使表單提交的Submit事件，或者您無法將所有內容都包裝在form元素內，而僅使用常規div來提交按鈕就不會提交。
演示： https : //jsfiddle.net/bypr0z5a/
注意，原因是我在javascript中附加了事件處理程序，並注意了按鈕元素上的onclick屬性，是因為jsfiddle工作異常，在普通頁面上，調用getName（）的方式會起作用。
byId('subBtn').onclick = function (e) {
e.preventDefault();
var i = byId('name'),
inputVal = i.value;
if (inputVal == "") {
i.style.backgroundColor = "red";
} else {
byId('greet').innerText = inputVal;
i.style.backgroundColor = "#fff";
}
}
function byId(x) {
return document.getElementById(x);
}
如何在文本框中獲取輸入並將其顯示在下面的另一個文本框中
[英]how to get an input on textbox and display it on another textbox below
我正在嘗試從文本框獲取數據並在數據庫中搜索並在文本框下方顯示結果
[英]I am trying to get the data from the textbox and seach in my database and show the result below the textbox
如何使用javascript檢查HTML輸入文本框是否在某個數字以下？
[英]How to check if HTML input textbox is below a certain number using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.