How to open new form on dynamic button click event in php

Question

I have created dynamic button in php. i need to to open new form in same homepage on that dyanamic button click event and when i am clicking on button it refresh the page. how to solve this problem

here is my code that i have tried

<?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>

Possible duplicate of [jquery validation: prevent form submit](http://stackoverflow.com/questions/10305938/jquery-validation-prevent-form-submit) — Jonathan Dion, May 19 '17 at 10:26

score 1 · Answer 1 · answered May 19 '17 at 10:33

You can you bootstrap form so it will look effective

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

Try this one

It has html and css both code so you just need to integrate it and you can open you form on same page and in popup

HTML code

<!-- 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 code

<!-- 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">

Hope this might help you

score 0 · Answer 2 · answered May 19 '17 at 10:30

0

Use input type button instead of submit

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

answered May 19 '17 at 10:30

Sharad Kale

971
1
7
19

How to open new form on dynamic button click event in php

2 Answers2