将变量分配给href/按钮

Question

我试图为一个学校项目的网站做一个登录表单。

当输入某个用户名和密码时，它可以进入下一页，我遇到困难的部分是确定是否可以将变量分配给href或button。

例如，href的变量是'A‘，密码输入的变量是'B’，还有一个php代码说：

If (B == ('Qwerty')) then
  A == 'google.com';
else
 echo ('Wrong password')

我知道这个示例代码可能做错了，但是如果有人理解我想问/做什么，你能帮上忙吗？如果这对我有帮助的话。

<div class="col-md-4  form-group" data-for="password">
        <label for="password-form1-2" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="email" data-form-field="password" required="required" class="form-control display-7" id="password-form1-2" placeholder="qwerty">
</div>                       
      <div class="col-md-12 input-group-btn align-center">
         <button type="submit" class="btn btn-primary btn-form display-4" onclick="window.location.href = '2after login.php';">Log in</button>
      </div>

Answer 1

有几种方法可以将信息从一个页面发布到另一个页面，首先，最简单的方法是：

index.html

<form action="login.php" method="post">

  <input type="text" name="username" placeholder="enter your username" required><br>
  <input type="password" name="password" placeholder="enter your password" required><br>
  <input type="submit" value="Login">

</form>

login.php

<?php

$username = $_POST[ "username" ];
$password = $_POST[ "password" ];
$expected_password = "password123";

if ( $password == $expected_password ) {

    echo "Passwords match!";

} else {

    echo "Incorrect password!";

}

这将将表单值发布到login.php (在表单的action属性中指定)。您将在浏览器中被定向到/login.php，并将看到两条消息中的一条--输入的“密码”与预期的“密码”匹配，或者收到和“不正确的密码”消息。

请注意，在实际应用程序中，密码显然不是硬编码的，这只是演示如何将信息从一个页面发布到另一个页面。

使用阿贾克斯

index.html

<form action="login.php" method="post" id="my-form">

  <input type="text" name="username" placeholder="enter your username" required><br>
  <input type="password" name="password" placeholder="enter your password" required><br>
  <input type="submit" value="Login">

</form>

<div id="output"></div>

<script src="form.js"></script>

form.js

let form = document.querySelector( "#my-form" );
let output = document.querySelector( "#output" );

form.addEventListener( "submit", function( e ) {

  e.preventDefault();

  let formData = new FormData( form );
  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {

    if ( this.readyState == 4 && this.status == 200 ) {

      output.innerHTML = this.responseText;

    }

  }

  xhr.open( "post", "login.php" );
  xhr.send( formData );

});

这将将表单的值发布到login.php并将信息发回，而不需要重新加载页面或导航。然后，上面login.php的响应将显示在输出<div>中。

Answer 2

你搞混了这件事的两种方法一种是使用“onclick=.”的Javascript方式。另一个是HTML表单post方法。为此，您需要在表单中有输入。无论如何你都需要学习Javascript。所以这里是一个完美的起点。

<div class="col-md-4  form-group" data-for="password">
        <label for="password-form1-2" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="email" data-form-field="password" required="required" class="form-control display-7" id="password-form1-2" placeholder="qwerty">
</div>                       
<div class="col-md-12 input-group-btn align-center">
        <button type="submit" class="btn btn-primary btn-form display-4" onclick="validateEntry()">Log in</button>
        <a id="result"></a>
</div>



<script>    
function validateEntry(){
  var password = encodeURIComponent(document.getElementById("password-form1-2").value);
  if (!password || 0 === password.length){
     document.getElementById("result").innerHTML = 'Nothing entered.  Please, enter a password';
  }else{
    login(password);
  }
}

function login(password) {
  var fail = true;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var fail = false;
      if (this.responseText == "Updated"){
          window.location.href = "wizard17.php";
      }else{
          document.getElementById("result").innerHTML = this.responseText;
      }  

    }else{
      window.setTimeout(failed(fail), 5000);
    }
  };
  xhttp.open("POST", "login.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("password="+password);
}

function failed(fail){
      if(fail){
          document.getElementById("result").innerHTML = 'Connection Failed.';
      }
}

</script>

简单的表单post方法(如下所示)不具备相同类型的响应能力：

<div class="col-md-4  form-group" data-for="password">
        <form action="login.php" method="post">
        <label for="password" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="password" data-form-field="password" required="required" class="form-control display-7" id="password" placeholder="qwerty">
        <button type="submit" class="btn btn-primary btn-form display-4">Log in</button>  <!--notice that onclick is not used here -->
        </form>
</div>  

Answer 3

您应该做的是在检查凭据后重定向登录php文件。

您必须执行匹配才能知道url，然后在末尾插入以下内容：

header('Location: '. $url);
exit;

那将重定向