PHP无需按下按钮即可立即提交表单数据

时间：2018-01-15 13:55:26

标签： javascript php html json web

我用HTML创建带有引导程序的表单，当用户单击提交按钮时，它会将数据提交到服务器上的json文件。问题是每当我加载页面时，它已经将一堆空数据提交给json文件，当我单击按钮时它什么都不做。 我已经尝试了我想到的一切，无法找到解决方案。也许有人可以帮我解决这个问题。

提前致谢。

这是我的代码：

 <?php

 $message = '';
 $error = '';

 if(isset($_POST["submit"]))
 {

   if(file_exists('tickets.json'))
   {
      $current_data = file_get_contents('tickets.json');
      $array_data = json_decode($current_data, true);
      $extra = array(
        'titel'        => $_POST["titel"],
        'omschrijving' => $_POST["omschrijving"],
        'datum'        => $_POST["datum"],
        'naam'         => $_POST["naam"],
        'TicketType'   => $_POST["TicketType"],
     );
      $array_data[] = $extra;
      $final_data = json_encode($array_data);
      if(file_put_contents('tickets.json', $final_data))
      {
        $message = "<label class='text-success'>Ticket verstuurd!</label>";
      }
     }
    else
   {
       $error = 'No JSON File';
   }

 }

?>

这是html位。

<!DOCTYPE html>
<html>
   <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
   <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.3/css/bootstrap.min.css" integrity="sha384-
Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" 
crossorigin="anonymous">
   <link rel="stylesheet" href="main.css">
   </head>

    <body>

<script>
 var id;

 id = Math.floor((Math.random() * 999) + 1);
</script>

<form method="post" action="submit.php">
  <?php
  if(isset($error))
  {
    echo $error;
  }
   ?>
 <div class="center">
  <div class="form-group">
    <label for="Titel">Titel</label>
    <input class="form-control" type="text" name="titel" id="Titel">
  </div>
  <div class="form-group">
    <label for="Omschrijving">Omschrijving</label>
    <textarea class="form-control" name="omschrijving" id="Omschrijving" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="Datum">Datum</label>
    <input class="form-control" name="datum" type="date" id="Datum">
  </div>
  <div class="form-group">
    <label for="Naam">Naam</label>
    <input class="form-control" name="naam" type="text" id="Naam">
  </div>
  <div class="form-check">
   <label class="form-check-label">
    <input class="form-check-input" type="radio" name="TicketType" id="TK_Rfc" value="rfc" checked>
     RFC
   </label>
  </div>
  <div class="form-check">
   <label class="form-check-label">
    <input class="form-check-input" type="radio" name="TicketType" id="TK_Bug" value="bug">
     BUG
   </label>
 </div><br>
  <script class="center">document.write("#" + id);</script><br><br>

  <button type="submit" class="btn btn-info">Submit</button>
 </div>

 <?php
 if(isset($message))
 {
   echo $message;
 }
  ?>
</form>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>



</html>

2 个答案:

答案 0 :(得分：0)

尝试使用if ($_SERVER["REQUEST_METHOD"] == "POST")代替if(isset($_POST["submit"]))。您也可以使用<input type="submit" value="Submit" class="btn btn-info">代替按钮标记。

希望这适合你。维尔成功！

答案 1 :(得分：0)

尝试使用此代码，您会发现它有效。

问题：

既然你说html代码和php代码都在同一个文件中，我将form action属性设置为empty： <form method="post" action="">

其次，您需要像这样命名提交标记，以便在条件：

时触发PHP代码

<button type="submit" name="submit" class="btn btn-info">Submit</button>

完整代码：

<?php
$message = '';
$error = '';

if (isset($_POST["submit"])) {

    if (file_exists('tickets.json')) {
        $current_data = file_get_contents('tickets.json');
        $array_data = json_decode($current_data, true);
        $extra = array(
            'titel' => $_POST["titel"],
            'omschrijving' => $_POST["omschrijving"],
            'datum' => $_POST["datum"],
            'naam' => $_POST["naam"],
            'TicketType' => $_POST["TicketType"],
        );
        $array_data[] = $extra;
        $final_data = json_encode($array_data);
        if (file_put_contents('tickets.json', $final_data)) {
            $message = "<label class='text-success'>Ticket verstuurd!</label>";
        }
    } else {
        $error = 'No JSON File';
    }

}
?>


<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    </head>

    <body>

    <script>
        var id;
        id = Math.floor((Math.random() * 999) + 1);
    </script>

    <form method="post" action="">
        <?php
        if (isset($error)) {
            echo $error;
        }
        ?>
    <div class="center">
      <div class="form-group">
        <label for="Titel">Titel</label>
        <input class="form-control" type="text" name="titel" id="Titel">
      </div>
      <div class="form-group">
        <label for="Omschrijving">Omschrijving</label>
        <textarea class="form-control" name="omschrijving" id="Omschrijving" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="Datum">Datum</label>
        <input class="form-control" name="datum" type="date" id="Datum">
      </div>
      <div class="form-group">
        <label for="Naam">Naam</label>
        <input class="form-control" name="naam" type="text" id="Naam">
      </div>
      <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="radio" name="TicketType" id="TK_Rfc" value="rfc" checked>
        RFC
      </label>
      </div>
      <div class="form-check">
      <label class="form-check-label">
        <input class="form-check-input" type="radio" name="TicketType" id="TK_Bug" value="bug">
        BUG
      </label>
    </div><br>
      <script class="center">document.write("#" + id);</script><br><br>

      <button type="submit" name="submit" class="btn btn-info">Submit</button>
    </div>

    <?php
    if (isset($message)) {
        echo $message;
    }
    ?>
    </form>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </body>
</html>
相关问题
最新问题