Member Avatar for blueguy777

I'm trying to pass the ac_no contained in my database table to a form that's displayed within a Bootstrap Modal upon clicking a button. My code is as follows.

<?php
            $mydata = mysql_query("SELECT * FROM slabpay WHERE ac_no='$ac_no'");
                        while($record = mysql_fetch_array($mydata)) 
             { 
             $id=$record['id'];
                  ?>                    
                            <tr class='fired' id='<?php echo $record['id']; ?>'>
                                <td class="center"><?php echo $record['install_no'] ?></td>
                                <td class="center"><?php echo $record['install_amt'] ?></td>
                                <td class="center"><?php echo $record['install_date'] ?></td>
                                <td class="center"><?php echo $record['agent_name'] ?></td>
                                <td id="fired" class="center">
                                                                    <?php
                                                                    if($record['install_amt']=='000000')
                                                                    {
                                                                        ?>

<button class="btn btn-info" data-toggle="modal" data-target="#payAmt" data-id="<?php echo $row['ac_no']; ?>">
  <i class="halflings-icon white edit"></i>    
</button>                                                                        
                                                                    <?php
                                                                    }
                                                                    ?>
                                </td>
                            </tr>

                                                            <?php
            }
?> 

// Javascript Code

<script>
$(document).ready(function(){
       $("#fired").click(function(){
         $("#ac_no").val($(this).attr('data-id')); 
         $('#payAmt').modal('show');
       });
    }); 
</script>


// modal window code

<div id="payAmt" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">            
        <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        </div>
        <div class="modal-body">

                        <input type="hidden" class="form-control" id="ac_no" name="ac_no" value="" />
                        <?php
                        $result = $_POST['ac_no'];
                        echo $result;
                        ?>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

Hope you guys will figure out this problem. Thanks in advance

  • 2 Contributors
  • 2 Replies
  • 3K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by blueguy777

Dani AI

Generated

You are really close. The main issues are (a) binding the click to a duplicated id, (b) reading the data attribute from the wrong element, and (c) mixing $row and $record. Put the account number on the same button that launches the modal, then read it when the modal opens and drop it into a hidden field (and optionally show it to the user).

Example changes:

  • Launch button in each row (uses the current $record, not $row):
<button type="button"
        class="btn btn-info js-open-pay"
        data-toggle="modal"
        data-target="#payAmt"
        data-acno="<?php echo htmlspecialchars($record['ac_no'], ENT_QUOTES, 'UTF-8'); ?>">
  <i class="halflings-icon white edit"></i>
</button>
  • Inside your modal body, keep a hidden field and, if useful, a display placeholder:
<input type="hidden" id="ac_no" name="ac_no">
<p>Account: <strong data-bind="ac_no"></strong></p>
  • jQuery: populate the field when the modal is shown, and submit on Save (building on @diafol’s hint). This works with Bootstrap 2 (show) and later (show.bs.modal):
$(function () {
  $('#payAmt').on('show.bs.modal show', function (e) {
    var $trigger = $(e.relatedTarget || document.activeElement);
    var acNo = $trigger.data('acno');
    $(this).find('input[name="ac_no"]').val(acNo);
    $(this).find('[data-bind="ac_no"]').text(acNo);
  });

  $(document).on('click', '#payAmt .btn-primary', function (e) {
    e.preventDefault();
    var $form = $('#payAmt form'); // wrap your modal fields in a <form>
    $.post('pay.php', $form.serialize())
      .done(function () { $('#payAmt').modal('hide'); })
      .fail(function () { alert('Could not save. Please try again.'); });
  });
});

Notes:

  • Do not assign the same id (e.g., id="fired") to multiple elements; use a class if needed.
  • Comparing amounts as strings like '000000' is brittle; compare numeric values.
  • mysql_* is deprecated; plan to migrate to PDO or mysqli with prepared statements for safety and future PHP compatibility.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

Your ajax routine will work off the "save changes" button-link click won't it in the modal footer?

$('.model-footer a.btn-primary').click(function(){
    //run your ajax code here
});
Member Avatar for blueguy777

thanks diafol

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.