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

I'm making an HTML form and am fairly new to all of this. I want to ask the user different questions in a form using drop-down box and textarea. After the user selects/types in all their answers, I want to be able to make a button at the bottom where the user will click it and it will display all of their inputs without them having to press submit after each question.

I'm completely lost and don't know how to do this at all. I think this will include some JavaScript which I also know absolutely nothing about-I only know HTML(noob-still practicing) and some css. Can anyone please fix my script/show how it should look like. Would be greatly appreciated!

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

I tried to find some tutorials on how to do this but it would be for displaying only one one of the inputs or after each singular input :/

CodePudding user response：

For submitting your inputs needs to be inside a form tag. The label tag "for" should be equal to input tage "ID" and it is good practice to put you JavaScript at the end of document.

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

CodePudding user response：

Yes you need basic javascript to print out the result or input on the same page. I just added JS into your code please check this out-

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

Please check the code and like my new Instagram account postcoding