将文本输入滑过以显示输入时的新文本输入?然后滑回来?

时间:2016-05-19 00:45:18

标签: javascript php jquery forms

好吧,我现在有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输入上按Enter键时,输入的文本将在变量中传递给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!!");   
    }
});

当发生这种情况时,我需要.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;
}

如何移动第一个输入以从第二个文本输入中获取值?

1 个答案:

答案 0 :(得分:0)

您需要在AJAX成功中做到这一点。

KUBERNETES_PROVIDER=ubuntu ./kube-up.sh, 

上面的代码是&#34;告诉&#34; $.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毫秒(或半秒)的时间范围内隐藏自己。

我还假设当你的php执行时,它会返回一个成功的响应。 如果脚本返回失败的响应,您可能还想执行其他操作。

您可能希望了解如何构建JSON响应的JSEND