How to submit especific group of form inputs using ajax

Question

I have a huge form to submit (more than 1000 inputs in array - this is a problem for php +5.3 see max_input_vars limits) in php.

I don´t need to submit everything, only the group of modified inputs where the reference is a select input. I'm trying to use jQuery filter and serializeArray() to solve it, but it's not working. I have to use ajax to do it.

My form in a php loop with data from a DB

<form method="post" action="" id="resultado_trabalhos" name="resultado_trabalhos">

    <?php do { ?>
<select name="status_trabalho[]" id="status_trabalho<?php echo $row_listaTrabalhos['id_usuario']; ?>">
<option value="3" <?php if (!(strcmp(3, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>em avaliação</option>
<option value="4" <?php if (!(strcmp(4, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>oral</option>
<option value="5" <?php if (!(strcmp(5, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>poster</option>
<option value="6" <?php if (!(strcmp(6, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>não selecionado</option>
</select>

<textarea name="motivoDevolucao[]" id="motivoDevolucao<?php echo $row_listaTrabalhos['id_trabalho']; ?>" cols="100" rows="2" wrap="physical" style="display:none;">&nbsp;</textarea>

  <input type="hidden" id="id_autor<?php echo $row_listaTrabalhos['id_usuario']; ?>" name="id_autor[]" value="<?php echo $row_listaTrabalhos['id_usuario']; ?>" />
   <input type="hidden" id="token_trabalho<?php echo $row_listaTrabalhos['id_usuario']; ?>" name="token_trabalho[]" value="<?php echo $row_listaTrabalhos['token_submissao']; ?>" />
   <input type="hidden" id="marcadorStatus<?php echo $row_listaTrabalhos['id_usuario']; ?>" name="marcadorStatus[]" value="<?php echo $row_listaTrabalhos['status_trabalho']; ?>" />
   <input type="hidden" id="nome<?php echo $row_listaTrabalhos['id_usuario']; ?>" name="nome[]" value="<?php echo $row_listaTrabalhos['nome_usuario'] . " " . $row_listaTrabalhos['sobrenome_usuario']; ?>" />
   <input type="hidden" id="email_usuario<?php echo $row_listaTrabalhos['id_usuario']; ?>" name="email_usuario[]" value="<?php echo $row_listaTrabalhos['email_usuario']; ?>" />

    <?php } while ($row_listaTrabalhos = mysqli_fetch_assoc($listaTrabalhos)); ?>
  </form>

marcadorStatus[] it's my anchor to compare with the select input status_trabalho[].

I would like to serializeArray() with something like marcadorStatus[] != status_trabalho[]. So, if it's true, submit only the group of inputs with the same array index (id_autor[], nome[], email_usuario[] and so on).

Answer 1

I'm thinking you do not need the input elements to all have id values. If not, it is better to leave them off; It's less work for the browser.

Instead give them a class that groups them.

Now I don't program PHP, so you might have to consider this as pseudo-code:

<form method="post" action="" id="resultado_trabalhos" name="resultado_trabalhos">
<? $i = 0; ?>
<?php do { ?>
    <select class="group-<?php echo $i; ?>" name="status_trabalho[]" data-group-index="<?php echo $i; ?>">
        <option value="3" <?php if (!(strcmp(3, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>em avaliação</option>
        <option value="4" <?php if (!(strcmp(4, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>oral</option>
        <option value="5" <?php if (!(strcmp(5, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>poster</option>
        <option value="6" <?php if (!(strcmp(6, $row_listaTrabalhos['status_trabalho']))) {echo "selected=\"selected\"";} ?>>não selecionado</option>
    </select>

    <textarea class="group-<?php echo $i; ?>" name="motivoDevolucao[]" cols="100" rows="2" wrap="physical" style="display:none;">&nbsp;</textarea>

    <input type="hidden" class="group-<?php echo $i; ?>" name="id_autor[]" value="<?php echo $row_listaTrabalhos['id_usuario']; ?>" />
    <input type="hidden" class="group-<?php echo $i; ?>" name="token_trabalho[]" value="<?php echo $row_listaTrabalhos['token_submissao']; ?>" />
    <input type="hidden" class="group-<?php echo $i; ?>" name="marcadorStatus[]" value="<?php echo $row_listaTrabalhos['status_trabalho']; ?>" />
    <input type="hidden" class="group-<?php echo $i; ?>" name="nome[]" value="<?php echo $row_listaTrabalhos['nome_usuario'] . " " . $row_listaTrabalhos['sobrenome_usuario']; ?>" />
    <input type="hidden" class="group-<?php echo $i; ?>" name="email_usuario[]" value="<?php echo $row_listaTrabalhos['email_usuario']; ?>" />

    <? ++$i; ?>
<?php } while ($row_listaTrabalhos = mysqli_fetch_assoc($listaTrabalhos)); ?>
</form>

As for the ajax call, I think you want to use .serialize(), instead of .serializeArray().

$('#resultado_trabalhos').submit(function(e) {
    e.preventDefault();

    var $form = $(this);

    // This will hold the input elements to be submitted.
    var inputs = [];

    // Add any inputs that should always be submitted.
    inputs.push.apply(inputs, $form.find('.always-submit').get());

    // Loop through all the "status_trabalho[]" selects.
    $form.find('select[name="status_trabalho[]"]').each(function() {
        var $select = $(this);
        // Check if the select value was changed.
        if ($select.val() != $select.nextAll('input[name="marcadorStatus[]"]:first').val()) {
            // Push all the inputs from the group onto the "inputs" array.
            inputs.push.apply(inputs, $form.find('.group-' + $select.attr('data-group-index')).get());
        }
    });

    $.ajax({
        type: 'post',
        url: 'someUrl',
        data: $(inputs).serialize(),
        // ...
    });
});