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?

Do the array in your selects and get values only, then you can post them to controller by ajax. name="ingredient[]" this pass array of selected options to controller by ajax, there you can do whatever you need to do. Ps: you don't really need to loop trough your JavaScript. — mafortis
but I wont be able to show all the selected ingredients on the page? — AirwaveQ
See here is the trick, you get your ingredient from controller indredients::all(); and you loop the way you do right now the difference is in blade for the name of select you will use [] and if you want ability of multiple select just add multiple="multiple" to that select (this part solve your ingredient issue) to pass results of selected options you make new function with post route and send results of your select option by ajax to that function. Then do what you need there... — mafortis

Behnam Azimi Behnam Azimi · Accepted Answer · 2018-05-19T12:41:13

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.

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

1 Answers