pass a value from mysql db to bootstrap modal

Question

i'm new to core php coding here i'm having doubt in calling a db value to bootstrap modal popup

<td class="bgimg"><a href="#myModal" data-toggle="modal" data-target="#edit-modal" id="<?php echo $obj['service_id']; ?>" class="service_title"><?php echo $obj["service_name"]; ?></a></td>

this is a line used in my code to send "service_id" which from a table and it should be displayed in the modal popup, from there, user has to fill the text fields and it should be update to another table with the same id.

here is the code of modal popup

<div id="edit-modal" class = "modal fade" tabindex="-1" role="dialog" style="padding-top: 150px;" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Choose your slots</h4>
            </div>
            <div class="modal-body">
            <p class="edit-content">service id:</p>
                <form role="form1" name="loginform" method="post" class="login-form">
                    <div class="form-group">
                        <table align="center">
                            <tr>
                                <td colspan="2"><center>slot 1</center></td>
                            </tr>
                            <tr>
                                <td><input type="date" id="datePicker" name="slot1_dt"> </td>
                                <td><input type="time" name="slot1_tm"> </td>
                            </tr>
                            <tr>
                                <td colspan="2"><center>slot 2</center></td>
                            </tr>
                            <tr>
                                <td><input type="date" id="datePicker" name="slot2_dt"> </td>
                                <td><input type="time" name="slot2_tm"> </td>
                            </tr>
                            <tr>
                                <td colspan="2"><center><button type="submit" name="book" class="btn btn-default" value="book" style="font-size: 14px !important;">Book</button></center></td>
                            </tr>
                        </table>
                        <?php
                        if(isset($_REQUEST["book"]))
                        {
                            if($_REQUEST["book"])
                            {
                                $service_id=$_REQUEST["serv_id"];
                                $customer_id=$_REQUEST["cust_id"];
                                $slot1_dt=$_REQUEST["slot1_dt"];
                                $slot2_dt=$_REQUEST["slot2_dt"];
                                $slot1_tm=$_REQUEST["slot1_tm"];
                                $slot2_tm=$_REQUEST["slot2_tm"];
                                $slot1=$slot1_dt." ".$slot1_tm;
                                $slot1 = date("Y-m-d H:i:s",strtotime($slot1));
                                $slot2=$slot2_dt." ".$slot2_tm;
                                $slot2 = date("Y-m-d H:i:s",strtotime($slot2));
                                $insertqry="INSERT INTO `tblappointments`(`customer_id`, `service_id`, `preferred_slot1_date`, `preferred_slot2_date`) VALUES ('$customer_id','$service_id','$slot1','$slot2')";
                                mysqli_query($con, $insertqry) or die(mysqli_error($con));
                            }
                        }

                        ?>

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

it displays the result well but service_id is not passing to update it in the database

thanks in advance

remove href="#myModal" from modal trigger button, you don't need it when using data attribute data-target="#edit-modal" — Shehary
– Shehary, Commented Nov 30, 2015 at 8:48

Shehary · Accepted Answer · 2015-11-30 08:40:57Z

1

use modal event listener,

$(document).ready(function(){
    $('#edit-modal').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).attr('id');
        alert(id);
        $("#service_id").val(id);
    });
});

and in modal in <form></form> add hidden input

<input type="hidden" id="service_id" name="serv_id" value="">

SideNote: Don't use $_REQUEST, instead use $_POST and escape the string.

answered Nov 30, 2015 at 8:40

Shehary

9,99810 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yogesh nagare · Accepted Answer · 2015-11-30 09:33:59Z

0

$(document).on("click", "#upload_image", function () {
    var myBookId = $(this).data('id');
    $(".modal-body #activity_id___").val( myBookId );
    console.log(myBookId);
    // As pointed out in comments, 
    // it is superfluous to have to manually call the modal.
    // $('#addBookDialog').modal('show');
});  
<input type="hidden" name="activity_id___" id="activity_id___" value=""/>

answered Nov 30, 2015 at 9:33

yogesh nagare

12 bronze badges

Collectives™ on Stack Overflow

pass a value from mysql db to bootstrap modal

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related