Created elements not displaying

So basically what I'm trying to do is when I fill out a form. All the information gets displayed in a newly created div after I hit a submit button. The problem I'm having is that when I press the submit button. A div doesn't show up at all. Does anyone know how I can accomplish this?

Javascript

$(document).ready(function() {

    $('#submit').click(function() {
        //Form Disappears after Submission
        var form = document.getElementById("form");
        var formBackground = document.getElementById("form-background");
        if (form.style.display == "block" || form.style.display == "") {
                form.style.display = "none";
                formBackground.style.display = "none";
            }

        //Creates New Div After Submission
        var titleInput = document.getElementById("titleInput").value;
        var descInput = document.getElementById("descInput").value;
        var structure = $('<div class="note"><div class="note-content"><div class="imagecontainer"><img src="./images/jose.jpg"/></div><div class="description"><h3>Title:</h3>' + titleInput + '<p>Description:</p>' + descInput + '</div></div></div>');
        $('#container').append(structure); 
        return false;


    });
});

Html

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8"> 
        <title>Personal Note Taker</title>
        <!--Button Icons-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <!--Index Styling-->
        <link rel ="stylesheet" href="./css/styling.css"/>
    </head>

    <body>

        <div id="header">
            <h1>Personal Note Taker</h1>
        </div>

        <div id="containter"></div>
        <!--How the Note should look like
        <div class="note">
            <div class="note-content">
                <a href="./quote1.html">
                <div class="imagecontainer">
                    <img src="./images/jose.jpg"/>
                </div>

                <div class="description">
                    <h3>Quote 1</h3>
                    <p>Every action that you commit, will develop who you are. </p>
                </div>
                </a>
            </div>
        </div>
        -->

        <!--Add Note Button-->
        <div id="addNoteButton">
            <i class="fa fa-plus" aria-hidden="true"></i>
        <div>

        <!--Form Background-->
        <div id="form-background">
        </div>

        <!--Form Field-->
        <div id="form">
            <div id="cancel-button-div">
                <button id="cancel-button">X</button>
            </div>

            <h2 id="form-title">Add a Note</h2>

            <!--Title and Description Questions-->
            <form>
                <br>
                <input placeholder="Title" type="text" id="titleInput">
                <br><br>
                <textarea placeholder="Description" type="text" id="descInput" rows="5" cols="30">
                </textarea>
                <br><br><br><br>
                <button id="submit">Submit</button>
            </form>
        </div>

        <!--Index Javascript-->
        <script
          src="https://code.jquery.com/jquery-3.1.1.js"
          integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
          crossorigin="anonymous"></script>
        <script src="./js/index_script.js"></script>

    </body>

</html>

Answers 1

Related Articles