e.preventdefault on submitting the triggered submit not working

Question

problem is when i click the button whole page refresh, which certainly i do not want as i am trying to submit the form through Ajax.

    $('#createFormBtn').on('click', function(e){
            e.stopImmediatePropagation();
           e.preventDefault();
        $('#block-validate').trigger('submit',function(e){
            e.stopImmediatePropagation();
           e.preventDefault();
        });
        var formData = {
            FormName : $("#cFormName").val(),
            FormPath :   $("#cFormPath").val(),
            FormCIPath : $("#cFormCIPath").val(),
            TabID : $('#selectTab').val(),
            TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
            MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
            IsMenuLink : isMenuLink_createForm
        };
        $.ajax({
            type:"post",
            url:"{{base_url()}}admin/configurations/addNewForm/",
            data: formData/*,
            success: function(output){
                if (output == true){
                    oTable.fnReloadAjax();
                }
            }*/
        });

    });

i added this code

$('#block-validate').trigger('submit',function(e){
            e.stopImmediatePropagation();
           e.preventDefault();
        });

because i need to Trigger the Submit , As the validation in my Form will not work. This Button is not inside the <form> tags.

But now it is giving the problem as if i click this button whole page refresh..

HTML if anyone wants to see..

<div id="addNewFormModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><i style='color: #666666' class='fa fa-edit fa-fw fa-1x'></i>Edit</h4>
                </div>
                <div class="modal-body">
                    <div class="body collapse in" id="div-1">
                            <form class="form-horizontal" id="block-validate">
                                <div class="form-group">
                                    <label class="control-label col-lg-4" for="text1">Form Name</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control required" name="formName" placeholder="Form Name" id="cFormName">
                                    </div>
                                </div><!-- /.form-group -->
                                <div class="form-group">
                                    <label class="control-label col-lg-4" for="pass1">Form Path</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control required" name="formPath" placeholder="Form Path" id="cFormPath">
                                    </div>
                                </div><!-- /.form-group -->
                                <div class="form-group">
                                    <label class="control-label col-lg-4">Form CI Path</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control required" name="formCIPath" placeholder="Form CI Path" id="cFormCIPath">
                                    </div>
                                </div><!-- /.form-group -->

                                <div class="form-group" id="selectTab_MainDiv">
                                    <label class="control-label col-lg-4">Select Tab</label>
                                    <div class="col-lg-8" id="selectTabName">
                                        <input type='hidden' class="required" name='selectTab' id='selectTab'/>
                                    </div>
                                </div><!-- /.form-group -->

                                <div class="form-group">
                                    <label class="control-label col-lg-4">Have Parent</label>
                                    <div class="col-lg-8" id="haveParentDiv">
                                        <input class="make-switch" id="haveParent" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
                                    </div>
                                </div><!-- /.row --><!-- /.row -->

                                <div class="form-group" id="selectParentMenu_MainDiv" style="display: none">
                                    <label class="control-label col-lg-4">Parent Form</label>
                                    <div class="col-lg-8" id="selectParentMenuDiv">
                                        <input type='hidden' name='input' id='selectParentMenu'/>
                                    </div>
                                </div>

                                <div class="form-group" id="selectTab_MainDiv">
                                    <label class="control-label col-lg-4">Menu Order</label>
                                    <div class="col-lg-8" id="selectMenuOrder">
                                        <select class="commonGeneralSelect2 required" name="selectMenuOrder">
                                            <option></option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                        </select>
                                    </div>
                                </div><!-- /.form-group -->

                                <div class="form-group">
                                    <label class="control-label col-lg-4">Show on Menu</label>
                                    <div class="col-lg-8" id="isMenuLink_createSwitchDiv">
                                        <input class="make-switch" id="isMenuLink_createSwitch" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
                                    </div>
                                </div><!-- /.row --><!-- /.row -->
                                {{*<input type="submit" value="Validate" class="btn btn-primary">*}}
                            </form>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="createFormBtn">Create</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal --><!-- /#Edit Button Modal -->

Answer 1

Replace all this...

$('#block-validate').trigger('submit',function(e){
    e.stopImmediatePropagation();
    e.preventDefault();
});

with only this...

$('#block-validate').valid();

---

There is no need to trigger a submit to get the form to validate when you can simply use the .valid() method . It will trigger validation without submitting the form. (You should edit your OP to mention the jQuery Validate plugin and show the code.)

---

EDIT :

Actually, your ajax() should really be within the submitHandler callback of the .validate() method. As per documentation , it's "the right place to submit a form via Ajax..." .

So instead of the simple suggestion I made above, do this instead...

// click handler is needed since this button is not a 'submit' type button
$('#createFormBtn').on('click', function(e){

    // block default action of button click
    e.stopImmediatePropagation();
    e.preventDefault();

    // submit the form -> will validate AUTOMATICALLY
    $('#block-validate').submit();

});

and put the ajax in the submitHandler callback within your .validate() method...

$('#block-validate').validate({
    // your other rules and options here,
    submitHandler: function(form) {  // only fires on valid form
        var formData = {
            FormName : $("#cFormName").val(),
            FormPath :   $("#cFormPath").val(),
            FormCIPath : $("#cFormCIPath").val(),
            TabID : $('#selectTab').val(),
            TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
            MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
            IsMenuLink : isMenuLink_createForm
        };
        $.ajax({
            type:"post",
            url:"{{base_url()}}admin/configurations/addNewForm/",
            data: formData
        });
    }
});

Please note that most people use jQuery .serialize() instead of manually creating an array with every field attached to a .val() .

data:  $(form).serialize()

Answer 2

You are manually triggering a form submit:

 $('#block-validate').trigger('submit',function(e){
       e.stopImmediatePropagation();
       e.preventDefault();
 });

as #block-validate is your form element.

You are trying to submit your form via ajax, so there is absolutely no reason to trigger a form submit manually. Just remove this block, make your ajax request and the form will be posted.

Also note that the e variable in your trigger function is not the form-submit event you expect it to be, check the manual on trigger() .

Answer 3

Why do you even trigger the submit at all? Purely for the form validation?

You'll need to really recreate that validation.. the problem is you're unbinding the validation completely when you use preventDefault() and stopImmediatePropogation() below:

$('#block-validate').trigger('submit',function(e){
     e.stopImmediatePropagation();
     e.preventDefault();
});

You really want to just re-validate the form (this is pseudo code which almost surely will not work). I cannot tell what is being used to validate your form above, but if you provide I will edit my answer for you.

$('#createFormBtn').on('click', function(e){
     $('#block-validate').validate() 
     //continue with rest of form submission