PHP : How to put and pass variable in modal URL

Question

So, I have a button to give a direct link to modal in same page.

this is the button and url

<a data-toggle="modal" 
   href="main_user.php?user_id=<?php echo $user['user_id']; ?>#myModal" 
   class="btn btn-warning">

( I try to echo the $user_id on before #modal ) is it right ?

and after I click the button, the modal will appear. This is the modal with the form.

<form class="form-login" action="action/doEditUserStatus.php" method="post">
          <div class="login-wrap">
               <div class="changestatus">
                   <p>Banning or Activing User Status</p></div>
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-success active">
                               <input type="radio" name="options" value="1" autocomplete="off"  checked> Actived
                            </label>
                            <label class="btn btn-primary">
                              <input type="radio" name="options" value="2" autocomplete="off"> Banned
                            </label>
                        </div>
          </div>
           <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                <button class="btn btn-theme" name="modalSubmit" type="submit">Submit</button>
           </div>
    </form>

And then I try to submit the modal form, but the action cannot read the $user_id which I put before #modal.

UPDATE : Table code :

So this is my table :

<tr class="success">
   <th class="numeric">ID</th>
   <th class="numeric">E-mail</th>
   <th class="numeric">Name</th>
   <th class="numeric">Phone</th>
   <th class="numeric">Picture</th>
   <th class="numeric">Status</th>
   <th colspan="2" class="numeric">Action</th>
</tr>


<tr>
   <td class="numeric"><?php echo $user['user_id']; ?></td>
   <td class="numeric"><?php echo $user['email']; ?></td>
   <td class="numeric"><?php echo $user['name']; ?></td>
   <td class="numeric"><?php echo $user['phone']; ?></td>
   <td class="numeric"><?php echo $user['picture']; ?></td>
   <td class="numeric">
       <a data-toggle="modal" href="main_user.php?user_id=<?php echo $user['user_id']; ?>#myModal" class="btn btn-warning">
          <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>&nbsp;Change Status
        </a>
   </td>
</tr>

The main problem is : When I click the button, then the modal will appear but it can't get the $user_id from that button?

Why do you want to pass the user id in a button that is just here to toggle a modal box ? — Brewal, Nov 19 '14 at 21:23

score 4 · Accepted Answer · edited May 23 '17 at 12:34

Put a hidden input field with the user_id into your form:

<input type="hidden" name="user_id" value="<?php echo $user['user_id']; ?>">

EDIT: If you mean Bootstrap try this:

Link/Button:

<a data-toggle="modal" data-userid="<?php echo $user['user_id']; ?>"
   href="main_user.php#myModal" 
   class="btn btn-warning">

Hidden Form Field:

<input type="hidden" name="user_id" value="">

Javascript:

$('#myModal').on('show.bs.modal', function(e) {
    var userid = $(e.relatedTarget).data('userid');
    $(e.currentTarget).find('input[name="user_id"]').val(userid);
});

See also http://getbootstrap.com/javascript/#modals-related-target and Passing data to a bootstrap modal

You should have mentioned Bootstrap in your question. PHP is not the appropriate tag.

this is not work man, because if I try that way, the $user['user_id'] won't containing the $user_id which I choose. — Monk, Nov 19 '14 at 21:38

Brewal · Answer 2 · 2014-11-19T21:43:53.640

This will work if your link will do a redirection :

You will need to add an hidden input within your form with the $_GET['user_id'] variable (that contains the value of the parameter in the url) :

<input type="hidden" name="user_id" value="<?php echo (int)$_GET['user_id'] ?>" />

but, if I'm right, this link is handle by twitter bootstrap that will prevent its default behaviour. So there is no actual redirection. What you can do, is use a custom data attribute in the link :

<a data-toggle="modal" 
   data-userid="<?php echo $user['user_id']; ?>"
   href="#myModal" 
   class="btn btn-warning">

And handle this with a bit of javascript, to add the hidden input field to the form :

$(document).ready(function(){
    $('[data-userid]').click(function(){
        var userid = $(this).data('userid');
        var form = $('form.form-login');
        var input = $('<input type="hidden" name="user_id" value="'+userid+'" />');
        if (form.find('input[name="user_id"]').length) {
            form.find('input[name="user_id"]').val(userid);
        } else {
            form.prepend(input);
        }
    });
});

this is not work man, because if I try that way, the $_GET['user_id'] won't containing the $user_id which I choose. — Monk, Nov 19 '14 at 21:38
That is because your link is a toggle button handled by twbootstrap, then there is no redirection made, so it is ignoring what's before #myModal. Check my edit — Brewal, Nov 19 '14 at 21:46

score 1 · Answer 3 · answered Sep 23 '19 at 21:36

how about this add the id to the data-target

<a href="#"  data-toggle="modal" data-target="#myModal-<?php echo $user['user_id'];?>" class="btn btn-warning btn-lg">click me</a>

now in your modal id add this

myModal-<?php echo $user['user_id'];?>

and you can load the data dynamically base on that id

PHP : How to put and pass variable in modal URL

3 Answers3

Linked