Question posted in 
I am making a change password module where on click of edit-password button a modal shows-up where Old/current password form gets appended to modal-body where a user has to insert his current password on correct password entered, the new-password form gets appended to modal-body. On click of new password submit button its 1st job is to checks if the length of the password is less than 7 characters, if its true a span with a message gets appended to the submit-button id of new password form. But it’s not appending span element to an already appended element i.e. the new password form.
I am new to jquery/Laravel, don’t know why this is not working.
$(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>
2
Answers
In your code you were appending your error message to input-box that’s not possible. You can append
spanto some div i.e :<div class='newPasswordSubmit'></div>here using$(".newPasswordSubmit").html..will append your error message below your input box.Demo Code(I have remove ajax code and some other code ) :