Ajax data for each

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;
                    });
                });

If you want the form serialized in JSON format, see this [answer][1] [1]: http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery — flynfish, Oct 06 '11 at 20:25
If you want the form serialized in JSON format, see this [answer][1] [1]: http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery — flynfish, Oct 06 '11 at 20:26

score 2 · Answer 1 · answered Oct 06 '11 at 20:18

2

If the values you want to pass in are in a form you can use $('#myForm').serialize()

answered Oct 06 '11 at 20:18

malificent

1,441
14
18

score 2 · Accepted Answer · answered Oct 06 '11 at 20:20

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;
 });

score 1 · Answer 3 · answered Oct 06 '11 at 20:21

Make a variable before calling $.ajax, and make a loop to set the values.

var postData = {};
$.each($payment, function(k, v){
   //postData[k] = $('#'+v+' input').val();
   postData[k] = $('.'+v+' input').val();
});

$.ajax({
   type: 'POST',
   data: postData,
   // ...
});

P.S. You don't need the loop you have (setting $('.'+$val).attr({ id: $val });), you can just do $('.'+v+' input').val(); (inside a loop).

score 0 · Answer 4 · answered Oct 06 '11 at 20:32

0

If you want an each function that can iterate with key->value pairs, checkout underscore.js: http://documentcloud.github.com/underscore/#each

_.each({key:'value',key2:'value2'},function(value,key){
  // access the key->value during each iteration
});

answered Oct 06 '11 at 20:32

Teddy

18,357
2
30
42

Ajax data for each

4 Answers4