Madh Madh - 1 month ago 6
PHP Question

How to get a modal when a checkbox is selected?

Here are my codes

ex1.php

<body>

<form>

<label>
<input type="checkbox" value="LH" name="name">LH</label>
<label>
<input type="checkbox" value="LJ" name="name">LJ</label>
<label>
<input type="checkbox" value="LL" name="name">LL</label>
<label>
<input type="checkbox" value="FA" name="name">FA</label>
<label>
<input type="checkbox" value="FB" name="name">FB</label>
<label>
<input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<?php

$test = $_POST['test'];

$servername = "localhost";
$username = "root";
$password = "";


// Create connection
$conn = mysqli_connect($servername, $username, $password);


// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";

mysqli_connect_db("db",$conn);

$sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
$res = mysqli_query($conn,$sql);
while($row = mysqli_fetch_assoc($res)){
echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
.$row['Subcat'];
echo "<br>";
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


</body>


ex1.js

$document.ready(function(){
$(":checkbox").click(function(){
var value_ck = $(this).val();
$.ajax(
url:"ex1.php",
type:"post",
data:{test:value_ck},
success:function(){
$("#myModal").modal();




});
});
});


What I want to do here is as follows

I have a checkbox list in the form. When I click a checkbox ,a modal should appear with corresponding data coming from the database.I am a very beginner to
Jquery
. My codes are not working.I Found solutions everywhere to fix that. but I was unable .

Could anyone please to help me?

Answer

If you are not familiar with JSON/api things, do like that:

ex1.php

<body>

<form>

  <label>
    <input type="checkbox" value="LH" name="name">LH</label>
  <label>
    <input type="checkbox" value="LJ" name="name">LJ</label>
  <label>
    <input type="checkbox" value="LL" name="name">LL</label>
  <label>
    <input type="checkbox" value="FA" name="name">FA</label>
  <label>
    <input type="checkbox" value="FB" name="name">FB</label>
  <label>
    <input type="checkbox" value="FU" name="name">FU</label>
</form>

<!--modal-->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>

modal.php

<?php

            $test = $_POST['test'];

            $servername = "localhost";
            $username = "root";
            $password = "";


    // Create connection
            $conn = mysqli_connect($servername, $username, $password);


    // Check connection
            if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
            }
            echo "Connected successfully";

            mysqli_connect_db("db",$conn);

            $sql = "SELECT Subcat FROM subcat where CatId=".$test." ";
            $res = mysqli_query($conn,$sql);
            while($row = mysqli_fetch_assoc($res)){
            echo "<input type='checkbox' name='category[]' value='".$row['Subcat']."'>"
            .$row['Subcat'];
            echo "<br>";   
    }
?>

ex1.js

$document.ready(function(){
    $("INPUT[type=checkbox]").click(function(){
        var value_ck = $(this).val();
        $.ajax(
            url:"modal.php",
            type:"post",
            data:{test:value_ck},
            success:function(modalBody){
                $("#myModal .modal-body").html(modalBody);
                $("#myModal").modal();
            });
    });
});
Comments