2
\$\begingroup\$

I'm creating a website about an auto show that the user is going to. I'm collecting input from them via textboxes, check boxes, radio buttons, etc. I'm presenting them with a confirmation that the information they entered is correct. Is the way I'm doing this the most efficient, injecting the HTML into the website via JavaScript?

online_form.html

<!DOCTYPE html>
<html>
    <head>
        <title>Online Form - BA</title>
        <link rel="stylesheet" type="text/css" href="external/style.css">
        <script src="external/script.js"></script>
    </head>
    <body>
        <!-- NAV START -->
        <hr>
        <a href="index.html">Main Page</a> - <a href="online_form.html">Online Form</a> - <a href="special.html">Specialty Car</a>
        <hr>
        <!-- NAV END -->
        <h2>Complete this online form to get into the Ann Arbor Auto Show for <i>FREE</i></h2>
        <form action="" method="post">
            <fieldset>
                <label>Name:</label>
                <input type="text" id="name"><br>
                <label>Age:</label>
                <input type="text" id="age"><br>
                <label>Email:</label>
                <input type="text" id="email"><br>
            </fieldset>
            <fieldset>
                <h3>What is your reason for attending the Ann Arbor Auto Show?</h3>
                <input type="radio" name="reason" value="cars">I like cars<br>
                <input type="radio" name="reason" value="been_before">I've been here before<br>
                <input type="radio" name="reason" value="friend">A friend told me<br>
                <input type="radio" name="reason" value="other">Other<br>
                <p>If other, please explain:</p>
                <textarea rows="2" cols="20"></textarea>
            </fieldset>
            <fieldset>
                <h3>What color cars do you like?</h3>
                <input type="checkbox" name="color" value="red">Red<br>
                <input type="checkbox" name="color" value="blue">Blue<br>
                <input type="checkbox" name="color" value="green">Green<br>
                <input type="checkbox" name="color" value="orange">Orange<br>
                <input type="checkbox" name="color" value="yellow">Yellow<br>
                <input type="checkbox" name="color" value="purple">Purple<br>
                <input type="checkbox" name="color" value="black">Black<br>
                <input type="checkbox" name="color" value="white">White<br>
            </fieldset>
            <button type="button" onclick="checkInformation()">Submit</button>
            <button type="reset">Reset</button>
            <div id="conformation"></div>
        </form>
    </body>
</html>

script.js

function Form() {
    this._name = document.getElementById('name').value;
    this.age = document.getElementById('age').value;
    this.email = document.getElementById('email').value;
    this.conformation = document.getElementById('conformation');

    /*
    * Reset this.conformation if user clicks `no` button
    */
    this.conformation.innerHTML = "";

    this.response = '<h3>Is this information correct?</h3>\n';
    this.response += '<p>Name: ' + this._name + '</p>\n';
    this.response += '<p>Age: ' + this.age + '</p>\n';
    this.response += '<p>Email: ' + this.email + '</p>\n';
    this.response += '<button type="button" onclick="yes()">Yes</button>';
    this.response += '<button type="reset" onclick="no()">No</button>';

    this.send_conformation = function() {
        this.conformation.style.display = "block";
        this.conformation.innerHTML = this.response;
    }
}

var form;

function checkInformation() {
    form = new Form();
    form.send_conformation();
}

function yes() { /* To be implemented */}

function no() {
    var conf = document.getElementById('conformation');
    conf.style.display = "none";
}
\$\endgroup\$
3
\$\begingroup\$

Replace document.getElementByIds with a forEach and the this.response lines with template literals to keep the code DRY :

function Form () {

    ["_name", "age", "email", "confirmation"].forEach(key => {
        const id = key.replace(/^_/, ''); // removes the _ in the beginning
        this[key] = document.getElementById(id).value;
    });

    /*
    * Reset this.conformation if user clicks `no` button
    */

    this.conformation.innerHTML = "";

    this.response = `
        <h3>Is this information correct?</h3>\n
        <p>Name: ${this._name}</p>\n
        <p>Age: ${this.age}</p>\n
        <p>Email: ${this.email}</p>\n
        <button type="button" onclick="yes()">Yes</button>
        <button type="reset" onclick="no()">No</button>`;

    this.send_conformation = function() {
        this.conformation.style.display = "block";
        this.conformation.innerHTML = this.response;
    }
}

var form;

function checkInformation () {
    form = new Form();
    form.send_conformation();
}

function yes { /* To be implemented */}

function no {
    document.getElementById('conformation').style.display = "none";    
}
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.