查看模态搜索结果

时间:2018-07-25 16:44:16

标签: javascript php html mysql bootstrap-modal

i制作用户将键入的搜索表单 他/她的身份证和结果将显示在 模态像一个更新,我的模态里面有名字文本框和 姓氏,我无法在模式上显示我的结果,但 我设法在模态之外显示结果 而且在我单击提交后,模态立即消失。 我是php新手,希望您能对我有所帮助。预先感谢

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

我在html中的示例代码:

<a class="btn btn-outline-info" href="#exampleModal" data-toggle="modal" data-target="#exampleModal" target="_blank" role="button">Click me
        <i class="fa fa-sign-in ml-2"></i>
      </a>
     <?php print $output; ?>
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
 <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header blue accent-1" >
        <h5 class="modal-title" style="color:white;" id="exampleModalLabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <center><h5><p> Do you have existing account? </p></h5></center>
      </div>
      <div class="modal-footer">

        <a href="sample.html" class="btn"   data-dismiss="modal" style="margin-right:220px; color:#fff; background:#00bcd4" href="#exampleModal2" data-toggle="modal" data-target="#exampleModal2" target="_blank" role="button">Yes</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade " id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"  data-backdrop="false">
 <div class="modal-dialog  modal-dialog-centered " role="document">
    <div class="modal-content">
       <div class="modal-header blue accent-1">

        <h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> Confirm Identity:</h3>
        <a href="sample.php" button type="btn" class="close"  aria-label="Close">
          <span aria-hidden="true">&times;</span></a>      </div>
      <div class="modal-body">
     <form method="post">

        <div class="md-form input-group">
            <input type="search" class="form-control added-padding-2" placeholder="Search for ID..." name="search" onKeyPress="return isNumberKey(event)" maxlength="11" id="textsend" onKeyUp="success()">

            <span class="input-group-btn">
                <button class="btn btn-outline-info waves-effect my-0"  type="submit" href="#exampleModal3" data-toggle="modal" data-target="#exampleModal3" target="_blank" role="button" id="button" disabled>Search</button>
            </span>        </div>
    </form>
  </div>
    </div>
  </div>
</div>
</div>

<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
 <div class="modal-dialog  modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header blue accent-1">

        <h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> User Information:</h3>
       <a href="sample.php" button type="btn" class="close"  aria-label="Close">
          <span aria-hidden="true">&times;</span></a>      </div>
      <div class="modal-body">
      <form class="needs-validation "  action="sample.php" method="post" novalidate >
      <div class="row">
       <div class="col">
        <div class="md-form mt-0">
               <input type="text" class="form-control"  name="firstname" placeholder="First name" id="firstname" value="<?php echo  $fname; ?>" required >
               <div class="invalid-feedback">
       What's your First name?      </div>
            </div>
        </div>
        <div class="col">
          <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Last name" name="lastname" id="lastname" value="<?php echo  $lname; ?>" required >
                 <div class="invalid-feedback">
       What's your Last name?      </div>
            </div>
        </div>
    </div>
    <div class="text-center mt-2">
                 <button type="submit"  class="btn btn-info" style="width:98%; ">Submit<i class="fa fa-sign-in ml-1"></i></button>
          </div>
</form>


      </div>
    </div>
      </div>
      </div>

这是我的php代码:

 <?php
    include_once('connection.php');
    $output = '';
    if(isset($_POST['search'])){
      $searchq = $_POST['search'];
      $sql =  "SELECT id, fname, lname FROM test WHERE id ='$searchq'" ;
      $result = mysqli_query($conn, $sql);
      $count = mysqli_num_rows($result);
        if($count == 0){
              $output ='No results!'; 
        }else{
            while($row = mysqli_fetch_array($result))
            {
              $fname = $row['fname'];
              $lname = $row['lname'];
              $id = $row['id'];
              $output .= '<div>'.$fname.''.$lname.'</div>';
             $InsertSql="INSERT INTO test(fname,lname,id) VALUES ('$fname','$lname','$id')";
            $res = mysqli_query($conn, $InsertSql);
            }
          }
        }  
    ?>

这是我的JavaScript代码:

<script>
    function success() {
     if(document.getElementById("textsend").value==="") { 
            document.getElementById('button').disabled = true; 
        } else { 
            document.getElementById('button').disabled = false;
        }
    }
    </script>


<script type="application/javascript">

  function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;

         return true;
      }

</script>

这是我当前的输出: sample output

0 个答案:

没有答案