stop form submission and open a bootstrap modal (confirm dialogue box ) after validating using bootstrap validator

Question

<script>
        $(document).ready(function() {
            $('#idfundtransferownaccounts').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'tACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    tACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'fACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    amountValue: {
                        validators: {
                            notEmpty: {
                                message: 'please enter a amount'
                            }
                        }
                    },
                    fACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    },
                    tACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    }
                }
            });
        });
</script>

this is the form validation i have made using bootstrap validator.

<form class="form-horizontal" class="form-inline" name="fundtransferownaccounts" id="idfundtransferownaccounts" method="post" action="FundTransferToOwnAccounts" style="margin-left: px;margin-right: 5px;">
                    <div class="form-group">
                        <label class="control-label col-sm-3">From Account Number*</label>
                        <div class="col-sm-6">
                            <div class="btn-group div-inline">
                                <c:set var="accounts" scope="session" value="${accounts}"/>
                                <c:set var="accountslist" value="${accounts.getAccountlist()}"/>
                                <select name="fACNumber" id="faccountnumber" class="form-control" >
                                    <option selected disabled>Select Account Number</option>
                                    <c:forEach var="num" begin="0" end="${accountslist.size()-1}">
                                        <c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/>
                                        <option value="${accNum}"><c:out value="${accNum}"/></option>
                                    </c:forEach>
                                </select>
                            </div>
                            <input type="checkbox" id="getfaccountbalance" onclick="getfAccountBalance(document.getElementById('faccountnumber').value, this)"> View Account Balance
                            <label id="faccountbalance" style="color: blue" ></label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3">To Account Number*</label>
                        <div class="col-sm-6">
                            <div class="btn-group" >
                                <c:set var="accounts" scope="session" value="${accounts}"/>
                                <c:set var="accountslist" value="${accounts.getAccountlist()}"/>
                                <select name="tACNumber" id="taccountnumber" class="form-control" >
                                    <option selected disabled>Select Account Number</option>
                                    <c:forEach var="num" begin="0" end="${accountslist.size()-1}">
                                        <c:set var="accNum"  value="${accountslist.get(num).getAccountno()}"/>
                                        <option value="${accNum}"><c:out value="${accNum}"/></option>
                                    </c:forEach>
                                </select>
                            </div>
                            <input type="checkbox" id="gettaccountbalance" onclick="gettAccountBalance(document.getElementById('taccountnumber').value, this)"> View Account Balance
                            <label id="taccountbalance" style="color: blue"> </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">Transfer Amount*</label>
                        <div class="col-sm-6">
                            <input name="amountValue" id="transferamount" type="text" class="input-sm"  maxLength="11" onkeyup="$(this).val(validcurrencyinput($(this).val()))" placeholder="0 . 00">
                            <div class="form-group div-inline">
                                <select name="currencyType" id="currencytype" class="form-control" style="margin-left: 15px;font-size: 10px;">                                    
                                    <option>LKR</option>
                                    <option>USD</option>
                                    <option>EURO</option>
                                    <option>DINAR</option>
                                </select>
                            </div>
                            <div class="space"></div>
                            <label id="amountvalue" style="color: blue"> </label>
                            <label style="color:#017ebc; font-size: 11px;font-weight: bold;">Note: To transfer ten either enter 10 or 10.00</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">From Account Narration*</label>
                        <div class="col-sm-6">
                            <input name="fACNarration" type="text" class = "form-control input-sm">
                            <div class="space"></div>
                            <label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">To Account Narration*</label>
                        <div class="col-sm-6">
                            <input name="tACNarration" type="text" class = "form-control input-sm">
                            <div class="space"></div>
                            <label style="color:#999999; font-size: 11px;font-weight: bold;">Please limit your sender's account narration to 30 characters.</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-offset-2 col-xs-10">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-primary" onClick="this.form.reset();">Reset</button>    
                        </div>
                    </div>
                </form>

this is the form

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Confirm Your Transaction</h4>
        </div>
        <div class="modal-body">
            <p>Are You Sure to Proceed the Transaction</p>
        </div>
        <div class="modal-footer">
            <button type="button"  id="submit" class="btn btn-primary" data-dismiss="modal" onclick="submitform()">Proceed</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

this is the bootstrap modal i have implemented. now i want to pop up this modal and then send data to a servlet file. but in here the data is passed to servlet file after the button submission.

i found the answer guys. we have to write some code in bootstrap validation onSuccess. here is the modified code.

$(document).click(function() {
            //$("#confirmownaccountsdiv").hide();
            $('#idfundtransferownaccounts').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    fACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'tACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    tACNumber: {
                        validators: {
                            notEmpty: {
                                message: 'please select a account number'
                            },
                            different: {
                                field: 'fACNumber',
                                message: 'Please select a different account number'
                            }
                        }
                    },
                    amountValue: {
                        validators: {
                            notEmpty: {
                                message: 'please enter a amount'
                            }
                        }
                    },
                    fACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    },
                    tACNarration: {
                        validators: {
                            notEmpty: {
                                message: 'please fill the above field'
                            }
                        }
                    }
                },
                onSuccess:(function(e, data) {
                    e.preventDefault();
                    $('.modal').appendTo("body").modal('show');
                })
            });
        });

thanks for the comments guys.

Answer 1

With the button:

<button type="submit" class="btn btn-primary">Submit</button>

Remove the attribute type="submit" from the button.

The attribute type="submit" automatically submits your form.

<button onclick="showpopup()" class="btn btn-primary">Submit</button>

<script>
function showpopup() {
    $('#myModal').show();
}
</script>

(OR)

<button id="showpopup" class="btn btn-primary">Submit</button>

<script>
$("#showpopup").click(function(event){
    event.preventDefault();
    $('#myModal').show();
});
</script>

Answer 2

I think you need to attach an onsubmit event handler to the form and call preventDefault on the event, in order to stop the regular submit. Then in that handler, do what you want, and then submit.

Answer 3

Here i found the answer.Thanks for your reply guys.

$(document).click(function() {
                $('#idfundtransferownaccounts').bootstrapValidator({
                    message: 'This value is not valid',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        fACNumber: {
                            validators: {
                                notEmpty: {
                                    message: 'please select a account number'
                                },
                                different: {
                                    field: 'tACNumber',
                                    message: 'Please select a different account number'
                                }
                            }
                        },
                        tACNumber: {
                            validators: {
                                notEmpty: {
                                    message: 'please select a account number'
                                },
                                different: {
                                    field: 'fACNumber',
                                    message: 'Please select a different account number'
                                }
                            }
                        },
                        amountValue: {
                            validators: {
                                notEmpty: {
                                    message: 'please enter a amount'
                                }
                            }
                        },
                        fACNarration: {
                            validators: {
                                notEmpty: {
                                    message: 'please fill the above field'
                                }
                            }
                        },
                        tACNarration: {
                            validators: {
                                notEmpty: {
                                    message: 'please fill the above field'
                                }
                            }
                        }
                    },
                    onSuccess: (function(e, data) {
                        e.preventDefault();
                        $('.modal').appendTo("body").modal('show');
                    })
                });
            });