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

58
May 19, 2017, at 7:00 PM

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>
Answer 1

Use input type button instead of submit

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

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

READ ALSO
ASP MVC Refresh partial view grid

ASP MVC Refresh partial view grid

I am trying to refresh a partial view grid after changing a recordI have a button where the user can click on, than it will change a row in the grid

45
jQuery AJAX function call

jQuery AJAX function call

I have a problem with jQuery calling an AJAX function, basically everytime a user changes a select box, I want it to call the getSubCategories function, but for some reason, nothing is happeningAny ideas?

51
How to get current state data in jquery datatable after searching sorting etc?

How to get current state data in jquery datatable after searching sorting etc?

Let I have five rows in jquery datatableAfter searching no of rows becomes say 3

66