Question posted in
You can find the official documentation here.

AJAX Data with Dynamic form fields name – Jquery ajax

Hello how can can make my ajax data call to be dynamic, I tried this

var opt_name = $(".NAME").data('opt_name');
    var opt_business = $(".BUSINESS").data('opt_business');
    var opt_phone = $(".PHONE").data('opt_phone');
    var opt_email = $(".EMAIL").data('opt_email');
    var opt_unique_name=$(".UNIQUE_NAME").data('opt_unique_name');
    
    var opt_name_val = $(".NAME")[key].value;
    var opt_business_val = $(".BUSINESS")[key].value;
    var opt_phone_val = $(".PHONE")[key].value;
    var opt_email_val = $(".EMAIL")[key].value;
    var opt_u_val = $(".U_VAL").data('opt_u_val');
    var opt_userid_val = $(".USER_ID_VAL").data('opt_user_id_val');
    var dataString = {'u': opt_u_val,
            'id': opt_userid_val,
            opt_email: opt_email_val,
            opt_name : opt_name_val,
            opt_phone : opt_phone_val,
            opt_business : opt_business_val,
            opt_unique_name : ''};
    $.ajax({
        type: 'post',
        url: 'https://vative.us15.list-manage.com/subscribe/post',
      
        dataType: "json",
      data: dataString, // should be the same as below
      // data: {
        //     'u': '559dd913b49efd5f5515155bb',
        //     'id': '0985c209f3',
        //     'MERGE0': opt_email_val,
        //     'NAME' : 'Test 3',
        //     'PHONE' : '829121',
        //     'BUSINESS' : 'hskslas',
        //     'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
        // },
        success: function(data) {
            console.log('Submitted');
        },
        
        error: function(data){
            console.log('Error');
          console.log(dataString);
        }
    });
}
 

});

I just want to get the field name since this field names always changes depending on the database or from embedded form.

The problem on my above code is that this will work.

data: {
             'u': '559dd913b49efd5f5515155bb',
             'id': '0985c209f3',
             'MERGE0': opt_email_val,
             'NAME' : 'Test 3',
             'PHONE' : '829121',
             'BUSINESS' : 'hskslas',
             'b_559dd913b49efd5f5515155bb_0985c209f3' : ''
         },

but not this

 data: {'u': opt_u_val,
            'id': opt_userid_val,
            opt_email: opt_email_val,
            opt_name : opt_name_val,
            opt_phone : opt_phone_val,
            opt_business : opt_business_val,
            opt_unique_name : ''};
Tags:

2

Answers


  1. 0

    It sounds like your goal is to have dynamic keys in your data object?

    The reason your example isn’t working is that instantiating an object uses the literal value of the keys (so basically a string), whereas what you want is the string value of the variable in the scope.

    It’s a bit messy to do, but I can think of two possibilities:

    data = {};
data[opt_email] = opt_email_val;
data[opt_phone] = opt_phone_val;
// and so on for each dynamic key to value

    Alternatively the following may work (after transpilation depending on your targets), though I have not tried it:

    data = {
`${opt_email}`: opt_email_val,
`${opt_phone}`: opt_phone_val,
// and so forth
};

    This second example works using the Template literal syntax which will take the value of the variable and expand it into the string.

    Login or Signup to reply.
  2. 0

    In order to generate dynamic keys inside your object, there is a very clean approach in the new ES2015 standard for JavaScript (formerly called ES6).

    The syntax is the following:

    var obj = {
  [myKey]: value,
}

    So your code would look like this:

    data: {'u': opt_u_val,
    'id': opt_userid_val,
    [opt_email]: opt_email_val,
    [opt_name]: opt_name_val,
    [opt_phone]: opt_phone_val,
    [opt_business]: opt_business_val,
    [opt_unique_name]: ''
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search