テキスト入力をスライドさせて、入力時に新しいテキスト入力を表示させますか？その後、スライドバック？

Question

さてさて、今私持っている1つの形式と1つのテキスト入力フィールド：

echo '<form class="changePassForm" action="" method="post" enctype="multipart/form-data">'; 
echo '<input class = "passwordText" type="password" placeholder="Change Password" name="passwordText">'; 
echo '<input class = "oldPass" type="password" placeholder="Enter Old Password" name="oldPass">'; 
echo '</form>'; 

ユーザープレスがpasswordText入力に入力し、PHPファイルに変数で渡される入力したテキスト：

$(".passwordText").keydown(function(event){ 
    if(event.keyCode == 13){ 
     var pass = $(this).val(); 
     //var pass = document.getElementById("p2"); 
    $.ajax({ 
     url: "../php/passwordchange.php", // Url to which the request is send 
     type: "POST",    // Type of request to be send, called as method 
     data: 'passwordText=' + pass, // data sent to php file 
     success: function(data) // A function to be called if request succeeds 
     { 
      console.log(data); 

     }});  
    console.log("WORKS!!"); 
    } 
}); 

これが起こると、2番目のテキスト入力から値を取得できるように、.passwordText入力フィールドをスライドして非表示にする必要があります（対話できません）。私はjavascriptの初心者であるので、これを行う方法はわかりません。

以下は、参考のために私のCSSです：

.changePassForm input { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
      appearance: none; 
    outline: 0; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    background-color: rgba(255, 255, 255, 0.2); 
    width: 250px; 
    border-radius: 3px; 
    padding: 10px 15px; 
    margin: 0 auto 10px auto; 
    display: block; 
    text-align: center; 
    font-size: 18px; 
    color: white; 
    -webkit-transition-duration: 0.25s; 
      transition-duration: 0.25s; 
    font-weight: 300; 
} 
.changePassForm input:hover { 
    background-color: rgba(255, 255, 255, 0.4); 
} 
.changePassForm input:focus { 
    background-color: white; 
    width: 300px; 
    color: #53e3a6; 
} 
.changePassForm button { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
      appearance: none; 
    outline: 0; 
    background-color: white; 
    border: 0; 
    padding: 10px 15px; 
    color: #53e3a6; 
    border-radius: 3px; 
    width: 250px; 
    cursor: pointer; 
    font-size: 18px; 
    -webkit-transition-duration: 0.25s; 
      transition-duration: 0.25s; 
} 
.changePassForm button:hover { 
    background-color: #f5f7f9; 
} 

はどのようにして第二のテキスト入力から値を取得する最初の入力を上に移動することができますか？

Answer 1

あなたはAJAXの成功のためにそれを行う必要があります。

$.ajax({ 
     url: "../php/passwordchange.php", 
     type: "POST", 
     data: 'passwordText=' + pass, // data sent to php file 
     success: function(data){ 
      console.log(data); 
      //HERE'S THE PLACE TO DO IT. 
      $('.passwordText').slideUp(500) 
     } 
    }); 

何上記のコードが行うことは500ミリ秒（または半秒）時間枠内でそれ自身を隠すためにpasswordTextを「伝える」です。

また、あなたのPHPが実行されたときに、成功した応答を返すと仮定しています。 スクリプトが失敗した応答を返す場合は、別のスクリプトを実行することもできます。

JSONレスポンスを構造化する方法については、JSENDをご覧ください。