Question

我的页面表单很简单，我无法从表单中获取值并将其显示在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>

请看看那里出了什么问题，因为我无法找到错误，我感谢你们的每一次帮助。预先感谢

Answer 1

因为默认情况下表单中的按钮提交重新加载页面的表单。您可以通过点击按钮删除提交的行为：

<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 ;
    }

Answer 2

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>

如何从表单中获取值并在文本区域中显示？

2 个答案: