在輸入欄旁邊顯示成功保存的消息

Question

我有一個表單，它具有編輯和保存按鈕，可以使輸入框可編輯和禁用。

我在這裏需要的是添加一個成功的消息旁邊的輸入框。

HTML

<form> 
     <label>First Name</label> 
    <input type="text" placeholder="Lorem" readonly required /><input name="Edit" type="button" value="Edit"> <span class="alert">test</span> 
     <label>First Name</label> 
     <input type="text" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit"> 
     <label>Email ID</label> 
     <input type="email" placeholder="Lorem" required readonly /><input name="Edit" type="button" value="Edit"> 
     <label>Password</label> 
     <input type="password" placeholder="********" required readonly /><input name="Edit" type="Button" value="Edit"> 
     </form> 

腳本

$('[name="Edit"]').on('click', function() { 
    var prev = $(this).prev('input'), 
     ro = prev.prop('readonly'); 
    prev.prop('readonly', !ro).focus(); 
    $(this).val(ro ? 'Save' : 'Edit'); 
    $(".alert").fade(); 
}); 

這裏是fiddle。

這是我需要顯示的消息時，它被保存

Answer 1

試試這個：

$('[name="Edit"]').on('click', function() { 

     if($(this).val()=='Save') 
     { 
     $(".alert").fadeIn();  
     } 
     var prev = $(this).prev('input'), 
      ro = prev.prop('readonly'); 
     prev.prop('readonly', !ro).focus(); 
     $(this).val(ro ? 'Save' : 'Edit'); 

    }); 

Answer 2

變化：

$(".alert").fade(); 

要：

$(".alert").fadeIn();