如何使用輸入（表單）標簽html / PhP設置變量js

Question

我想知道當玩家完成他的表格時我是否可以設置一個變量。 例如：

 <form> First name:<br> <input type="text" name="firstname" value="Pedro"> <br> Last name:<br> <input type="text" name="lastname" value="Pinto"> <br><br> <input type="submit" value="Submit"> </form>

而他提交的時候，在JS上執行一個函數，什么把firstname和lastname保存到一個變量中。

如果可能的話，我也想在 PhP 中知道，謝謝。

Answer 1

var username = $("input[name=firstname]").val();
var lastname = $("input[name=lastname]").val();

這就是您如何使用 Jquery 獲取兩個輸入字段的值。 第一部分通過它的名稱獲取您的輸入， .val() 從該輸入獲取值。

Answer 2

JS 方案：在這個方案中，數據是在客戶端處理的。 但是，如果您將其中的任何內容保存到您的服務器，請小心，因為用戶可以使用他們的瀏覽器以非預期的方式操作數據。

HTML：

<form>
  First name:<br>
  <input type="text" id="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" id="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit" onclick="myFunction()">
</form> 

JS：

function myFunction() {
  var firstname = document.getElementById('firstname').value;
  var lastname = document.getElementById('lastname').value;
}

PHP解決方案：在這個解決方案中，數據是在服務器端處理的。 在這里，您將清除所有 JS 變量，因為這樣做會導致加載新頁面。 因此，通常，如果您需要在保存變量后繼續在頁面上工作，請不要這樣做。 另外，請注意 HTML 表單在傳遞帖子時使用“name”而不是“id”。

HTML：

<form action="MYPAGE.php" method="post">
  First name:<br>
  <input type="text" name="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit">
</form> 

PHP：

<?php
  $firstname = $_POST["firstname"];
  $lastname = $_POST["lastname"];
?>

AJAX 解決方案：第三種混合方式是使用 AJAX。 在此解決方案中，您使用 JavaScript 收集變量，然后將數據 POST 到另一個 .php 文件，而無需導航。 這樣您就不會清除任何 JavaScript 變量，並且可以將數據寫入服務器。 然后，您的目標 PHP 頁面生成的任何內容都可以通過將其插入到您的結果目標元素中來加載到您所在的頁面中。

注意：此示例代碼使用 jQuery。

HTML：

<form>
  First name:<br>
  <input type="text" id="firstname" value="Pedro">
  <br>
  Last name:<br>
  <input type="text" id="lastname" value="Pinto">
  <br><br>
  <input type="submit" value="Submit" onclick="myFunction()">
</form> 
<div id="MYTARGETELEMENT"></div>

JS：

function myFunction() {
  var firstname = document.getElementById('firstname').value;
  var lastname = document.getElementById('lastname').value;
  $.ajax({
    type:"POST",
    url: "MYPAGE.php", 
    data: {
      firstname:firstname,
      lastname:lastname 
    },
    success: function(result){
      $("#MYTARGETELEMENT").html(result);
    }
  });
}

PHP：

<?php
  $firstname = $_POST["firstname"];
  $lastname = $_POST["lastname"];
  echo("Post Received By Server"); 
?>

Answer 3

如何在 PHP 中獲取它：

為提交按鈕添加一個名稱：

<input type="submit" name="submit" value="Submit">

然后使用此代碼：

<?php
if(isset($_POST['submit'])) {
   $firstname = $_POST['firstname'];
   $lastname = $_POST['lastname'];
}
?>