javascript - How to close modal box after successful submit and open second modal conditionally on form submit -

javascript - How to close modal box after successful submit and open second modal conditionally on form submit -

i want close form modal after submit form , show modal box after error clear

when form submitted , value of html select list on form has changed, conditional js confirmation pop display. user must click ok button on js confirmation pop form submission proceed.

or else if html select list has not changed js confirmation pop not display , form submit.

these codes:

class="snippet-code-js lang-js prettyprint-override"> $('#infoform').bootstrapvalidator({ // live: 'disabled', message: 'this value not valid', fields: { sname: { validators: { notempty: { message: 'the name required , cannot empty' }, stringlength: { min: 6, max: 30, message: 'the username must more 6 , less 30 characters long' }, regexp: { regexp: /^[a-za-z0-9_\.]+$/, message: 'the username can consist of alphabetical, number, dot , underscore' } } }, sfname: { validators: { notempty: { message: 'the father name required , cannot empty' }, stringlength: { min: 6, max: 30, message: 'the father name must more 6 , less 30 characters long' }, regexp: { regexp: /^[a-za-z0-9_\.]+$/, message: 'the father name can consist of alphabetical, number, dot , underscore' } } } } }); class="snippet-code-html lang-html prettyprint-override"><!--first modal box--> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mysmallmodallabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">close</span></button> <h4 class="modal-title" id="mysmallmodallabel">modal box</h4> </div> <div class="modal-body"> <form role="form" name="infoform" id="infoform" method="post" action=""> <div class="form-group"> <input type="name" class="form-control" placeholder="your name" name="sname" id="sname" /> </div> <div class="form-group"> <input type="name" class="form-control" placeholder="father name" name="sfname" /></div> <div class="form-group"> <button type="submit" name="submit1" value="submit" class="btn btn-default" data-toggle="modal" data-target="#basicmodal" >submit</button></div> </form> </div> <div class="modal-footer"></div> </div> </div> </div><!--end first modal box--> <!-- sec modal box --> <div class="modal fade" id="basicmodal" tabindex="-1" role="dialog" aria-labelledby="basicmodal" aria-hidden="true"> <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" id="mymodallabel">second modal box</h4> </div> <div class="modal-body"> <p>your info submit</p> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- end sec modal box-->

use closing event of modal box check if succesful , open new modal

javascript jquery html css twitter-bootstrap