是否可以将HTML输入类存储到PHP变量中？

Question

我有一个html表单，一些php和一些javascript。该表格有两个输入标签。两个输入标签都具有类属性。我想将类值“存储”在PHP变量中，以便在单击“提交”后可以回显。

我尝试将javascript与第一个php变量（$ firstclass）集成在一起，但即使作为alert（）也无法正常工作。我真的不想警告该类的值，但认为这将有助于找到解决方案。

<form action="" method="post">
    <input type="text" name="input1" class="hidden_class_1">
    <input type="text" name="input2" class="hidden_class_2">
    <input type="submit" name="submit">
</form>

<?php

$firstclass = ""; //hidden_class_1
$secondclass = ""; //hidden_class_2

$firstclass = "<script type=\"application/javascript\">alert(('this.className').attr('class'))</script>";

$secondclass = ""; //ideally hidden_class_2

if(isset($_POST['submit'])){
    echo "<h2>First Input Class Value: ".$firstclass."</h2>";
    echo "<h2>Second Input Class Value: ".$secondclass."</h2>";
}

我希望输出如下；

第一个输入类别的值：hidden_​​class_1

第二个输入类别的值：hidden_​​class_2

Answer 1

“最简单”的方法是使用AJAX / XHR并将类发送到PHP脚本。

<form id="ajaxform" action="path/to/script.php" method="post">
  <input type="text" name="input1" class="hidden_class_1">
  <input type="text" name="input2" class="hidden_class_2">
  <input type="submit" name="submit">
</form>

例如，使用jQuery：

const $form = $('#ajaxform');

function onSuccess (response) {
  console.log('Successfully submitted the form');
  console.log('Server responded with', response);
}

function onFailure (jqXhr, status) {
  console.log('Ooops, something went wrong!');
  console.log('Server sent status code', status);
}

$form.on('submit', event => {
  event.preventDefault(); // suppress the reload

  const $input1 = $form.find('[name=input1]');
  const $input2 = $form.find('[name=input2]');

  $.ajax({
    method: $form.prop('method').toUpperCase(),
    url: $form.prop('action'),
    data: {
      input1Value: $input1.val(),
      input2Value: $input2.val(),
      input1Class: $input1.prop('className'),
      input2Class: $input2.prop('className')
    }
  }).
  done(onSuccess).
  fail(onFailure);
});

在PHP内，您将使用$_POST（或$_REQUEST）来获取已发送的值：

$input1_value = $_POST['input1Value'];
$input2_value = $_POST['input2Value'];
$input1_class = $_POST['input1Class'];
$input2_class = $_POST['input2Class'];

# do what you want with the variables

请注意，您必须在onSuccess函数中处理服务器的响应。通常，人们使用JSON来建模来自服务器的响应。您可以为其使用PHP的内置json_encode和json_decode函数。例如，您的PHP脚本可以回答：

$input1_value = $_POST['input1Value'];
$input2_value = $_POST['input2Value'];
$input1_class = $_POST['input1Class'];
$input2_class = $_POST['input2Class'];

# do what you want to do with the variables, then

$response = array(
  'ok' => true,
  'message' => 'PHP says "Thanks" for the information'
);

header('Content-Type: application/json');
echo json_encode($response);
die;

在onSuccess函数中，例如：

function onSuccess (response) {
  if (response.ok) {
    console.log('Submitted, and all values where OK');
    console.log(response.message);
    return; // opt-out early, no need for "else" keyword
  }
  console.log('Submitted, but something went wrong');
  console.log(response.message);
}