如何在不重新启动页面的情况下将值传递给模态？

Question

I have an autocomplete search box to search names from DB. Result should be search name, click to open a modal posting the data from php if id is equal. My problem is that when the modal pops-up the page will refresh automatically. How do I stop the page from restarting when open the modal form upon post submit? Seeking your help for this. Thanks alot!

Please refer my codes as noted below:

Autocomplete search box

        <form class="search" id="searchForm" method="post">
            <div class="search__inner">
                <input type="text" style="text-transform:capitalize; font-size:120%" id="livesearch" class="search__text" placeholder="Search patient's name ..."/>
                <i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>               
            </div>
            <input type="text" name="searchid" id="searchid" style="width:7%;" placeholder="searchid" value=""> &nbsp;&nbsp;
        </form>

JS-Edited

<script>
    $(function () {
        $("#livesearch").autocomplete({
            source: "php/livesearch.php",
            select: function( event, ui ) {
                // this will append a div to the body, then load the stream ... if the stream contains
                // your modal it will be appended to the body
                let div = $('<div/>').appendTo('body');
                div.load('dsearch_modal.php?id=' + ui.item.id, function(data) {
                    // now that is complete ... open the modal
                    let modal = $('.modal', div);   // search for your modal in the div
                    modal.modal('show');       // open the modal (bootstrap)
                });
            }
        });
    }); 
</script>

Modal

<!-- Search bar Modal -->
<?php include 'dsearch_modal.php'; ?>

<div id="searchModal" class="modal fade card new-contact" role="dialog">
    <div class="modal-dialog modal-sm-10">
        <div class="modal-content">
            <div class="new-contact__header">
                <a href="#" class="zmdi zmdi-camera new-contact__upload"></a>
                <img src="demo/img/contacts/user_empty.png" class="new-contact__img" alt="">
            </div>
            <div align="center">                                            
                <h4 style="text-transform:capitalize;" id="pxname"><?php print $row['search_fname']; ?>&nbsp;&nbsp;<?php print $row['search_lname']; ?> </h4>
                <p hidden id="pxnameid"><?php print $row['search_PatientID']; ?></p>

            </div>

            <div class="card-body modal-dialog modal-content">
                <h6 style="text-transform:uppercase;">
                    <p>Last consultation visit</p>
                </h6>
                <br>    
                <div class="row">                   
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Consultation date</label>
                            <input type="text" id="searchobgyneDate" class="form-control" value="<?php print $row['search_obgyneDate']; ?>" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Service</label>
                            <input type="text" id="searchpxservice" class="form-control" value="<?php print $row['search_service']; ?>" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label>Company</label>
                            <input type="text" class="form-control" id="searchcompanyname" disabled>
                            <i class="form-group__bar"></i>
                        </div>
                    </div>  
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">Consultation</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">Records</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control">LAB Results</a>
                        </div>
                    </div>
                    <div class="col-sm-3" align="center">
                        <div class="form-group">
                            <a href="#"class="btn btn-light form-control" data-dismiss="modal">Cancel</a>
                        </div>
                    </div>                                                                                                                                                                                              
                </div>                  
            </div>
        </div>
    </div>
</div>
<!-- End of search bar Modal -->
<?php $conn->close(); ?>

PHP

<?php

    $myid = $_GET['id'];

    $sql1 = ("SELECT tblParity.pxservice as search_service, tblPatients.Lname as search_lname, tblPatients.mi as search_mi, tblPatients.Fname as search_fname, 
    tblPatients.PatientID as search_PatientID, DATE_FORMAT(tblOBGyne.obgyneDate,'%m/%d/%Y') as search_obgyneDate, 
    tblParity.ParityID, tblOBGyne.OBGyneID, tblOBGyne.chiefcomplain as search_chiefcomplain, tblOBGyne.companyname as search_companyname
    FROM tblPatients 
    INNER JOIN tblParity ON tblPatients.PatientID = tblParity.PatientID
    INNER JOIN tblOBGyne ON tblParity.ParityID = tblOBGyne.ParityID                                                 
    WHERE tblPatients.PatientID = '{$myid}' ORDER BY tblobgyne.obgyneDate DESC limit 1");   

    $result1 = mysqli_query($conn, $sql1);
    $num_results = mysqli_num_rows($result1);
    $row = mysqli_fetch_assoc($result1);

    echo $row['search_PatientID']." - ". $row['search_lname'].", ". $row['search_fname'];                   
?>

Answer 1

Use jQuery.load()

<script>
$(function () {
    $("#livesearch").autocomplete({
        source: "php/livesearch.php",
        select: function( event, ui ) {
            event.preventDefault();         // no necessary
            $("#livesearch").val(ui.item.value);    // not necessary
            $("#searchid").val(ui.item.id);     // not necessary

            // this will append a div to the body, then load the stream ... if the stream contains
            // your modal it will be appended to the body
            let div = $('<div />').appendTo('body');

            div.load( 'http://yoururl/?id=' + ui.item.id, function( data) {
                // debug point - to work the data has to start with
                // <div id="searchModal" class="modal
                console.log( data);

                // now that is complete ... open the modal
                let modal = $('.modal', div);   // search for your modal in the div
                modal.modal( 'show');       // open the modal (bootstrap)

                // debug point
                console.log( modal); // should reflect div#searchModal.modal.fade.card.new-contact

            });

            // not this:
            // $("#searchModal").modal(document.getElementById("searchForm").submit());    

        }
    });


}); 
</script>