Как отобразить данные после того, как пользователь щелкнет опцию из выпадающего списка? - PullRequest
Новая
       29

Как отобразить данные после того, как пользователь щелкнет опцию из выпадающего списка?

2 голосов
/ 26 марта 2019

Я хочу показать данные после того, как пользователь выбрал проект.

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

это моя форма.blade.php 

@extends('layouts.master')

@section('style')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    .box{
        width:600px;
        margin:0 auto;
        border:1[x solid #ccc;]
    }
</style>

@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Add Prospect</div>
                <form action="{{ url('/add/outlet') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="form-group">
                        <select name="project_name" id="project" class="form-control input-lg dynamic" data-dependent="product">
                            <option value="">Select Project</option>
                            @foreach($project_list as $project)
                                <option value="{{$project->project}}"> {{$project->project}} </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <select name="product_name" id="product" class="form-control input-lg">
                            <option value="">Select Product</option>
                            <option value="HelloBill Retail">HelloBill Retail</option>
                            <option value="HelloBill FNB">HelloBill FNB</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <select name="period" id="period" class="form-control input-lg">
                            <option value="">Select Period</option>
                            <option value="Bulanan">Bulanan</option>
                            <option value="Tahunan">Tahunan</option>
                        </select>
                    </div>



                    <div class="form-group row">
                            <label for="outlet" class="col-md-4 col-form-label text-md-left">Outlet</label>

                            <div class="col-md-8">
                                <input id="outlet" type="text" class="form-control{{ $errors->has('outlet') ? ' is-invalid' : '' }}" name="outlet" value="{{ old('outlet') }}" required autofocus>

                                @if ($errors->has('outlet'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('outlet') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="alamat" class="col-md-4 col-form-label text-md-left">Alamat</label>

                            <div class="col-md-8">
                                <input id="addressLine1" type="text" class="form-control{{ $errors->has('addressLine1') ? ' is-invalid' : '' }}" name="addressLine1" value="{{ old('addressLine1') }}" placeholder="Address Line #1" required autofocus>

                                @if ($errors->has('addressLine1'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('addressLine1') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="addressLine2" type="text" class="form-control" name="addressLine2" value="{{ old('addressLine2') }}" placeholder="Address Line #2" required autofocus>

                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kelurahan" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kelurahan" type="text" class="form-control{{ $errors->has('kelurahan') ? ' is-invalid' : '' }}" name="kelurahan" value="{{ old('kelurahan') }}" placeholder="Kelurahan" required autofocus>

                                @if ($errors->has('kelurahan'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kelurahan') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kecamatan" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kecamatan" type="text" class="form-control{{ $errors->has('kecamatan') ? ' is-invalid' : '' }}" name="kecamatan" value="{{ old('kecamatan') }}" placeholder="Kecamatan" required autofocus>

                                @if ($errors->has('kecamatan'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kecamatan') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="kota" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="kota" type="text" class="form-control{{ $errors->has('kota') ? ' is-invalid' : '' }}" name="kota" value="{{ old('kota') }}" placeholder="Kota"  required autofocus>

                                @if ($errors->has('kota'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('kota') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="provinsi" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="provinsi" type="text" class="form-control{{ $errors->has('provinsi') ? ' is-invalid' : '' }}" name="provinsi" value="{{ old('provinsi') }}" placeholder="Provinsi" required autofocus>

                                @if ($errors->has('provinsi'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('provinsi') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="zipCode" class="col-md-4 col-form-label text-md-left"></label>

                            <div class="col-md-8">
                                <input id="zipCode" type="text" class="form-control{{ $errors->has('zipCode') ? ' is-invalid' : '' }}" name="zipCode" value="{{ old('zipCode') }}" placeholder="Kode Pos" required autofocus>

                                @if ($errors->has('zipCode'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('zipCode') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="PIC" class="col-md-4 col-form-label text-md-left">PIC</label>

                            <div class="col-md-8">
                                <input id="PIC" type="text" class="form-control{{ $errors->has('PIC') ? ' is-invalid' : '' }}" name="PIC" value="{{ old('PIC') }}" required autofocus>

                                @if ($errors->has('PIC'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('PIC') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-left">Email</label>

                            <div class="col-md-8">
                                <input id="email" type="text" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                    </div>

                    <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Add
                                </button>
                            </div>
                    </div>


                    @if($errors->any())
                        <div class="category-msg-error">{{ $errors->first() }}</div>
                    @endif

                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('extra')
<script>
$(document).ready(function(){
    $('.dynamic').change(function(){
        if($(this).val()!=''){
            var select = $(this).attr("id");
            var value = $(this).val();
            var dependent = $(this).data('dependent');
            var __token = $('input[name=_token"]').val();
            $.ajax({
                url:"{{route('dynamicdependent.fetch')}}",
                method:"POST",
                data:{select:select, value:value, _token:_token,
                dependent=dependent},
                success:function(result){
                    $('#+dependent').html(result);
                }
            })
        }
    });
});
</script>
@endsection

пожалуйста, помогите.и я тоже новичок в Laravel

1 Ответ

4 голосов
/ 26 марта 2019

Есть две ошибки: -

  1. В данных запроса ajax вы устанавливаете dependent=dependent, которое должно быть dependent: dependent.
  2. В ответе на успех вы устанавливаете это $('#+dependent').html(result); но это не правильно.Это должно быть $('#'+dependent).html(result);

Ниже приведен полный код jQuery: 

<script>
$(document).ready(function(){
    $('.dynamic').change(function(){
        if($(this).val()!=''){
            var select = $(this).attr("id");
            var value = $(this).val();
            var dependent = $(this).data('dependent');
            var __token = $('input[name=_token"]').val();
            $.ajax({
                url:"{{route('dynamicdependent.fetch')}}",
                method:"POST",
                data:{
                    select:select, 
                    value:value, 
                    _token:_token,
                    dependent:dependent
                },
                success:function(result){
                    $('#'+dependent).html(result);
                }
            });
        }
    });
});
</script>

Пожалуйста, проверьте и дайте мне знать, если это не поможет.Я постараюсь решить вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...