phpjqueryajaxfilterserializearray

How to submit especific group of form inputs using ajax


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).


Solution

  • 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(),
            // ...
        });
    });