Checkbox will not stay checked and submit listener does not work

I am dynamically rendering pages using Handlebars.js, and I have a "quiz-form template" with the following code:

<div id="right-pane">
        <script type="text/x-handlebars-template" id="quiz-form-template">
            <form class="cf" id="quiz-form">
                <h2>Create a <span>quiz</span></h2>
                <p>Enter a quiz name and description to get started.</p>

                <div>
                    <input type="text" name="quiz-name" placeholder="Quiz Name" />
                </div>

                <div>
                    <textarea rows="5" cols="40" name="quiz-description"
                        placeholder="Description"></textarea>
                </div>

                <div id="checkbox">
                    <input type="checkbox" name="is_random" />  Create randomly generated quiz <br/>
                    <input type="checkbox" name="is_single_page" />  Render quiz on a single page <br/>
                    <input type="checkbox" name="is_immediate"/>  Give immediate feedback <br/>
                </div>

                <input type="submit" class="btn" value="Add Questions" /> 

            </form>
        </script>
    </div>

I am running into two problems that I have been trying to debug to no avail. After rendering this page on my html, when I click the checkboxes, they do not get checked at all. It seems like I click and it "almost bounces off".

Additionally when I click the submit button, it is not being listened to. I am console.log"ging" to check and their is not output. Here is my event listener:

rightPane.addEventListener("submit", function(event) {
    console.log( event.target );
    event.preventDefault;

    if ( event.target.value === "Add Questions" ) {

        //DOM elements
        newQuizName = document.querySelector('#quiz-form input');
        newDescription = document.querySelector('#quiz-form textarea');
        randomStatus = document.querySelector('#quiz-form input[name="is_random"]');
        singlePageStatus = document.querySelector('#quiz-form input[name="is_single_page"]');
        immediateStatus = document.querySelector('#quiz-form input[name="is_immediate"]');

        var pendingQuiz = getPendingQuiz();
        pendingQuizMetaData = {name: newQuizName.value, description: newDescription.value, 
            random: randomStatus.checked, singlePage: singlePageStatus.checked, 
            immediate: immediateStatus.checked 


        pendingQuiz = { metadata: pendingQuizMetaData, questions: [] };
        updatePendingQuiz( pendingQuiz );
        rightPane.innerHTML = templates.renderQuestionType();

        newQuestion = "";
        newSubject = "";
        // }

        // Since add questions is clicked, we should send the user to select question type

        // we'll need to render html on the right pane

    } 

});

Any input would be greatly appreciated.