使用AJAX选择框

时间:2017-08-28 10:44:32

标签: ajax laravel-5.3

我有一个选择表单,它有三个字段,Location,Estate和Size,使用ajax动态填充。

当用户选择城镇时,将根据所选城镇显示房地产下拉选项。

当用户点击搜索按钮时,应显示基于选择的结果。

根据我的代码,当我在post方法中输入变量$ Estate和$ Size时,我得到用户在表单上选择的值。这就是我想要的。

然而,当我dd $ Location时,我得到了id号而不是用户在表单上选择的值。

这是我的表格:

<form class="form-inline" id="search-bar" action="{{route('post_index')}}" method="post">
{{ csrf_field() }}
    <select class="form-control productcategory" name="Location" id="product_cat_id">

        <option value="0" disabled="true" selected="true">Town</option>
         @foreach($cities as $city)
            <option value="{{$city->id}}">{{$city->product_cat_name}}</option>
         @endforeach
    </select>

    <select class="form-control productname" name="Estate">

        <option value="0" disabled="true" selected="true">Estate</option>
    </select>

    <select class="form-control" name="Size">
        <option value="0" disabled="true" selected="true">Size</option>
        <option value="Bedsitter">Bedsitter</option>
        <option value="One Bedroom">One Bedroom</option>
        <option value="Two Bedroom">Two Bedroom</option>
        <option value="Three Bedroom">Three Bedroom</option>
    </select>

    <button type="submit" class="btn btn-default">Search</button>
</form>

这是我的AJAX代码:

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '.productcategory', function(){
           //console.log("Shit is working");

           var new_id=$(this).val();
           //console.log(cat_id);
           var div=$(this).parent();

           var op=" ";

            $.ajax({
               type:'get',
               url:'{!!URL::to('findEstateName')!!}',
               data:{'id':new_id},
               success:function(data){
                    //console.log('success');
                    console.log(data);
                    //console.log(data.length);
                     op+='<option value="0" selected disabled>chose estate</option>';
                     for(var i=0;i<data.length;i++){
                     op+='<option value="'+data[i].Estate+'">'+data[i].Estate+'</option>';
                     }
                    div.find('.productname').html(" ");
                    div.find('.productname').append(op);

                },
               error:function(){

               }
            });
        });
        $(document).on('change','.productname',function (){
          var prod_id=$(this).val();

          var a=$(this).parent();
          console.log(prod_id);
          var op="";
        });
    });
</script>

这是我的帖子方法:

public function postIndex(){
        //echo "success";
            $Location = Input::get('Location');
        $Estate = Input::get('Estate');
        $Size = Input::get('Size');

        $validator= Validator::make(
                  array(
                        'Location'=>$Location,
                        'Estate'=>$Estate,
                        'Size'=>$Size
                        ),
                  array(
                        'Location'=>'required',
                        'Estate'=>'required',
                        'Size'=>'required'
                    )
                  );
            if ($validator->fails()) {
                return redirect()->route('home-index')->withErrors($validator);
                // echo "fail";

              }else{
                $houses=DB::table('houses')->where('Location', $Location)->where('Size', $Size)->where('Estate', $Estate)->get();
                dd($Location);
                //$towns = DB::table('houses')->pluck('Location', 'Location');
                //$estates = DB::table('houses')->pluck('Estate', 'Estate');
                $cities=ProductCat::all();

                $data = [
                   'house' => $houses,
                   //'towns' => $towns,
                   //'estates' => $estates,
                   'cities' => $cities
                ];
                //dd($data);
                if (count($houses)) {
                      return View('pages.home', $data);
                  }else{
                  Session::flash('fail', 'Sorry, no results found...');
                  return View('pages.home',$data, ['FailMessage' => 'Sorry no results found..'])->withHouse($houses);
                }
              }
    }

我需要做什么,以便当我点击$ Location时,我会获得用户选择的位置名称?

0 个答案:

没有答案