I'm trying to pass the user_id contained in my database to a form that's displayed within a Bootstrap Modal upon clicking a button.

The button:

<td id="fired">
  <button class="btn btn-default btn-danger btn-xs fired" data-id="<?php echo $row['user_id']; ?>">
    Fired
  </button>
</td> 

JQuery:

$(document).ready(function(){
    $(".fired").click(function(){
        $("#user_id").val($(this).attr('data-id')); 
        $('#firedModal').modal('show');
    });
});

Modal:

<div class="modal fade" id="firedModal" tabindex="-1" role="dialog" aria-labelledby="firedModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="firedModal">Fire Habbo</h4>
      </div>

      <form class="form-signin" role="form" action="" method="post">  
        <div class="modal-body">    
          <input type="text" class="form-control" placeholder="Firing Reason" name="fired_reason" required autofocus />
          <input type="text" class="form-control" placeholder="Firing Tag" name="fired_tag" required />
          <input type="text" class="form-control" placeholder="Date" name="fired_date" required />
          <input type="text" class="form-control" placeholder="Status (MAY JOIN AS RECRUIT/PARDONED/NEVER REHIRE)" name="fired_status" />
          <input type="hidden" class="form-control" name="user_id" value="" />
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Fire</button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </form>
    </div>
  </div>
</div>

However, on clicking the button the modal shows but the value of the user_id input is not filled by the row's user_id. What am I doing wrong? Thanks.

I'm trying to pass the user_id contained in my database to a form that's displayed within a Bootstrap Modal upon clicking a button.

The button:

<td id="fired">
  <button class="btn btn-default btn-danger btn-xs fired" data-id="<?php echo $row['user_id']; ?>">
    Fired
  </button>
</td> 

JQuery:

$(document).ready(function(){
    $(".fired").click(function(){
        $("#user_id").val($(this).attr('data-id')); 
        $('#firedModal').modal('show');
    });
});

Modal:

<div class="modal fade" id="firedModal" tabindex="-1" role="dialog" aria-labelledby="firedModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="firedModal">Fire Habbo</h4>
      </div>

      <form class="form-signin" role="form" action="" method="post">  
        <div class="modal-body">    
          <input type="text" class="form-control" placeholder="Firing Reason" name="fired_reason" required autofocus />
          <input type="text" class="form-control" placeholder="Firing Tag" name="fired_tag" required />
          <input type="text" class="form-control" placeholder="Date" name="fired_date" required />
          <input type="text" class="form-control" placeholder="Status (MAY JOIN AS RECRUIT/PARDONED/NEVER REHIRE)" name="fired_status" />
          <input type="hidden" class="form-control" name="user_id" value="" />
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Fire</button>
        </div>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </form>
    </div>
  </div>
</div>

However, on clicking the button the modal shows but the value of the user_id input is not filled by the row's user_id. What am I doing wrong? Thanks.

• javascript
• php
• jquery
• mysql
• ajax

• 2 You are calling #user_id but there is no id="user_id" – imbondbaby Commented Jul 6, 2014 at 21:48

1 Answer 1

Modify your code , with this one.

  <input type="hidden" class="form-control" id="user_id" name="user_id" value="" />


    $(document).ready(function(){
       $("#fired").click(function(){
         $("#user_id").val($(this).attr('data-id')); 
         $('#firedModal').modal('show');
       });
    });