如何通过用户单击表单底部的按钮一次输出所有用户输入

Question

我正在制作一个 HTML 表格，我对这一切还很陌生。我想使用下拉框和文本区域以表单形式向用户询问不同的问题。在用户 selects/types 回答完所有问题后，我希望能够在底部制作一个按钮，用户将在该按钮上单击它，它将显示他们的所有输入，而无需在每个问题后按提交。

我完全迷路了，根本不知道该怎么做。我认为这将包括一些 JavaScript，我对此一无所知-我只知道 HTML（菜鸟仍在练习）和一些 css。任何人都可以修复我的 script/show 它应该是什么样子的。将不胜感激！

<!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>

我试图找到一些关于如何执行此操作的教程，但它只用于显示其中一个输入或在每个单一输入之后：/

Answer 1

是的，您需要基本 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>

请检查代码

Answer 2

提交您的输入需要在表单标签内。标签标签“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>

如何通过用户单击表单底部的按钮一次输出所有用户输入

How to output all user inputs at once by the user clicking a button at the bottom of the form

html

javascript

forms

jquery