Dropzone is not able to send data to php

Question

I have a simple form

<form class="form-horizontal form-label-left input_mask" enctype="multipart/form-data" action="addstudent.php" method="post" id="addstudent">
    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
        <input type="text" class="form-control has-feedback-left" id="stfname" placeholder="First Name*" required name="stfname">
        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
    </div>

    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
        <input type="text" class="form-control" id="stlname" placeholder="Last Name*" required name="stlname">
        <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
    </div>

    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
        <input type="text" class="form-control has-feedback-left" id="stmname" placeholder="Middle Name" name="stmname">
        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
    </div>

    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
        <input type="text" class="form-control" id="stenrolid" placeholder="Enrollment ID*" required name="stenrolid">
        <span class="fa fa-key form-control-feedback right" aria-hidden="true"></span>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender<span class="required">*</span></label>
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div id="gender" class="btn-group" data-toggle="buttons">
                <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                    <input type="radio" name="gender" id="stgender" value="male"> &nbsp; Male &nbsp;
                </label>
                <label class="btn btn-default" data-toggle-class="btn-primary" data-toggle-passive-class="btn-default">
                    <input type="radio" name="gender" id="stgender" value="female"> Female
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Class<span class="required">*</span></label>
        <div class="col-md-9 col-sm-9 col-xs-12">
            <input type="text" class="form-control" id="stclass" placeholder="Class*" name="stclass" required>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Section<span class="required">*</span></label>
        <div class="col-md-9 col-sm-9 col-xs-12">
            <input type="text" class="form-control" id="stsection" name="stsection" placeholder="Section*" required>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of Birth <span class="required">*</span></label>
        <div class="col-md-9 col-sm-9 col-xs-12">
            <div class='input-group date' id='myDatepicker2'>
                <input type='text' class="form-control" id="stdob" name="stdob" required />
                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-3 col-sm-3 col-xs-12">Student Image<span class="required">*</span></label>
        <div class="dropzone col-md-9 col-sm-9 col-xs-12 " id="myDropzone" name="myDropzone"></div>
    </div>

    <div class="ln_solid"></div>
    <div class="form-group">
        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
            <button type="button" class="btn btn-primary">Cancel</button>
            <button class="btn btn-primary" type="reset">Reset</button>
            <button type="submit" class="btn btn-success" id="submit-all">Submit</button>
        </div>
    </div>
</form>

For uploading image I have a script:

<script>
    Dropzone.options.myDropzone = {
        url: 'addstudent.php',
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 5,
        maxFilesize: 1,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,

        init: function() {
            dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

            // for Dropzone to process the queue (instead of default form behavior):
            document.getElementById("submit-all").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            });

            //send all the form data along with the files:
            this.on("sendingmultiple", function(data, xhr, formData) {
                formData.append("stfname", jQuery("#stfname").val());
                formData.append("stlname", jQuery("#stlname").val());
                formData.append("stmname", jQuery("#stmname").val());
                formData.append("stenrolid", jQuery("#stenrolid").val());
                formData.append("stgender", jQuery("#stgender").val());
                formData.append("stclass", jQuery("#stclass").val());
                formData.append("stsection", jQuery("#stsection").val());
                formData.append("stdob", jQuery("#stdob").val());
            });           
        }
    }
</script>

On submit nothing happens, the page still remains the same no data is posted to POST, I see the image is tick marked after the loading sequence.

My PHP code on the page tells it to post all data and die. But the HTML page does not change and the link remains the same.

Am I missing something or doing something wrong?