Send PHP variable value to JavaScript popup window in same page

Question

I want to send php variable value to JavaScript popup window. My JavaScript popup Code and PHP code is in the same page. Within this same page, I want to call JavaScript popup with PHP variable value.

So basically I have 2 different PHP variable values in a form of 2 buttons, user can click any button and I want only 1 popup window appears based on the PHP variable value.

Here is what I am doing in code:

<!-- Calling same Popup window with diff ID -->
<a href="#login?h_id=123" data-toggle="modal" class="btn btn-large">Hire Person</a> 

<!-- Calling same Popup window with diff ID -->
<a href="#login_hire?f_id=456" data-toggle="modal" class="btn btn-large">Hire <?php echo $array_other_new[1] ?></a>

But my Popup is not appearing if I do something like this href="#login?h_id=123" as shown above. My Popup only appears when it calls like href="#login" without any ?id=123.

Now here is my Bootstrap based popup Code:

<!-- LogIn for Hiring Popup Starts -->
<div class="modal large hide fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="login">
    
<div class="modal-header">
    
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        
        <h3>LogIn</h3>
    </div>
    <div class="modal-body">
    
    <form method="post" onSubmit="javascript:void(0)">
    
    <span id="status"></span>
    
    <input type="hidden" id="get_follow_id" value="">
    
    <input type="hidden" id="get_hire_id" value="<?php echo $get_id ?>">
    
    <div class="controls controls-row">
    
    <label class="title">Email *</label>
    <input class="span3" type="text" placeholder="Email" id="email" />
    
    </div>
    
    <div class="controls controls-row">
    
    <label class="title">Password *</label>
    <input class="span3" type="password" id="pass" placeholder="Password" />
    
    
    </div>
    
    <div class="controls controls-row">
    
    <input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
    
    <br><br>
    <a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a>
    
    </div>
    
    
   </form>
        
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        
    </div>    
    
</div>    
</div>
<!-- LogIn for Hiring Popup Ends -->

Please propose any working solution.

possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — , Feb 08 '15 at 07:08
No its way too different, I don't want to send php values to javascript to other pages, i know how to do that, What I want to achieve here is: passing php variable value to javascript popup window within same page. But my Popup is not appearing if I do something like this href="#login?h_id=123" My Popup only appears when it calls like href="#login" without any ?id=123 — John Smith, Feb 08 '15 at 07:15
its basically bootstrap popup code which i have mentioned above in code snippet. its starting with where i have bootstrap popup modals. this is the place which is called when i click on this: Hire Person — John Smith, Feb 08 '15 at 07:24
But when i do something like this while calling this popup modal, Hire Person because now i introduce ?h_id=123 the popup modal is not showing. — John Smith, Feb 08 '15 at 07:26
I want it to show but also I want to send php variable value run-time to this popup modal, let me know if it is clear to u ? — John Smith, Feb 08 '15 at 07:27
#hash?param=value is backwards because it is making the hash have a parameter. try this: ?param=value#hash , maybe that helps... — xeo, Feb 08 '15 at 09:25

Wesley Smith · Accepted Answer · 2015-02-10T09:07:36.997

As I understand it,

you have a page that is created with php
on this page links/ buttons are created
when the page is created php has access to an array of ids
you would like to store these ids with the links/buttons on the finished page in such a way that when a user clicks the link/button a modal appears and the id stored with the clicked button is populated in an input displayed inside the modal
you would like for all of the links/buttons to use just the one modal

If this is correct, I would use the link/button's data attributes for this. See the comments in the below for details:

Here is a working example

NOTE that I had to remove the hide class from your modal div making it like <div class="modal large fade".... as the modal would not appear otherwise

Here's a quick look at what's needed to make this work see below for full code

jQuery

$('body').on("click",".callModal", function() {
    var f_id = $(this).data('f-id');
    $('#get_hire_id').val( f_id );
});

*Note that the syntax for accessing data('f-id') may vary depending on the version of jQuery you use and/or what browsers you need to support, I believe IE<11 has issues here....but where doesn't it....

php

<?php
for($i = 0; $i < count($array_other_new); ++$i) {
    echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
?>

All of the code used in my example:

<?php
// I dont know exactly how you create your page 
// so i'm just gonna show you a simple example  and wing it
$array_other_new=array("John Smith","James Jones", "William Baker", "Michael Frost", "Montey Python");
$array_other_new_hire_ids=array("123","456", "789", "012", "345");
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(function() {
    // listen for clicks on our links
    $('body').on("click",".callModal", function() {
        // when a user clicks a button
        // get the id we stored in the button's
        // data attribute  
        var f_id = $(this).data('f-id');
        // note our attribute is `data-f-id` in the html 
        // but we access it by `.data('f-id')` here
        // always leave the `data-` off
        // set the value to our input
        $('#get_hire_id').val( f_id );
        // the normal link functionallity 
        // will open the modal as normal
    });
});
</script>
</head>
<body>
<?php
for($i = 0; $i < count($array_other_new); ++$i) {
    echo '<a href="#login_hire" data-toggle="modal" data-f-id="'.$array_other_new_hire_ids[$i].'" class="btn btn-large callModal">Hire '.$array_other_new[$i].'</a>';
} 
// the important part here is data-f-id="'.$array_other_new_hire_ids[$i].'"
// this is where we store our php variable in the link's data-f-id property which we have just made up, cool huh? 
// also note that we added the class `callModal` to the element so we can easily bind a function to them later
?>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
<div class="modal large fade" id="login_hire" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>LogIn</h3>
      </div>
      <div class="modal-body">
        <form method="post" onSubmit="javascript:void(0)">
          <span id="status"></span>
          <input type="text" id="get_follow_id" value="">
          <input type="text" id="get_hire_id" value="">
          unhid to show setting value<br>
          <div class="controls controls-row">
            <label class="title">Email *</label>
            <input class="span3" type="text" placeholder="Email" id="email" />
          </div>
          <div class="controls controls-row">
            <label class="title">Password *</label>
            <input class="span3" type="password" id="pass" placeholder="Password" />
          </div>
          <div class="controls controls-row">
            <input type="submit" onClick="login(); return false;" value="Click Here to LogIn" class="btn" />
            <br>
            <br>
            <a onclick="whenClicked1()" href="javascript:void(0)">Not Registered Yet ? Sign Up Now</a> </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
      </div>
    </div>
  </div>
</div>
<!-- end of the modal ---------------------------------------------------------------------------------------------------->
</body></html>

can you send me your this working example as .zip here please: http://dodsoftware.com/sotests/gettest.html?f_id=654&h_id=123 — John Smith, Feb 09 '15 at 16:57
Ok @JohnSmith I previously thought you wanted to navigate to a page and have a modal popup when the page loads capturing information from the link that was used to get to the page, ( I guess the use of `login?h_id=123` made me think that ) my apologies. I have updated my answer with what I think you actually need. — Wesley Smith, Feb 10 '15 at 09:11
Oh my you are just a life savor and believe me it solved my life problem now. This is exactly what I wanted to achieve from last 3 weeks. I have no words to say thanks to you. You are so genius. Hats off Sir.. — John Smith, Feb 10 '15 at 10:46
Just dont forget to test it across all browsers you want to support as te jQuery syntax may need to be adjusted — Wesley Smith, Feb 10 '15 at 10:50
Thanks a lot.. I will take care of it.. You are the perfect person and this world of stackoverflow should respect you.. You deserved huge much needed respect. Again thanks you so much for helping me this far. — John Smith, Feb 10 '15 at 10:54

Send PHP variable value to JavaScript popup window in same page

1 Answers1

Linked