如何從表單中獲取值並在文本區域中顯示？
[英]How to get the value from the form and show in a text area?
問題描述
我的頁面格式簡單，無法從表單中獲取值並將其顯示在textarea中。 我知道這是一種簡單的形式，但是我對javascript不太滿意，所以需要您的幫助，請幫助我。 這是我的代碼，我在HTML中包含了javascript和CSS
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title> Form</title>
<script>
function get(){
var txt = document.getElementById('txt1').value;
var txt = document.getElementById('txt2').value;
var txt = document.getElementById('txt3').value;
var txt = document.getElementById('txt4').value;
var txt = document.getElementById('txt5').value;
var txt = document.getElementById('txt6').value;
document.getElementById('txt7').value = txt1+txt2+txt3+txt4+txt5+txt6;
}
</script>
<style>
body
{
margin: 0;
padding: 0;
background: url(f5.jpg);
background-size: cover;
font-family: sans-serif;
}
.loginBox
{
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 90%;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0,0,0,.5);
}
.user
{
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
h2
{
margin: 0;
padding: 0 0 20px;
color: gold;
text-align: center;
}
.loginBox p
{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginBox input
{
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="number"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 15px;
color: #fff;
font-size: 16px;
}
::placeholder
{
color: rgba(255,255,255,.5);
}
.button
{
border: none;
outline: none;
height: 40px;
color: white;
font-size: 16px;
background: blue;
cursor: pointer;
border-radius: 20px;
}
.button:hover
{
background: #efed40;
color: #262626;
}
.loginBox a
{
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.u1{
list-style-type: none;
margin: 1%;
padding: 0;
width: 20%;
height: 8%;
left:0%;
overflow: hidden;
padding-left:-5%;
}
a {
display:inline;
color:black;
padding: 2% 4%;
text-decoration: none;
font-size: 100%;
text-align: center-left;
margin:0px;
}
a:hover{
background: rgba(0,0,0,.5);
color:yellow;
}
</style>
</head>
<body>
<nav>
<div class="d2">
<nav class="u1">
<a href="FaqjaKryesore1.html"><i class="fa fa-caret-square-o-left"></i>Back</a>
</nav>
</div>
<div class="loginBox">
<img src="user.png" class="user">
<h2>Vendosni te dhenat</h2>
<form>
<p>Emri</p>
<input type="text" name="" id="txt1" placeholder="Vendosni emrin" onclick="this.value = '' ">
<p>Mbiemri</p>
<input type="text" name="" id="txt2" placeholder="Vendosni Mbiemri" onclick="this.value = '' " >
<p>Mosha</p>
<input type="number" name="" id="txt3" placeholder="Vendosni Moshen" onclick="this.value = '' ">
<p>ID</p>
<input type="text" name="" id="txt4" placeholder="Vendosni ID" onclick="this.value = '' ">
<p>Vendlindja</p>
<input type="text" name="" id="txt5" placeholder="Vendosni Vendlindjen" onclick="this.value = '' ">
<p>Telefoni</p>
<input type="number" name="" id="txt6" placeholder="Vendosni numrin e telefonit" onclick="this.value = '' ">
<button class="button" onclick="get();">Merr te dhenat</button>
<p>Te Dhena qe ju futen jane:</p>
<input type="text" name="" id="txt7">
</form>
</div>
</body>
</html>
請看看那里出了什么問題，因為我無法找到錯誤，我感謝你們的每一次幫助。 預先感謝
2 個解決方案
解決方案1
0 已采納 2019-04-27 10:48:56
因為默認情況下表單中的按鈕提交重新加載頁面的表單。 您可以通過僅使按鈕提交來刪除行為提交：
<button type="button" class="button" onclick="get();">Merr te dhenat</button>
並將變量名稱“ txt”更改為txt [1-6]
如果需要使用新行將輸入更改為文本區域：
<textarea name="" id="txt7"></textarea>
之后，您可以將占位符添加到輸出文本中，如下所示：
function get() {
var inputs = document.querySelectorAll('input')
var out = ""
inputs.forEach(function (input) {
out += input.placeholder + ": " + input.value + "\n"
})
document.getElementById('txt7').value = out;
}
或喜歡在主題功能：
function get(){
var txt1 = document.getElementById('txt1').value;
var txt2 = document.getElementById('txt2').value;
var txt3 = document.getElementById('txt3').value;
var txt4 = document.getElementById('txt4').value;
var txt5 = document.getElementById('txt5').value;
var txt6 = document.getElementById('txt6').value;
document.getElementById('txt7').value =
"text:" + txt1 + "\n" +
"text:" + txt2 + "\n" +
"text:" + txt3 + "\n" +
"text:" + txt4 + "\n" +
"text:" + txt5 + "\n" +
"text:" + txt6 ;
}
解決方案2
0 2019-04-27 10:51:41
function get(){ var t1 = document.getElementById("text1").value var t2 = document.getElementById("text2").value var t3 = document.getElementById("text3").value var t4 = document.getElementById("text4").value document.getElementById("textarea").value = t1+t2+t3+t4; }
<input type='text' id='text1' value='Hi'> <br> <input type='text' id='text2' value='this'> <br> <input type='text' id='text3' value='New'> <br> <input type='text' id='text4' value='Developer'> <br> <input type='button' value='get Data' onclick='get();'> <br> <textarea id='textarea'></textarea>
如何從單個表單元素中的多個字段集中獲取輸入字段（包括選擇，文本區域）的所有值？
[英]How do I get all the value of Input fields (including select, text-area) from multiple fieldsets inside a single form element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.