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

265
November 26, 2016, at 8:18 PM
<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

Submit

remove type="submit" from the above button and try. 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>
$("#showpopup").click(function(event){
    event.preventDefault();
    $('#myModal').show();
});

try this

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.

Rent Charter Buses Company
READ ALSO
addClass() isnt working

addClass() isnt working

Okay so i dont know exactly whats happening here, i am trying to make a string of text look like its been highlighted with a cursor blinkingLike when you click on text in your browser search bar and see it blinking every second

272
How to get JSON response in jQuery Ajax in Spring Mvc? this is my ajax code

How to get JSON response in jQuery Ajax in Spring Mvc? this is my ajax code

How do I get a JSON response in jQuery Ajax in Spring Mvc? This is my ajax code :

404
How I can merge audio and video blob on JavaScript/jQuery?

How I can merge audio and video blob on JavaScript/jQuery?

I use https://githubcom/collab-project/videojs-record for recording video from webcam with sound

485