如何将php的变量内容回传到html中？

Question

如果表单有错误，我会尝试将$myerror回显到div id=output部分中的html代码中。我还试图将这些输出错误样式化为顶部列出的.error样式。到目前为止，我所拥有的是不能工作的，我不确定如何继续。如果表单有错误，我会尝试将$myerror回显到div id=output部分中的html代码中。我还试图将这些输出错误样式化为顶部列出的.error样式。到目前为止，我所拥有的是不能工作的，我不确定如何继续。

   <!DOCTYPE html>
    <html>
      <head>
        <title>Payment Form</title>
        <style>

          input[type=text] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            box-sizing: border-box;
          }

          select {
            width: 100%;
            padding: 16px 20px;
            border: none;
            border-radius: 4px;
            background-color: #f1f1f1;
            font-size:14px;
            margin-top: 7px;
            margin-bottom: 7px;

          }

          input[type=button], input[type=submit], input[type=reset] {
            background-color: #4CAF50;
            border: none;
            border-radius: 4px;
            color: white;
            padding: 16px 32px;
            text-decoration: none;
            margin: 4px 2px;
            cursor: pointer;
          }

          .success {
            font-size: 20px;
            color: green;
          }

          .error {
            font-size: 20px;
            color: red;
          }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      </head>
    <body>



      <h1>Student Payment Form</h1>
        <form id="myForm" action="form.php" method="post";>
          <div type="input">
            <div>
              <label>First Name </label>
              <input type="text" name="firstname" id="firstname">
            </div>
            <div>
              <label>Last Name </label>
              <input type="text" name="lastname" id="lastname">
            </div>
            <div>
              <label>Student ID </label>
              <input type="text" name="studentid" id="studentid">
            </div>
            <div>
              <label>Tuition </label>
              <input type="text" name="tuition" id="tuition"> <br>
            </div>
          </div>
          <div>
            <label>Payment Method </label>
            <select name="selection" id="selection">
                <option value="credit">Credit</option>
                <option value="debit">Debit</option>
                <option value="bitcoin">Bitcoin</option>
            </select>
          </div>
          <div type="input">
            <input type="submit" id="submit";">
            <input type="button" id="button" value="Random";">
            <input type="reset" id="resetbutton" value="Log">
          </div>
        </form>
      <br> 
         <div id="output">
           <ul></ul>
         </div>


    <?php

      if (isset($_POST[firstname]) && isset($_POST[lastname]) && isset($_POST[studentid]) && isset($_POST[tuition]))
      {

          $frstnm = $_POST[firstname];
          $lstnm = $_POST[lastname];
          $stdntd = $_POST[studentid];
          $ttn = $_POST[tuition];

          if (strlen($frstnm) < 2)
          {
            $myerror = "<li> First name must be 2 or more characters in length";
          }
          if ((strlen($lstnm) < 3) || (strlen($lstnm) > 12))
          {
            $myerror .= "<li> Last name must be between 3 and 12 characters in length";
          }
          if (strlen($stdntd) != 9)
          {
            $myerror .= "<li> Student id must be exactly 9 characters in length";
          }
          if (($ttn < 2000) || ($ttn > 10000))
          {
            $myerror .= "<li> Tuition must be between 2000 and 10000";
          }

          echo "document.getElementById("output").innerHTML =".$myerror

      }

    ?>

    <script>
    </script>
    </body>
    </html>

Answer 1

在script标签之前打印js代码在script标签中打印js代码。

<script>
   <?php 
   echo "document.getElementById('output').innerHTML ='".$myerror."'";
   ?>
</script>

innerHTML将替换您的div内容，因此您应该在列表中附加li标记。