My data in bootstrap model is not properly showing

Question

i added a search button which is connected to my database and i want to display the result data on bootstrap model, upon clicking on the search button my page is auto refreshing and model doesn't open, when i hit the search button again it shows the data. i want to show my data on bootstrap model on first click without refreshing the page.

  <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>


  <body>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Notification</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      <?php

$con = new PDO("mysql:host=localhost;dbname=blog",'root','');

if (isset($_POST["submit"])) {
    $str = $_POST["search"];
    $sth = $con->prepare("SELECT * FROM `data` WHERE plotnumber = '$str'");

    $sth->setFetchMode(PDO:: FETCH_OBJ);
    $sth -> execute();

    if($row = $sth->fetch())
    {
        ?>
        <br><br><br>
        <table>
            <!-- <tr>
                <th>plotnumber</th>
                <th>plotdetail</th>
                <th>verified</th>
                <th>size</th>
                <th>status</th>
            </tr> -->
            <tr>
                <td><?php echo $row->plotnumber; ?></td>
                <td><?php echo $row->plotdetail;?></td>
                <td><?php echo $row->verified;?></td>
                <td><?php echo $row->size;?></td>
                <td><?php echo $row->status;?></td>
            </tr>

        </table>
<?php 
    }
        
        
        else{
            echo "Name Does not exist";
        }


}

?>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>



  <form method="post">
<label>Search</label>
<input type="text" name="search" required>
<input type="submit" name="submit" data-toggle="modal" data-target="#exampleModal">
    
</form>





    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Oct 10 '22 at 09:52

Saad Rehman · Answer 1 · 2022-10-10T12:35:11.333

0

if you are going to use input type submit or button submit it will reload the page as it is the default behavior of the form and submit button. If you do not want to reload the page there are a few options.

you can use ajax to load the data in the table and set the input type to button rather than submit and then call the function that contains ajax call.
you can use prevent default function in js to prevent the default behavior of the form.

==============================================================

 $.ajax({
    url: "jobs/php/job_single.php", //url to a php file where you have done php code
    type: "POST",
    data:  new FormData(document.getElementById("form")),
    contentType: false,
    processData:false,
    cache: false,
    success: function(data){
      
      $('#id_of_empty_div').html(data) //  where you want to load data
    }
});

// remember in url when you write path of a php file, computation is done in that php file and then you have to send the complete html of the data that you want to display or load, for example like this if i do + - and send thatt as a label I would do like this:

$c = $a + $b;
echo '<label>'.$c.'<label>';

also the submit input will be of type button and not type submit, it will have onclick event where you will call a function and that function will contain this ajax call

edited Oct 10 '22 at 12:35

answered Oct 10 '22 at 07:36

Saad Rehman

79
7

Thank you for your valuable time. Actually, I'm not familiar with Ajax. Is it possible for you to write a sample code for me? it would be really helpful as I'm trying to fix the issue for the past several days and it getting me frustrating – Talat Fayyaz Oct 10 '22 at 12:23
ok i am editing my answer, you can see how to write ajax call – Saad Rehman Oct 10 '22 at 12:27
Thank you so much for doing the effort for me. I did exactly what you said but i think i might have one little problem over here i know it's a dumb question but how can i change my input type from "submit" to button. If you looked at my code `code` if (isset($_POST["submit"])) { do i also need to change this submit into button? – Talat Fayyaz Oct 10 '22 at 23:57
Yes you will have to change the input type to button and instead of using isset($_POST["submit"]) and getting the data, the line in the ajax call: data: new FormData(document.getElementById("form")), gives you the data of the form in POST in that php file which you have given as url – Saad Rehman Oct 11 '22 at 09:18

My data in bootstrap model is not properly showing

1 Answers1