簡體   English   中英

如何將2個JavaScript數組從laravel視圖傳遞到laravel控制器?

[英]How to pass 2 javascript arrays from laravel view to laravel controller?

所以我想做飯食譜搜索系統。 用戶可以選擇配方中應該包含的成分,也可以選擇配方中不應該包含的成分。 我有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

如何將這兩個數組傳遞給控制器​​並從中進行查詢?

您可以為每個數組使用隱藏的輸入,並在向數組添加項目時更新值。 並使用分隔符分隔每個值。 我的意思是您可以有兩個這樣的文本輸入:

<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
});

並為array2做。

在后端,您可以使用$array1 = explode('-', $array1); 將文本數據轉換為數組。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM