2017-05-19 53 views
0

我在php中創建了動態按鈕。我需要在同一個主頁上打開新的表單,並在點擊按鈕時刷新頁面。如何解決這個問題如何在php中動態按鈕點擊事件打開新窗體

這裏是我的代碼,我已經嘗試

<?php  
    function dash() { 
    include 'config.php'; 
    $sql = "SELECT roomno FROM roombook"; 
     if($result = mysqli_query($db, $sql)){ 
      $str = ''; 
      while($row = mysqli_fetch_array($result)){ 
       // generate array from comma delimited list 
       $rooms = explode(',', $row['roomno']); 
       //create the dynamic button and set the value 
       foreach ($rooms as $k=>$v){ 
        $str .= '<input type="submit" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';     
       } 
       //return $str; 
      } 
      return $str;    
     }else {  
      echo "ERROR: Could not able to execute $sql. " . mysqli_error($db); 
     } 
     mysqli_close($db); 
    } 
?> 
<!Doctype html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>room boking</title>  
    <link href="css/bootstrap1.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/front.css">  
</head> 
<body> 
    <form mathod="post" action=""> 
    <div class =" row box col-md-4" > 
     <div style="color:black"><?php echo dash();?></div> 
    </div> 
<script> 
    function showDiv() { 
     document.getElementById('link').style.display = "block"; 
    } 
</script> 
</form> 
+0

可能重複的[jquery驗證:防止表單提交](http://stackoverflow.com/qu estions/10305938/jquery-validation-prevent-form-submit) –

+0

能否請你用deatail解釋 – Yogesh

回答

0

使用輸入類型的按鈕,而不是提交

$str .= '<input type="button" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>'; 
1

您可以引導形式,所以它看起來有效

http://jsfiddle.net/KyleMit/0fscmf3L/

試試這個

它擁有HTML和CSS兩個代碼,所以你只需要整合它,你可以打開你形成同一個頁面上,並在彈出的

HTML代碼

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal"> 
    Launch Horizontal Form 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- Modal Header --> 
      <div class="modal-header"> 
       <button type="button" class="close" 
        data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span> 
         <span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Modal title 
       </h4> 
      </div> 

      <!-- Modal Body --> 
      <div class="modal-body"> 

       <form class="form-horizontal" role="form"> 
        <div class="form-group"> 
        <label class="col-sm-2 control-label" 
           for="inputEmail3">Email</label> 
        <div class="col-sm-10"> 
         <input type="email" class="form-control" 
         id="inputEmail3" placeholder="Email"/> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="col-sm-2 control-label" 
          for="inputPassword3" >Password</label> 
        <div class="col-sm-10"> 
         <input type="password" class="form-control" 
          id="inputPassword3" placeholder="Password"/> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <div class="checkbox"> 
         <label> 
          <input type="checkbox"/> Remember me 
         </label> 
         </div> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
         <button type="submit" class="btn btn-default">Sign in</button> 
        </div> 
        </div> 
       </form> 






      </div> 

      <!-- Modal Footer --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" 
         data-dismiss="modal"> 
          Close 
       </button> 
       <button type="button" class="btn btn-primary"> 
        Save changes 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 





<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm"> 
    Launch Normal Form 
</button> 

<!-- Modal --> 
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- Modal Header --> 
      <div class="modal-header"> 
       <button type="button" class="close" 
        data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span> 
         <span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Modal title 
       </h4> 
      </div> 

      <!-- Modal Body --> 
      <div class="modal-body"> 

       <form role="form"> 
        <div class="form-group"> 
        <label for="exampleInputEmail1">Email address</label> 
         <input type="email" class="form-control" 
         id="exampleInputEmail1" placeholder="Enter email"/> 
        </div> 
        <div class="form-group"> 
        <label for="exampleInputPassword1">Password</label> 
         <input type="password" class="form-control" 
          id="exampleInputPassword1" placeholder="Password"/> 
        </div> 
        <div class="checkbox"> 
        <label> 
         <input type="checkbox"/> Check me out 
        </label> 
        </div> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </form> 


      </div> 

      <!-- Modal Footer --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" 
         data-dismiss="modal"> 
          Close 
       </button> 
       <button type="button" class="btn btn-primary"> 
        Save changes 
       </button> 
      </div> 
     </div> 
    </div> 
</div> 





<!-- Post Info --> 
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'> 
    About this SO Question: 
    <a href='http://stackoverflow.com/q/26562900/1366033'> 
     Twitter Bootstap - form in Modal fomatting 
    </a><br/> 
    Fork This Skeleton Here: 
    <a href='http://jsfiddle.net/KyleMit/kcpma/'> 
     Bootstrap 3 Skeleton 
    </a><br/> 
</div> 

CSS代碼

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

希望這可能會幫助你

相關問題