Bootstrap Twitter Modal - Clearing dialog input fields -
i have created modal dialog using bootstrap , i'm having problem modal dialog box not clearing form input fields after box closed or after it's submitted.
html
<!-- password reset modal --> <div id="passwmodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4>forgot password?</h4> <p>please enter registered email address below , new password sent you.</p> </div> <div class="modal-body"> <div id="sent"><!-- display sent message after password reset --> <form class="form-horizontal" id="reset"> <div class="control-group"> <label class="control-label" for="email">username</label> <div class="controls"> <input class="input-large" type="email" id="username" name="username" placeholder="email address"> </div> </div> <div class="controls"> <button class="btn btn-inverse" id="close" value="cancel" data-dismiss="modal" aria-hidden="true">close</button> <button class="btn btn-success" id="submit">send</button> </div> </form> </div><!-- end of sent --> </div> </div><!-- end of password reset modal -->
javascript (validation & ajax)
$(document).ready(function () { jquery.validator.addmethod("accept", function (value, element, param) { return value.match(new regexp("." + param + "$")); }); $("#register").validate({ rules: { firstname: { required: true, accept: "[a-za-z]+" }, lastname: { required: true, accept: "[a-za-z]+" }, pwd: { required: true, minlength: 8 }, cpwd: { required: true, minlength: 8, equalto: "#pwd" }, email: { required: true, email: true }, agree: "required" }, messages: { firstname: { required: "first name required.", accept: "letters please." }, lastname: { required: "last name required.", accept: "letters please." }, pwd: { required: "please create password.", minlength: "password must @ least 8 characters." }, cpwd: { required: "please confirm password.", minlength: "password must @ least 8 characters.", equalto: "passwords not match." }, email: "email address not valid.", agree: "please accept our policy." }, submithandler: function() { $.ajax({ type: "post", url: "../process.php", data: $('form#register').serialize(), success: function (msg) { $("#thanks").html(msg) }, error: function () { alert("failure"); } }); } }); }); // end document.ready
to ensure form empty when reopen modal, can every field on form. delete last value of field on hidden state of modal when 1 closing :
$('#passwmodal').on('hidden', function () { $('#username').val(""); });
Comments
Post a Comment