【发布时间】：2020-09-11 04:12:22
【问题描述】：
我正在制作一个更改密码模块，其中单击编辑密码按钮会显示一个模式，其中旧/当前密码表单被附加到模式正文中，用户必须在输入正确密码时插入他的当前密码，新密码表单被附加到模态正文。单击新密码提交按钮时，它的第一项工作是检查密码的长度是否小于 7 个字符，如果它是真的，带有消息的跨度会附加到新密码表单的提交按钮 id。但它不会将 span 元素附加到已附加的元素，即新密码表单。
我是 jquery/Laravel 的新手，不知道为什么这不起作用。
$(document).ready(function(){
function show_old_password_modal(){
$("#editModal").show();
$("#modalBody , .modal-title").html("");
$(".modal-title").append("Enter Old Password");
$("#modalBody").append("<form method='POST'>"+
"<div class='form-inline'>"+
"<label for='oldPassword'>Old Password: </label> "+
"<input type='password' id='oldPassword' class='form-control col-lg-6'>"+
"</div> "+
"<br>"+
"<span class='badge badge-danger' id='spanDanger' ></span>"+
"<br>"+
"<input type='submit' id='oldPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+
"</form>");
}
$("#edit-password").click(function(){
show_old_password_modal();
});
$(document).on("click","#oldPasswordSubmit", function(e){
e.preventDefault();
var userId = "{{ Auth::user()->id }}";
console.log(userId);
var oldPassword = $("#oldPassword").val();
console.log(oldPassword);
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ route('check.old.password') }}",
message: "GET",
data: { userId : userId , oldPassword : oldPassword },
success: function(data){
console.log(data.result);
if(data.result == 1){
$("#modalBody , .modal-title").html("");
$(".modal-title").append("Enter New Password");
$("#modalBody").append("<form method='POST'>"+
"<div class='form-inline'>"+
"<label for='newPassword'>New Password: </label> "+
"<input type='password' id='newPassword' class='form-control col-lg-6'>"+
"</div> "+
"<br>"+
"<input type='submit' id='newPasswordSubmit' class='btn btn-success update-btn' value='Submit'> "+
"</form>");
}
else{
show_old_password_modal();
$("#spanDanger").text("Invalid Old Password");
}
},
error: function(error){
console.log(error.responseText);
}
});
});
$(document).on("click","#newPasswordSubmit",function(e){
e.preventDefault();
var userId = "{{ Auth::id() }}"
console.log("userId: "+userId);
var newPassword = $("#newPassword").val();
console.log("newPass: "+newPassword);
if(newPassword.length < 7){
//$("#spanA").html("Password length should be greater than 6");
$("#newPasswordSubmit").append("<span class='badge badge-danger'>Password length should be greater than 6</span>");
return;
}
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('/editProfile/password?_method=PUT') }}",
method: "POST",
data: { userId : userId , newPassword : newPassword },
success: function(data){
console.log(data);
$("#editModal").hide();
message(data.message , data.status);
},
error: function(error){
console.log(error.responseText);
}
});
});
$("#closeModal").click(function(){
$("#editModal").hide();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="modal" id="editModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" id="closeModal" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="modalBody">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1 class="col-lg-6 text-center">Profile</h1>
</div>
<div class="row">
<div class="card col-lg-6">
<div class="card-body">
<div class="name">
<label for="name">Name: </label>
<b id="showName"></b>
<a type="button" id="edit-name" class="btn btn-primary btn-sm float-right">Edit</a>
</div>
<hr>
<div class="email">
<label for="email">Email: </label>
<b id="showEmail"></b>
<a type="button" id="edit-email" class="btn btn-primary btn-sm float-right">Edit</a>
</div>
<hr>
<div class="password">
<label for="passsword">Password: </label>
<b>*********</b>
<a type="button" id="edit-password" class="btn btn-primary btn-sm float-right">Edit</a>
</div>
</div>
</div>
<div class="card offset-lg-2 col-lg-4 h-25" id="message">
<div class="card-body" id="msgCardBody">
</div>
</div>
</div>
</div>【问题讨论】：
标签： javascript jquery ajax laravel