Question

Im pretty new with javascript, so im not sure how I would do this. But basically I want to add a for loop in the ajax data: call, instead of list each item manually.

jQuery(document).ready(function()
                {
                    var $payment = { 
                        card:   'ajax-card', 
                        month:  'ajax-month', 
                        year:   'ajax-year', 
                        cvv:    'ajax-cvv', 
                        zip:    'ajax-zip', 
                        phone:  'ajax-phone'
                    };

                    jQuery.each( $payment, function($key, $val)
                    {
                        jQuery('.'+$val).attr({ id: $val });
                    });

                    jQuery('#pay-bill form input[type=submit]').click(function()
                    {
                        jQuery.ajax(
                        {
                            type: "POST",
                            url: "<?php echo get_bloginfo('template_directory').'/cnotethegr8/functions/braintree.php'; ?>",
                            dataType: "json",
                            data: 
                            {
                                card:   jQuery('#'+$card+' input').val(),
                                month:  jQuery('#'+$month+' input').val(),
                                year:   jQuery('#'+$year+' input').val(),
                                cvv:    jQuery('#'+$cvv+' input').val(),
                                zip:    jQuery('#'+$zip+' input').val(),
                                phone:  jQuery('#'+$phone+' input').val()
                            },
                            success: function(data)
                            {
                                if (data)
                                {
                                    alert(data.msg);
                                }
                            }
                        });
                        return false;
                    });
                });

Answer 1

Replace the code after var $payment = {...} by the code below. I have adjusted the loop where you’re assigning IDs to the elements.

var data = {};
jQuery.each( $payment, function($key, $val)
{
    var $element = jQuery('.'+$val);
    $element.attr({ id: $val }); //<-- This line can be removed, depending on the
                                 // circumstances
    data[$key] = jQuery('input', $element).val();
});
jQuery('#pay-bill form input[type=submit]').click(function(){
    jQuery.ajax(
    {
        type: "POST",
        url: "<?php echo get_bloginfo('template_directory').'/cnotethegr8/functions/braintree.php'; ?>",
        dataType: "json",
        data: data,
        success: function(data)
        {
            if (data)
            {
                alert(data.msg);
            }
        }
    });
    return false;
 });