在PHP中单击提交时如何重定向到另一页（如果设置了字段）或在同一页面上显示错误（如果字段为空）

Question

I have 4 fields, when page loads I don't want any error to show up. But if fields are left empty and submit is clicked then I want to show errors.

I want my page to load first. Then when "submit" is clicked, it checks that whether any of the fields are not set, if so then show these errors and prevent the page from getting redirected to other page(Here "slots.php"), and if everything is okay then redirect the page. This is the php code:

<?php

      $error = "";

      if($_POST){

          if($_POST['parking_area']!="")
          {$_SESSION['parking_area'] = $_POST['parking_area'];}

          if($_POST['vehicle_no']!="")
          {$_SESSION['vehicle_no'] = $_POST['vehicle_no'];}

          if($_POST['time_from']!="")
          {$_SESSION['time_from'] = $_POST['time_from'];}

          if($_POST['time_to']!="")
          {$_SESSION['time_to'] = $_POST['time_to'];}




          if($_POST['parking_area'] == "select" || $_POST['parking_area'] == "" )
          {$error .= "<p>Please select the parking area</p>";}

          if(!$_POST['vehicle_no'])
          {$error .= "<p>Please enter the vehicle number</p>";}

          if(!$_POST['time_from'])
          {$error .= "<p>Please enter the in time</p>";}

          if(!$_POST['time_to'])
          {$_error .= "<p>Please enter the out time</p>";}

          if($error!=""){
              $error = "<div class='error'>".$error."</div>";
          }
      }

?>

This is the html code:

<div><?php echo $error;?></div>
              <div class="main-form">

                  <!--<div id="faltu"></div>-->

                  <!--action="slots.php"-->

                  <form method="POST" action="slots.php">

                      <div class="area main-form-components">
                          <select name="parking_area">
                              <option value="select">--Select--</option>
                              <option value="mahu-naka">Mahu Naka Parking</option>
                              <option value="collectorate">Collector Office Parking</option>
                              <option value="treasure-island">Treasure Island</option>
                              <option value="central-mall">Central Mall Parking</option>
                          </select>
                      </div>

                      <div class="time main-form-components">
                          <input type="time" name="time_from" value="09:30"> to 
                          <input type="time" name="time_to" value="17:30">
                      </div>


                      <div class="vnumber main-form-components">
                          <input type="text" name="vehicle_no">
                      </div>

                          <!--
                      <div class="buttons">
                          <div id="prev-button"><i class="fas fa-arrow-left"></i> Prev.</div>
                          <div id="next-button">Next <i class="fas fa-arrow-right"></i></div>
                      </div>
                          -->

                      <div>
                          <input type="submit">
                      </div>

                          <!--<div class="buttons">
                              <button><i class="fas fa-arrow-left"></i> Prev.</button>
                              <button>Next <i class="fas fa-arrow-right"></i></button>
                          </div>-->

                      </form>
                  </div>

Edit: I know how I can do it with javascript, but I am looking for a way to do this without using javascript, only with php if possible.

Answer 1

This should work. I have both my html and php code in the same file as slots.php Once the values are posted we validate the value and if all values are there means we redirect to success page or we show error in same page.

<?php

$error = "";

if($_POST){

    if($_POST['parking_area']!=""){
        $_SESSION['parking_area'] = $_POST['parking_area'];
    }

    if($_POST['vehicle_no']!=""){
        $_SESSION['vehicle_no'] = $_POST['vehicle_no'];
    }

    if($_POST['time_from']!=""){
        $_SESSION['time_from'] = $_POST['time_from'];
    }

    if($_POST['time_to']!=""){
        $_SESSION['time_to'] = $_POST['time_to'];
    }


    if($_POST['parking_area'] == "select" || $_POST['parking_area'] == "" ){
        $error .= "<p>Please select the parking area</p>";
    }

    if(!$_POST['vehicle_no']){
        $error .= "<p>Please enter the vehicle number</p>";
    }

    if(!$_POST['time_from']){
        $error .= "<p>Please enter the in time</p>";
    }

    if(!$_POST['time_to']){
        $_error .= "<p>Please enter the out time</p>";
    }

    if($error!=""){
        $error = "<div class='error'>".$error."</div>";
    }
    else {
        header('Location: success.php');
    }
}
?>

I have added header location redirect if there is no error. Consider success.php is the page where we need to redirect the user if the values are set in the page.

<div>
<?php echo $error;?></div>
<div class="main-form">
    <form method="POST" action="slots.php">

        <div class="area main-form-components">
            <select name="parking_area">
                <option value="select">--Select--</option>
                <option value="mahu-naka">Mahu Naka Parking</option>
                <option value="collectorate">Collector Office Parking</option>
                <option value="treasure-island">Treasure Island</option>
                <option value="central-mall">Central Mall Parking</option>
            </select>
        </div>

        <div class="time main-form-components">
            <input type="time" name="time_from" value="09:30"> to 
            <input type="time" name="time_to" value="17:30">
        </div>


        <div class="vnumber main-form-components">
            <input type="text" name="vehicle_no">
        </div>


        <div>
            <input type="submit">
        </div>
    </form>
</div>

Answer 2

Should define ID or NAME tag for each input and then :

In this example for two textarea(a,b):

<script type="text/javascript">
    function func()
    {
        var a=document.forms["Form"]["answer_a"].value;
        var b=document.forms["Form"]["answer_b"].value;
        if (a==null || a=="",b==null || b=="")
        {
            alert("Please Fill All Required Field");
            return false;
        }
    }
</script>

<form method="post" name="Form" onsubmit="return func()" action="">
     <textarea cols="30" rows="2" name="answer_a" id="a"></textarea>
     <textarea cols="30" rows="2" name="answer_b" id="b"></textarea>
     <input type="submit">

</form>