Script to populate array and send via AJAX

Question

The title should be more specific, I know, but the question is too elaborated to even describe in one title itself... I'm having troubles to pass certain amount of values into one array to post via AJAX. Note that all of this code is for pure understanding of what I want to do.

Here's the HTML code with a foreach loop inside the table

<table class="table table-striped table-bordered table-hover">
  <thead>
    <th style="text-align: center;">Select</th>
    <th style="text-align: center;">Name</th>
    <th style="text-align: center;">Situation</th>
    <th style="text-align: center;">Bill</th>
    <th style="text-align: center;">Date Limit</th>
    <th style="text-align: center;">Value of Bill</th>
    <th style="text-align: center;">Own Value</th>
    <th style="text-align: center;">Responsible Name</th>
   </thead>
   <tbody>
   <?php
     foreach ($result as $value) {
        echo '<tr style="text-align: center;">
              <td><input style="cursor: pointer;" type="checkbox" value="'. $value['VALUEBILL'] .'" class="check_list"></input>
              <input style="display: none;" type="checkbox" checked="true" value="'. $value['IDTRANSACTION'] .'" name="numControle"></td>
              <td>'. utf8_encode($value['NAME']) .'</td>
              <td>'. $value['SITUATION'] .'</td>
              <td>'. $value['BILL'] .'</td>
              <td>'. $value['DATELIMIT'] .'</td>
              <td>'. $value['VALUEBILL'] .'</td>
              <td>'. $value['OWNVALUE'] .'</td>
              <td>'. utf8_encode($value['RESPONSABLENAME']) .'</td>
              </tr>';
     }

  ?>
  </tbody>
 </table>

For a better understanding, I have one jQuery script which will sum all bills selected and give the result of all of them together, taking the checked $value['VALUEBILL'] checkboxes.

Here's the jQuery script to get and sum all checked checkboxes values.

$(document).ready(function(){
   update();
});
$('input[type=checkbox]').click(function(){
   update();
})
function update(){
   var amount2 = 0;
   $('.check_list').each(function () {
      if (this.checked) {
        amount2 += Number($(this).val());
          checked_boxes ++;
      }
   $("input[name=amount]").val("$"+amount2.toFixed(2));
});

Here's the form where the script sum all values and input:

<form name="sentMessage" id="purchases" novalidate>
  <h4 style="margin-top: -5px;">Total:</h4>
  <input type="text" class="form-control" id="amount2" name="amount" value="" disabled="">
  <button type="submit">Send Payment</button>
</form>

I pointed the code to a better understanding on what I'm doing and to let you know about what the main problem is

Q: So, what do you need, because is not clear at all?

Take note inside the foreach loop, it has an ocult checkbox with the value of $value['IDTRANSACTION'], this is what I need to send as well with the other checkbox... The first checkbox have the value of the bill, and the second, the ID of transaction, which each one have its unique value, and it's extremely important to account all those bills.

So my question is:

How do I check this box as well when the first checkbox is checked? (I tried a few jQuery codes, but they checked ALL of them in a row when I checked the first one, I need to check only the one which is checked, and not the others that foreach provide);
After getting the first issue sorted out, I need to populate one array inside the form to send in one AJAX post (which is already ready and working properly) to get all the checkboxes values with the ID's of each one.

That's it... I'm sorry for the long question, but I needed to provide all the info I could so you could understand what I'm trying to do.

Cheers!

for your first question use the siblings(".your element name").check() — Dev Man
– Dev Man, Commented Sep 23, 2016 at 12:04
@madalinivascu I'm really trying to understand your pointing, do you even read the question? It's not about hide something dude =) — Felipe S. Bueno
– Felipe S. Bueno, Commented Sep 23, 2016 at 12:09
@madalinivascu , yes, I know about input type hidden, but the questions I made still prevail, I wonder if you really read the entire post — Felipe S. Bueno
– Felipe S. Bueno, Commented Sep 23, 2016 at 12:13

madalinivascu · Accepted Answer · 2016-09-23 12:12:47Z

1

Use a hidden input and the following js

<td><input style="cursor: pointer;" type="checkbox" value="'. $value['VALUEBILL'] .'" class="check_list"></input>
<input type="hidden" class="id_tansaction" value="'. $value['IDTRANSACTION'] .'" name="numControle"></td>

var data = {};
$('.check_list').change(function(){
 var id_tansaction = $(this).val('.id_tansaction').val();
 var valuebill = $(this).parent().find();
      if($(this).is(':checked')) {
         data[id_tansaction] = valuebill;
       } else {
         delete data[id_tansaction];
       }
});

the data array is then send via ajax data:data

answered Sep 23, 2016 at 12:12

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

1 Comment

Felipe S. Bueno Over a year ago

Can I use this script outside the foreach function? And then based on what It get populate one array outside the foreach?

Collectives™ on Stack Overflow

Script to populate array and send via AJAX

Here's the HTML code with a foreach loop inside the table

Here's the jQuery script to get and sum all checked checkboxes values.

Here's the form where the script sum all values and input:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here's the HTML code with a foreach loop inside the table

Here's the jQuery script to get and sum all checked checkboxes values.

Here's the form where the script sum all values and input:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest