jQuery Appending input fields to a form while looping through checked checkboxes

[Chris_J]

Hi all,

I've been up and down trying to find a solution for this but have yet to see how to do it.

The problem:
I have a website that offers photo holidays and courses. These can be booked in advance and the final payment need not be paid until a date in the future. Customers can pay by paypal and recently I found out that if they have more that one payment outstanding, when I direct them to paypal, my current code collects all their bookings regardless of when the payment is due and asks them to pay for all of them at once.

The task:
What I'd like to be able to do is allow the customer to check which booking they want to pay for and, from the bookings they check, generate the paypal form on the fly so that when they arrive at Paypal they can pay for one or several bookings.

So far I have a sample page that displays all the bookings for a particular customer and they are displayed in a table with a checkbox. http://www.peaknature.co.uk/payment-example.php

For each checkbox that is checked I'd like to pull the course ID, the course name and the balance owed from the table row and use those values in an input fields as shown on the webpage above.

It perhaps goes without saying that if the checkbox is then unchecked, the input fields are removed.

I had something along the lines of:

function(){
    $('#booking-list input:checkbox').change(
        function(){
            if ($(this).is(':checked')) {
        $('<input />').attr({
                type: 'text',
            id: 'foo',
            name: 'bar',
        value: '<?php echo $balance; ?>'
        }).appendTo('#paypal-form form').text($(this).val());              
            } else {
                $('#paypal-form input:contains('+$(this).val()+')').remove();
            }
        });

which appends things ok, but I'm missing the looping logic somewhere.

I think it's my PHP way of thinking about things that is preventing me from realising how to do this. If you need further explanation, please let me know.

Any help would be gratefully received.

Thanks,

Chris

[devnull69]

Like this?

http://jsbin.com/ibejoh/2

When you hover the mouse over the example page you will notice a button on the top right corner labeled "Edit in jsbin.com". You can use this button to view and edit the underlying HTML and Javascript

[Chris_J]

Hi devnull69,

Thank you. That was indeed what I was after.

From your solution, I'm able to add in a few extra lines.

$(document).ready(function() {
  $('input:checkbox').change(function() {
    updatePaypalForm();
  });
});

function updatePaypalForm() {
  // remove all the old fields
  $('input[name^=item_]').remove();
  $('input[name^=amount]').remove();
  
  // add fields for each checked row
  var idx = 0;
  $('input:checkbox').each(function() {
    if($(this).is(":checked")) {
      idx++;
      $('form').append('<input type="hidden" name="item_number_' + idx + '" value="' + $(this).parents('tr').find('td').eq(0).text() + '" />');
      $('form').append('<input type="hidden" name="item_name_' + idx + '" value="' + $(this).parents('tr').find('td').eq(3).text() + '" />');
      $('form').append('<input type="hidden" name="amount_' + idx + '" value="' + $(this).parents('tr').find('td').eq(4).text() + '" />');
    }
  });
  $('#result').html($('form').html().replace(/</g, "&lt;").replace(/>/g, "&gt;"));
}

Thanks again,

Chris