Using AJAX to Send Data on Button Click

66
May 19, 2017, at 6:47 PM

I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.

I want to be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should be displaying all of the added selections in a table.

I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the index-order.php page by using ajax when pressing the button?

Index.php code:

<form name="form1" action="index-order.php"> 
<section id="checkout-btn"> 
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php"> 
<section id="addToOrder">   
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($dbh->query($query) as $row) {?>
        <tr>
        <td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
        <td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
        <td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
        <td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
        <td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
        <td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
        <td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
        <td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
        <td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
    </tr>
    <?php } ?>
    </tbody>
</table>
</form>
<div id="log"></div>

Index-order.php:

<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
    <tr align="center">
        <th>Loc</th>
        <th>Report Code</th>
        <th>SKU</th>
        <th>Special ID</th>
        <th>Description</th>
        <th>Quantity</th>
        <th>Unit</th>
        <th>Quantity #</th>
    </tr>
    <?php 
        foreach($_POST['rows'][0] as $row): 
    ?>
        <tr align="center">
            <td><?php echo $row['loc']; ?></td>
            <td><?php echo $row['rp-code']; ?></td>
            <td><?php echo $row['sku']; ?></td>
            <td><?php echo $row['special-id']; ?></td>
            <td><?php echo $row['description']; ?></td>
            <td><?php echo $row['quantity']; ?></td>
            <td><?php echo $row['unit']; ?></td>
            <td><?php echo $row['quant']; ?></td>
        </tr>
    <?php 
        endforeach; 
    ?>
</table>
<?php endif; ?>

JavaScript:

$(function () {
  $("#order").click(function() {
  //reset the logger
  $('#log').empty();
  $('#merchTable input:checkbox:checked').each(function() {
    //for each checked checkbox, iterate through its parent's siblings
    var array = $(this).parent().siblings().map(function() {
      return $(this).text().trim();
    }).get();
    console.log(array);
    //to print the value of array
    $('#log').append(JSON.stringify(array))
    var request = $.ajax({
            type: 'post',
            url: 'index-order.php',
            data: array,
            success: function(){
                alert('success');
            },
            error: function(){
                alert('failure');
            }
          });
  })
  });
});
READ ALSO
How to format a number to currency R$, or $ to R$?

How to format a number to currency R$, or $ to R$?

How Can I format a simple number or $ format to Brazilian currency R$ - Real? I tried some ways to do this like maskMoney() plugin (I think that working just for inputs) but unsuccessfully

29
createRecord with custom ID in emberjs 2.x and Firebase 3.x

createRecord with custom ID in emberjs 2.x and Firebase 3.x

Until now, I saved all my data with the following line of code:

48
How to get a File() or Blob() from an URL in javascript?

How to get a File() or Blob() from an URL in javascript?

I try to upload an image to the Firebase storage from an URL (with ref()put(file))(www

39
How to send information into &lt;object&gt; tag content?

How to send information into <object> tag content?

here is my sample web http://nsysuga/

38