Passing Variable to Javascript for Ajax

Question

I have a system which currently outputs a table of results in html for the browser.

These results can be updated by clicking the approveCredit button on each row.

I'd like to create a javascript catch which looks out for the button click and passes the given variable from the row and performs an ajax task.

Code:

PHP to echo table of results

<tbody>
 <?php 
 $count = 1;
   while ($row = mysql_fetch_array($test))  
 {?>

 <tr>
    <td class="text-center"><?php echo $count++;?></td>
    <td><?php echo $row['user_id'];?></td>
    <td><?php echo $row['credits'];?></td>
    <td><?php echo $row['notes'];?></td>
    <td><?php echo $row['po'];?></td>
    <td><?php echo $row['date_received'];?></td>
    <td class="text-center">
        <div class="btn-group">
            <a class="btn btn-xs btn-default approveCredit" type="button" value="<?php echo $row['credits'];?>" data-toggle="tooltip" data-original-title="Approve Credit Request"><i class="fa fa-check"></i></a>
        </div>
    </td>
  </tr> 
  <?php } ?>    
  </tbody>

Javascript Awaiting Button Click

$('.approveCredit').on('click', function() {

        var creditid = $('.approveCredit').val();

        $.ajax({
            url: "ajax url to update database",
            type: "POST",
            data: {creditid: creditid},
            success: successFunction,
            error: errorFunction
        });

});

Define "doesn't work" . What bit doesn't work (even if we can guess), what does it give you, what were you expecting etc etc. All useful information. — Jonnix
– Jonnix, Commented Sep 29, 2015 at 9:44

Sajitha Rathnayake · Accepted Answer · 2015-09-29 09:49:18Z

2

Try this. actually you must use Jquery attr to get value from the ancher

<a class="btn btn-xs btn-default approveCredit" type="button" value="<?php echo $row['credits'];?>" data-toggle="tooltip" data-original-title="Approve Credit Request"><i class="fa fa-check"></i></a>

value is an attribute of the ancher. So you should use it like this,

var creditid = $('.approveCredit').attr('value');

and also preventing default action of ancher (a tag) change your code as this

$('.approveCredit').on('click', function(e) {
        e.preventDefault();
        var creditid = $('.approveCredit').attr('value');

        $.ajax({
            url: "ajax url to update database",
            type: "POST",
            data: {creditid: creditid},
            success: successFunction,
            error: errorFunction
        });

});

edited Sep 29, 2015 at 9:49

answered Sep 29, 2015 at 9:43

Sajitha Rathnayake

1,7263 gold badges27 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

Passing Variable to Javascript for Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related