Php 如何附加提交的表单数据?

Php 如何附加提交的表单数据?,php,jquery,html,css,Php,Jquery,Html,Css,我希望将提交的表单数据与最新表单数据一起附加在顶部。在我添加CSS之前,表单数据顺序很好,但在右边。我想在中间加上漂亮的边框。下面是PHP和CSS。现在它显示在中间,带有漂亮的边框,但文本显示在上一次提交的表单文本的顶部 <?php session_start(); ?> <!DOCTYPE html> <html> <head> <title>Explore</title> <link

我希望将提交的表单数据与最新表单数据一起附加在顶部。在我添加CSS之前,表单数据顺序很好,但在右边。我想在中间加上漂亮的边框。下面是PHP和CSS。现在它显示在中间,带有漂亮的边框,但文本显示在上一次提交的表单文本的顶部

<?php 

session_start();




?>
<!DOCTYPE html>
<html>
<head>
    <title>Explore</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

 <link id="page_favicon" href="favicon.ico" rel="icon" type="image/x-icon" />
 <!-- Optional theme -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 <link rel="stylesheet" href="index.css">
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
 <script type="text/javascript" src="ddslick.js"></script>
 <script type="text/javascript" src="http://dl.dropbox.com/u/40036711/Scripts/ddslick.js"></script>
 <script type="text/javascript" src="searchlist/src/jquery-customselect.js"> </script>
 <link rel="stylesheet" type="text/css" href="searchlist/src/jquery-customselect.css">
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="timeago.js"></script>



 <!-- GOOGLE API IMPORTANT -->

 <link rel="stylesheet" href="main.css">


</head>

<body>
  <ol class="breadcrumb" style="position: fixed; width:100%; z-index: 1000;">
    <li><a href="index.php">  <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
    <li><a href="vtsearch.php"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Hokie Passport</a></li>
    <li><a href="imageSearch.html"> <span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Photos</a></li>
    <li><a href="weather.php"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span> Weather</a></li>

  </ol>


  <div id="allContent" >
    <div id="formData" >
      <input class="button-warning pure-button" style ="position: fixed; bottom: 0px;"title="Clear page content"type="submit" name="clear" id="clearbtn" value="Clear">

      <?php
#FOR THE DRIVERS ONLY 

      if (!isset($_SESSION['inputs'])) {
        // initialize the saved input session variable the first time

        $_SESSION['inputs'] = array();
      }
      if (isset($_POST['name']) || isset($_POST['nameTwo'])) {
        array_push($_SESSION['inputs'], $_POST);

      }
      foreach (array_reverse($_SESSION['inputs']) as $input) {
        if(isset($input['desiredNum']))
        {
          echo "  <span class='trip'> <p class='driverAlert' > DRIVER </p> <img src='taxi.png'  width ='50' height='50'title='driver'> {$input['name']}, Age: {$input['age']} <br> To: {$input['arriveLoc']} - From: {$input['departLoc']}<br>
          Leaves: {$input['departDate']} Returns: {$input['returnDate']} <br> Will drive up to: {$input['desiredNum']} people
          <br> Contact @ {$input['email']} <br> <br> </span> 
          ";
        }

        else
        {
         echo " <span class='trip'> <p class='riderAlert' > PASSENGER </p> <img src='rider.png'  width ='50' height='50'title='rider'> {$input['nameTwo']}, Age: {$input['ageTwo']} <br> Would like to go to {$input['departLocTwo']} from {$input['arriveLocTwo']} on {$input['departDateTwo']} and return on 
         {$input['returnDateTwo']} <br>  Contact @ {$input['emailTwo']}  <br> <br></span> 
         ";
       }

     }


     ?>

   </div>
   <!--  States selector  -->




   <div id="rider">
    <input  class="button-success pure-button" type="button" id="riderbtn"value="Passenger"> <br>
    <form action="vt.php" id="riderForm" method="post" class="form-inline">

      <div class="form-group">
       <input required type="text" class="form-control input-sm"  required id="nameTwo" name="nameTwo" placeholder="Enter Name" autocomplete="off">
     </div><br> <br>

     <div class="form-group">   
       <input type="text" class="form-control input-sm" id="ageTwo" required  name="ageTwo" placeholder="Enter Age" autocomplete="off">
     </div> <br> <br>

     <div class="form-group">

       <input type="text" class="form-control input-sm" id="departLocTwo" required  name="departLocTwo" autocomplete="off" placeholder="Departure Location">
     </div><br> <br>

     <div class="form-group">

       <input type="text" class="form-control input-sm" id="arriveLocTwo" required  name="arriveLocTwo" autocomplete="off"placeholder="Destination Location">
     </div><br> <br>

     <div class="form-group">

       <input type="date" class="form-control input-sm" id="departDateTwo" required  name="departDateTwo" autocomplete="off" placeholder="Depart Date">
     </div><br> <br>

     <div class="form-group">

       <input type="date" class="form-control input-sm" id="returnDateTwo" required  name="returnDateTwo" autocomplete="off" placeholder="Return Date">
     </div> <br> <br>
     <div class="form-group">

       <input type="email" class="form-control input-sm" id="emailTwo" required  name="emailTwo" autocomplete="off" placeholder="Email">
     </div><br> <br>

     <input class="btn btn-default" type="submit" value="Submit" onclick="submitRider();"> 
   </form>
 </div>


 <div id="driver">
  <input type="button" class="button-success pure-button"  id="driverbtn"value="Driver">

  <form action="vt.php" id="driverForm" method="post" class="form-inline">
    <select class="form-control" id="desiredNum" name="desiredNum">
      <option disabled>How many people may you drive?</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
    </select>
    <br> <br>

    <div class="form-group">
     <input required type="text" class="form-control " id="name" required name="name" autocomplete="off" placeholder="Enter Name">
   </div><br> <br>

   <div class="form-group">   
     <input type="text" class="form-control " id="age" name="age" required  autocomplete="off" placeholder="Enter Age">
   </div> <br> <br>

   <div class="form-group">

     <input type="text" class="form-control " id="depart" name="departLoc" required  autocomplete="off" placeholder="Departure Location">
   </div><br> <br>

   <div class="form-group">

     <input type="text" class="form-control " id="arrive" name="arriveLoc" required  autocomplete="off"placeholder="Destination Location">
   </div><br> <br>

   <div class="form-group">

     <input type="date" class="form-control " id="departDate" name="departDate" required  autocomplete="off"placeholder="Depart Date">
   </div><br> <br>

   <div class="form-group">

     <input type="date" class="form-control " id="returnDate" name="returnDate" autocomplete="off" required placeholder="Return Date">
   </div> <br> <br>
   <div class="form-group">

     <input type="email" class="form-control " id="email" required  name="email" autocomplete="off" placeholder="Email">
   </div><br> <br>
   <input class="btn btn-default" type="submit" value="Submit" onclick="submitDriver();"> 
 </form>

