How to pass 2 javascript arrays from laravel view to laravel controller?

Question

so I want to make cooking recipes search system. User can select ingredients, which should be in the recipe and also he can choose ingredients, which should not be in the recipe. I have 2 dropdown menus, in which user chooses the ingredient, and it is being shown on the screen by javascript. So after user chooses all ingredients, he presses "search" and my controller should receive all the chosen ingredients and unwanted ingredients, so I can make query. Here's my view:

@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

How can I pass those 2 arrays to my controller and make query from it?

Answer 1

You can use hidden input for each array and update values when you add items to arrays. and separate each value with a separator. I mean you can have two text input like this:

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

and update those values like this:

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

and do it for array2 too.

And in your back-end you can use $array1 = explode('-', $array1); to convert your text data to array.