Combine alternative array with query array php/jquery

Question

My doubt is the following: I have this code jquery where I capture all the questions of a proof and just below the alternatives of it; but I can’t relate the alternatives to the questions, someone can help me, I’ve tried everything I think.

follows html

<form action="" method="post">
<li><textarea name="quest[]" placeholder="Digite seu texto aqui." required=""></textarea>
<input type="text" id="quest1" name="alternativa[]" value="a)" required="">
<input type="text" id="quest1" name="alternativa[]" value="b)" required=""></li>

<li><textarea name="quest[]" placeholder="Digite seu texto aqui." required=""></textarea>
<input type="text" id="quest2" name="alternativa[]" value="a)" required="">
<input type="text" id="quest2" name="alternativa[]" value="b)" required="">
<input type="text" id="quest2" name="alternativa[]" value="c)" required=""></li></form>

$("body").on('click', 'button[name="enviaProva"]', function (e) {
    e.preventDefault();
    var textarea = [];        
    var input = [];


    $('textarea[name="quest[]"]').each(function () {
        textarea.push($(this).val());
        $(this).parent().children('input[name="alternativa[]"]').each(function () {
            input.push($(this).val());
        });
    });

    $.ajax({
        type: 'POST',
        url: '/enviaProva.php',
        dataType: "json",
        data: {questao: textarea, alternativa: input},
        success: function (res) {

        }
    });
});

the expected result in php would be:

$questao = isset($_POST['questao']) ? $_POST['questao'] : "";
$alternativa = isset($_POST['alternativa']) ? $_POST['alternativa'] : "";

if I give a var_dump in $questao returns me:

array(2) {[0]=> string(12) "primeira questao" [1]=> string(12) "segunda questao"}

in the alternative $returns me:

array(5) { [0]=> string(2) "a)" [1]=> string(2) "b)" [2]=> string(2) "a)" [3]=> string(2) "b)" [4]=> string(2) "c)" } 

and the alternatives of the first question are "a)" and "b)". And the second question is "a)", "b)" and "C)"

I’m not able to relate the two arrays inside php.

Answer 1

You can create an array where each question is an object with the format

{
  pergunta: 'texto',
  alternativas: [
    'altern 1',
    'altern x'
  ]
}

You can get it like this:

$("body").on('click', 'button[name="enviaProva"]', function(e) {
  e.preventDefault();
  const perguntas = $('textarea[name="quest[]"]').get().map(function(el) {
    const alternativas = $(el)
      .parent()
      .children('input[name="alternativa[]"]')
      .get()
      .map(function(input) {
        return input.value;
      });

    return {
      pergunta: el.value,
      alternativas: alternativas
    };
  });
  
  console.log(JSON.stringify(perguntas));

  $.ajax({
    type: 'POST',
    url: '/enviaProva.php',
    dataType: "json",
    data: perguntas,
    success: function(res) {
      console.log(res);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <li><textarea name="quest[]" placeholder="Digite seu texto aqui." required=""></textarea>
    <input type="text" id="quest1" name="alternativa[]" value="a)" required="">
    <input type="text" id="quest1" name="alternativa[]" value="b)" required=""></li>

  <li><textarea name="quest[]" placeholder="Digite seu texto aqui." required=""></textarea>
    <input type="text" id="quest2" name="alternativa[]" value="a)" required="">
    <input type="text" id="quest2" name="alternativa[]" value="b)" required="">
    <input type="text" id="quest2" name="alternativa[]" value="c)" required=""></li>
</form>
<button name="enviaProva">Enviar</button>

Answer 2

Hello thanks to the staff for the help in particular to the moderator Sergio I managed to pass everything to PHP, both the questions, and the alternatives and was like this:

    $("body").on('click', 'button[name="enviaProva"]', function (e) {
    e.preventDefault();
    var textarea = [];

    var perguntas = $('textarea[name="quest[]"]').get().map(function (el) {
        var alternativas = $(el)
                .parent()
                .children('input[name="alternativa[]"]')
                .get()
                .map(function (input) {
                    return input.value;
                });
        return {
            perguntas: el.value,
            alternativas: alternativas
        };
    });

    $.ajax({
        type: 'POST',
        url: '/enviaProva.php',
        dataType: "json",
        data: {perguntas: perguntas},
        success: function (res) {
            console.log(res);
        }
    });
});

This way I recover the data in PHP:

$questao = isset($_POST['perguntas']) ? $_POST['perguntas'] : "";
var_dump($questao);

and return me the values:

    array(2) {
  ["perguntas"]=>
  string(8) "primeira"
  ["alternativas"]=>
  array(2) {
    [0]=>
    string(2) "a)"
    [1]=>
    string(2) "b)"
  }
}
array(2) {
  ["perguntas"]=>
  string(7) "segunda"
  ["alternativas"]=>
  array(3) {
    [0]=>
    string(2) "a)"
    [1]=>
    string(2) "b)"
    [2]=>
    string(2) "c)"
  }
}

now as I do the insertion in the database, using the foreach it returns me a new array, as would be the insertion in the database in this case?