Passing Values to Modal Popup Using Java Script

Question

I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.

This is the code portion for button. Id will be assigned form DB. It is working fine.

<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>

Modal Window: Here I need to get the value form popupwindow function and query DB and view:

<div id="openModal" class="modalDialog">
    <div>
        <a href="#" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <!--  From the retrieved values I can query and view data here.-->
    </div>
</div>

JavaScript Function for Passing values to Modal Popup Window

function popupwindow(id) {

// code for Pass the value to modal window

            window.location="#openModal"
            }

I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.

I think this will help you stackoverflow.com/questions/2295316/… — Raul
– Raul, Commented Dec 11, 2013 at 8:39

frogatto · Accepted Answer · 2013-12-11 08:39:34Z

1

I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:

function popupwindow(id) {

    $("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
        $("#openModal").show();
    })

}

And your HTML:

<div id="openModal" class="modalDialog">
    <div>
        <a href="#" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
        <!--  From the retrieved values I can query and view data here.-->
        <div class="content"></div>
    </div>
</div>

answered Dec 11, 2013 at 8:39

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

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

Comments

Basit · Accepted Answer · 2013-12-11 08:38:02Z

0

Instead of using onClick(), use jQuery click function. Here's how:

$("[input[name = 'button']").click(function(){
    $(this).attr('id'); // This will give the ID of the button clicked. 
});

Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:

<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>

Now, in JQuery, do the following

$(".modalBtn").click(function(){
    $(this).attr('id'); // This will give the ID of the button clicked. 
});

Hope it answers your question.

answered Dec 11, 2013 at 8:38

Basit

1,8402 gold badges31 silver badges50 bronze badges

2 Comments

Rifa Over a year ago

How to pass that ID inside popup?

Basit Over a year ago

Store it in a variable and pass it as an argument to the function that is loading data in the modal. Easy peasy!

Vlad Mekh · Accepted Answer · 2013-12-11 08:39:24Z

0

use window.location.hash for replace hash

function popupwindow(id) {
    window.location.hash = '#openModal'
}

answered Dec 11, 2013 at 8:39

Vlad Mekh

154 bronze badges

Comments

CleanX · Accepted Answer · 2013-12-11 08:42:11Z

You can use the following script for loading and unloading pop up box,

    <script type="text/javascript">
  $(document).ready( function() {
     loadPopupBox();

    $("#popupBoxClose").click( function() {           
        unloadPopupBox();
    });




    function unloadPopupBox() {    // TO Unload the Popupbox
        $("#popup_box").fadeOut("slow");
        $("#mainWrapper").css({ // this is just for style       
            "opacity": "0.8" 
        });
    }   

    function loadPopupBox() {    // To Load the Popupbox
        $("#popup_box").fadeIn("slow");
        $("#mainWrapper").css({ // this is just for style
            "opacity": "0.2" 

        });        
    }       

 });  
</script>

Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.

one solution is you can use something like,

      window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"

and change the method of the form to GET instead of post.

After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.

Collectives™ on Stack Overflow

Passing Values to Modal Popup Using Java Script

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related