在输入栏旁边显示成功保存的消息

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();