Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Derbyshire, UK
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Appending input fields to a form while looping through checked checkboxes

    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:

    Code:
    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

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    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

  • Users who have thanked devnull69 for this post:

    Chris_J (08-28-2012)

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Derbyshire, UK
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi devnull69,

    Thank you. That was indeed what I was after.

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

    Code:
    $(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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •