如何使用输入（表单）标签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'];
}
?>