Dynamically pass in values to the data object

Question

Currently, I get the value of an id and pass it in my data object to be sent to the server.

const field_value = $('#id_field').val();
const scores_value = $('#id_scores').val();
$.ajax({
    data: {'Fields':field_value, 'Scores': scores_value},
});

I want to achieve this dynamically in case I add more forms so it can automatically update without me having to change any code.

I tried using the jquery each method to access the class.

$(".class").each(function() {
    const get_updated_value = $(this).val();
});

This dynamically gets the values, but I am having trouble passing the returned values to the data object.

user_15377355 · Answer

If each element with '.class' has still an own id you could take these id's as the keys of the data object:

var updated_values = {};

$(".class").each(function() {
    updated_values[$(this).attr('id')] = $(this).val();
});

$.ajax({
    data: updated_values,
});

Working example:

function update() {
    var updated_values = {};
  
    $(".input").each(function() {
        updated_values[$(this).attr('id')] = $(this).val();
    });
  
    console.log(updated_values);
}

input {
    display: block;
}

Dynamically pass in values to the data object

1 Answers