Appending element inside appended element not working in jQuery

Question

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(""+
                                        ""+
                                            "Old Password:    "+
                                            ""+
                                        " "+
                                        "
"+
                                        ""+ 
                                        "
"+
                                        " "+
                                    "");
        }

        $("#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(""+
                                                    ""+
                                                        "New Password:    "+
                                                        ""+
                                                    " "+
                                                    "
"+
                                                    " "+ 
                                                "");
                    }
                    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("Password length should be greater than 6");
                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();
            });
        
    });

user_10606400 · Answer

In your code you were appending your error message to input-box that's not possible. You can append span to some div i.e :

here using $(".newPasswordSubmit").html.. will append your error message below your input box.

Demo Code(I have remove ajax code and some other code ) :

$(document).ready(function() {
  function show_old_password_modal() {
    $("#editModal").show();
    $("#modalBody , .modal-title").html("");
    $(".modal-title").append("Enter Old Password");
    $("#modalBody").append("" +
      "" +
      "Old Password:    " +
      "" +
      " " +
      "
" +
      "" +
      "
" +
      " " +
      "");
  }

  $("#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);
 
          $("#modalBody , .modal-title").html("");
          $(".modal-title").append("Enter New Password");
          $("#modalBody").append("" +
            "" +
            "New Password:    " +
            "" +
            " " +
            "
" +
            " " +
            "
"); //<--adding 
       
  });

  $(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");
    //change to class
      $(".newPasswordSubmit").html("Password length should be greater than 6");
      return;
    }else{
      $(".newPasswordSubmit").html('');//remove span if condtion false
   console.log("go done")
   }
  });

  $("#closeModal").click(function() {
    $("#editModal").hide();
  });

});

user_4275750 · Answer

$(document).ready(function(){
        function show_old_password_modal(){
            $("#editModal").show();
            $("#modalBody , .modal-title").html("");
            $(".modal-title").append("Enter Old Password");
            $("#modalBody").append(""+
                                        ""+
                                            "Old Password:    "+
                                            ""+
                                        " "+
                                        "
"+
                                        ""+ 
                                        "
"+
                                        " "+
                                    "");
        }

        $("#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.length); 
            $("#oldPasswordSubmit").parent().find('.badge').remove(); 
                        if(oldPassword.length < 7){
                //$("#spanA").html("Password length should be greater than 6");               
                $("#oldPasswordSubmit").after("Password length should be greater than 6");
                return;
            }
            $.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(""+
                                                    ""+
                                                        "New Password:    "+
                                                        ""+
                                                    " "+
                                                    "
"+
                                                    " "+ 
                                                "");
                    }
                    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.length);
            if(newPassword.length < 7){
                //$("#spanA").html("Password length should be greater than 6");
                $("#newPasswordSubmit").append("Password length should be greater than 6");
                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();
            });

    });

Appending element inside appended element not working in jQuery

2 Answers