</div>

</div>


</body>

<script type="text/javascript">
    $('#driverbtn').click(function()
    {
        $('#driverForm').toggle();

    });
    $('#riderbtn').click(function()
    {
        $('#riderForm').toggle();
    });

    $('#clearbtn').click(function()
    {
        $.post('clear.php', function()
     {window.location = window.location.href;});

    });




</script>
<script type="text/javascript">
  $(document).ready( function(){
    $('#states').ddslick();


  });

</script>



<!--- End of rider data -->




</html>




.driverAlert
{
    color: green;
}
.riderAlert
{
    color:red;
}

body
{
    background-color: white;
}
#allContent div
{

    width: 33%;
    position: relative;
    float: left;
}
body
{
    overflow-y: scroll;
}
#riderForm
{

    display: none;

}
#driverForm
{
    display: none;

}

#driverbtn
{
    margin-top: 20px;
    margin-bottom: 22px;
}
#riderbtn
{
    margin-top: 20px;
    margin-bottom: 22px;
}
#rider
{
    position: fixed;
    right: -450px;
}
#driver
{
    position: fixed;
    right: -200px;
}
#options
{
    text-align: center;
}
.trip{
    position: fixed;
    top: 250px;
    right:250px;
    display: inline-block;
    padding: 16px;
    margin: 10px 0;
    max-width: 468px;
    border: #ddd 1px solid;
    border-top-color: #eee;
    border-bottom-color: #bbb;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    font: bold 14px/18px Helvetica, Arial, sans-serif;
    color: #000;

}

探索

  • 你能提供一个JSFIDLE吗?我们可以这样帮助你。您有许多
    css
    文件,我们不知道其中有什么。因此,在这样的问题中,您必须提供一种方式,让我们能够看到您所看到的内容(创建一个代码段/bin,提供公共URL)来帮助您解决这个问题。我在线上有它,但是当单击查看页面源时,影响我的问题的css是不可见的,因为它应用于php。我可以从本地查看页面源代码中看到css。这有什么办法吗?你能提供一个JSFIDLE吗?我们可以这样帮助你。您有许多
    css
    文件,我们不知道其中有什么。因此,在这样的问题中,您必须提供一种方式,让我们能够看到您所看到的内容(创建一个代码段/bin,提供公共URL)来帮助您解决这个问题。我在线上有它,但是当单击查看页面源时,影响我的问题的css是不可见的,因为它应用于php。我可以从本地查看页面源代码中看到css。这有什么关系吗?