Individual Ajax data

Question

Individual Ajax data

Starting out with javascript, I'm a bit unsure of how to tackle this task. Essentially, I am looking to implement a for loop within the ajax data call, rather than listing 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;
                    });
                });

javascript ajax for-loop

Answer 1

Answer №1

Make the following changes to the code snippet provided after var $payment = {...}. I have made adjustments to the loop where IDs are assigned to elements.

var data = {};
jQuery.each( $payment, function($key, $val)
{
    var $element = jQuery('.'+$val);
    $element.attr({ id: $val }); //<-- Consider removing this line based on the situation
    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;
 });

Answer 2

Make the following changes to the code snippet provided after var $payment = {...}. I have made adjustments to the loop where IDs are assigned to elements.

var data = {};
jQuery.each( $payment, function($key, $val)
{
    var $element = jQuery('.'+$val);
    $element.attr({ id: $val }); //<-- Consider removing this line based on the situation
    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;
 });

Answer 3

Answer №2

When attempting to pass certain values, they can be conveniently formatted using $('#myForm').serialize()

Answer 4

When attempting to pass certain values, they can be conveniently formatted using $('#myForm').serialize()

Answer 5

Answer №3

To optimize your code when using $.ajax, it's recommended to create a variable and then use a loop to set the values dynamically.

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

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

By avoiding unnecessary loops (such as setting $('.'+$val).attr({ id: $val });), you can simplify your code by directly accessing values with $('.'+value+' input').val(); within a loop.

Answer 6

To optimize your code when using $.ajax, it's recommended to create a variable and then use a loop to set the values dynamically.

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

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

By avoiding unnecessary loops (such as setting $('.'+$val).attr({ id: $val });), you can simplify your code by directly accessing values with $('.'+value+' input').val(); within a loop.

Answer 7

Answer №4

For those looking for a function that can loop through key->value pairs, consider checking out underscore.js:

_.each({key:'value',key2:'value2'},function(value,key){
  // utilize the key->value relationship while looping
});

Answer 8

For those looking for a function that can loop through key->value pairs, consider checking out underscore.js:

_.each({key:'value',key2:'value2'},function(value,key){
  // utilize the key->value relationship while looping
});

Individual Ajax data

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Utilizing an if-else statement within a forEach loop

Is there a way to customize the checkout page using JavaScript?

Directives for conditions if Internet Explorer is greater than or equal to 9, or if it is not

Unresponsive Radio Buttons in HTML

Using the getElementById function in javascript to modify CSS properties

Unable to integrate any modules or components from bit.dev into my React application

"Enhancing user experience: Implementing back button functionality for webpages containing forms, search results, and Ajax features

Calculator app with Next.js: Using keyboard input resets the current number state in real-time

Update data dynamically on a div element using AngularJS controller and ng-repeat

The requested resource has No Access-Control-Allow-Origin for the XMLHttpRequest

Using Javascript to populate textboxes with the value of checkboxes

Unable to implement new ecmascript decorators within typescript version 2.4.2

Animating Text Changes with JavaScript and jQuery

I am receiving an error stating "Page not found" when making an AJAX request. What could be causing

Retrieve data from a MySQL database with multiple values stored in a single row

jquery codeigniter is throwing an error 501, stating that the method is not implemented

Having issues with my CodePen React code and its ability to display my gradient background

Encountering a Typescript error while attempting to remove an event that has a FormEvent type

Adjust the position of elements based on their individual size and current position

Prevent repeating the same table header multiple times when generated dynamically with jQuery