如何使用传递给JavaScript函数的输入参数值到此JS函数打开的弹出窗口中？

Question

I am not so into PHP and JavaScript and I have the following problem trying to pass a value from a main page to a popup page (defined into this main page). I try to explain my situation in details:

I have an account.php page containing this link:

<a href="#" onclick="doRemoveBooking();">
    <i class="fa fa-times"></i>
</a>

Clicking on this link it is performed the doRemoveBooking() JavaScript function that is defined in the same page into this block:

<script type="text/javascript">
    //metodo richiamato al click del bottone "RIVENDI"
    function doRemoveBooking(id){
        console.info("Into doRemoveBooking");

        $('.popUpRemoveBooking').magnificPopup({
            items: {
                src: '#remove-booking-popup'
            }
            // (optionally) other options
        }).magnificPopup('open');
    }
</script>

that opens a popup defined at the end of the dame account.php page by this div element:

<div class="popUpRemoveBooking">
    <div id="remove-booking-popup" class=" white-popup-block mfp-hide">
        <div class="fluid-container">
            <div class="row">
                <h2><?php echo $texts['CANCEL_BOOKING'] ?></h2>

                <p>Sei veramente sicuro di voler cancellare la prenotazione?</p>
                <?php echo $id_booking; ?>
            </div>
        </div>
    </div>
</div>

This popup is correctly opened but I obtain an error message when it try to render this line:

<?php echo $id_booking; ?>

I know that it is wrong. As you can see my JavaScript function take an id as parameter:

doRemoveBooking(id)

How can I print this id received as input parameter from the JavaScript function used to open the popup in the popup body? (instead the wrong ). What is a smart and neat way to do it?

Answer 1

Replace <?php echo $id_booking; ?> <?php echo $id_booking; ?> with <span id="bookingID"></span>

Then replace the content of that <span> in your function:

function doRemoveBooking(id){
    console.info("Into doRemoveBooking");

    $('#bookingID').html(id); // <---------------- Add this line

    $('.popUpRemoveBooking').magnificPopup({
        items: {
            src: '#remove-booking-popup'
        }
        // (optionally) other options
    }).magnificPopup('open');
}

Don't forget to call doRemoveBooking(id) with the correct booking-id !