Как передать 2 массива JavaScript из вида Laravel в контроллер Laravel?

Question

поэтому хочу сделать поисковую систему рецептов приготовления.Пользователь может выбрать ингредиенты, которые должны быть в рецепте, а также он может выбрать ингредиенты, которых не должно быть в рецепте.У меня есть 2 выпадающих меню, в которых пользователь выбирает ингредиент, и он отображается на экране с помощью JavaScript.Поэтому после того, как пользователь выберет все ингредиенты, он нажимает «поиск», и мой контроллер должен получить все выбранные ингредиенты и нежелательные ингредиенты, чтобы я мог сделать запрос.Вот мой взгляд:

@extends('layouts.app')
<style>

</style>
@section('content')
<h5 align="center">Main Page</h5>
<br>
<div align="center">
<div style="display: inline-block;text-align: left;">

Choose ingredient
<br><br>
<select name="ingredient" id="ingredient" class="form control">
        <option value="0">Choose...</option>
        @foreach ($ingredients as $ingredient)
        <option value="{{ $ingredient->id }}">{{ $ingredient->name  }}</option>
        @endforeach
</select> 
<input type="button" id="button1" value="+ Add ingredient" onclick="addIngredient();"></input>
<br><br>
<div id="Chosen_ingredients"></div> 

   <br>
Choose ingredients, which should not be in the recipe
<br><br>
<select name="ingredient2" id="ingredient2" class="form control">
        <option value="0">Choose...</option>
        @foreach ($ingredients as $ingredient)
        <option value='{{ $ingredient->id }}'>{{ $ingredient->name  }}</option>
        @endforeach
</select> 
<input type="button" id="button2" value="+ Add ingredient" onclick="addUnwantedIngredient();"></input>
<br><br>
<div id="Unwanted_ingredients"></div>

<button class="btn btn-primary" onclick="location.href='{{ url('foundrecipes') }}'">Search</button>


<script>

var x = 1;
var array = Array();
var ing = Array();

function addIngredient()
{
 array[x] = document.getElementById("ingredient").selectedIndex;

 if(array[x] > 0)
{
   ing[x] = $("select[name='ingredient'").find('option:selected').text();

    x++;
    var e = "";   

   for (var y=1; y<array.length; y++)
   {
     e += y + " . " + " " + ing[y] + "<br/>";
   }
   document.getElementById("Chosen_ingredients").innerHTML = e + "<br/>";
   return array;
}
else
{
   alert('Choose ingredient from the list');
}

}

var z = 1;
var array2 = Array();
var ing2 = Array();

function addUnwantedIngredient()
{
 array2[z] = document.getElementById("ingredient2").selectedIndex;

 if(array2[z] > 0)
{
   ing2[z] = $("select[name='ingredient2'").find('option:selected').text();

    z++;
    var e = "";   

   for (var y=1; y<array2.length; y++)
   {
     e += y + " . " + " " + ing2[y] + "<br/>";
   }
   document.getElementById("Unwanted_ingredients").innerHTML = e + "<br/>";
   return array2;
}
else
{
   alert('Choose ingredients from the list');
}


}

</script>

</div>
@endsection

Как я могу передать эти 2 массива на мой контроллер и сделать запрос из него?

Answer 1

Вы можете использовать скрытый ввод для каждого массива и обновлять значения при добавлении элементов в массивы.и отделить каждое значение разделителем.Я имею в виду, что вы можете ввести два текстовых ввода, например:

<input type="hidden" name="array1" id="array1" /> <input type="hidden" name="array2" id="array2" />

и обновить эти значения следующим образом:

$('#ingredient').on('change',function () {
   array1.push($(this).val())
   $('#array1').val(array1.join('-')); "-" is your seperator
});

и сделать это для массива 2.

А в своем бэкэнде вы можете использовать $array1 = explode('-', $array1); для преобразования ваших текстовых данных в массив.