JQuery function not working in Bootstrap Modal
Question
For some reason my JQuery is not working on my bootstrap modal. The form's JQuery function is working fine on the original page, but not on the modal. Can someone please tell me or explain to me why this is occurring. Thanks!
Heres the code:
<div class="modal fade in" id="changepw" tabindex="-1" role="dialog" aria-labelledby="changepwlabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="changepwlabel">Change Password</h4>
</div>
<div class="modal-body" id="changepwdiv">
<script src="js/jquery-1.10.2.min.js"></script>
<form action="changepassword.php" method="post">
<div class="input-group">
<span class="input-group-addon">Current Password</span>
<input class="form-control" type="password" name="Password" id="Password">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">New Password</span>
<input class="form-control" type="password" name="password_new" id="password_new">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">New Password Again</span>
<input class="form-control" type="password" name="password_new_again" id="password_new_again">
</div>
<br>
<input type="submit" value="Change" id="change" class="btn btn-success" disabled="">
<input type="hidden" name="token" value="e642d82eed2e2a90529d9debbef45eec">
</form>
<script>
function checkPasswordMatch() {
var password = $("#password_new").val();
var confirmPassword = $("#password_new_again").val();
if (password == confirmPassword)
document.getElementById("change").disabled = false;
else
document.getElementById("change").disabled = true;
}
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
</script> </div>
</div>
</div>
</div>
5 answers
solution1
1 2014-09-20 05:52:14
Instead of
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
Try
$(document).ready(function () {
$(document).on('keyup','#password_new_again',function(){
checkPasswordMatch();
});
});
solution2
0 2015-08-07 06:36:18
I know this question is old, but I had the same problem. I was working on the Joomla platform and while inline js worked fine on the form submit, any function calls or event triggers did not. Googling led me to this question.
When I checked the source code of the page I was working on, it seemed that a component was loading jQuery again. So my page now had two instances of jQuery. Removing the instance loaded by the component keeping the main one solved the problem for me. So this could be the culprit in this case as well.
solution3
0 2015-08-07 06:53:52
If you using Joomla JQuery framework you can access it with jQuery instead of $ . So Your code should look like this:
jQuery(document).ready(function () { //code here });
solution4
0 2015-08-07 07:08:33
function checkPasswordMatch() { alert("ddd") var password = $("#password_new").val(); var confirmPassword = $("#password_new_again").val(); if (password == confirmPassword) document.getElementById("change").disabled = false; else document.getElementById("change").disabled = true; } $(document).ready(function () { $("#changepw").on("keyup","#password_new_again",checkPasswordMatch); });
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div class="modal fade in" id="changepw" tabindex="-1" role="dialog" aria-labelledby="changepwlabel" aria-hidden="false" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="changepwlabel">Change Password</h4> </div> <div class="modal-body" id="changepwdiv"> <script src="js/jquery-1.10.2.min.js"></script> <form action="changepassword.php" method="post"> <div class="input-group"> <span class="input-group-addon">Current Password</span> <input class="form-control" type="password" name="Password" id="Password"> </div> <br> <div class="input-group"> <span class="input-group-addon">New Password</span> <input class="form-control" type="password" name="password_new" id="password_new"> </div> <br> <div class="input-group"> <span class="input-group-addon">New Password Again</span> <input class="form-control" type="password" name="password_new_again" id="password_new_again"> </div> <br> <input type="submit" value="Change" id="change" class="btn btn-success" disabled=""> <input type="hidden" name="token" value="e642d82eed2e2a90529d9debbef45eec"> </form> </div> </div> </div> </div> </body> </html>
solution5
-1 2014-09-20 05:59:31
instead of
$(document).ready(function () {
$("#password_new_again").keyup(checkPasswordMatch);
});
try
$(document).ready(function () {
$("#password_new_again").keyup(function(){
checkPasswordMatch();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.