Kanchan186
6 months ago
641
2
Laravel

how to set validation on dynamic dependent dropdown

Posted 6 months ago by Kanchan186

when i select industry dropdown then shows validation to segment dropdown

view

 <form class="m-t-40" method="post" action="{{url('/')}}/brand" enctype="multipart/form-data" novalidate>
                                    {{csrf_field()}}

                                    <div class="form-group">
                                    <h5>Industry Name <span class="text-danger">*</span></h5>
                                        
                                        <div class="controls">
                                            
                                             <select class="form-control" name="industry_id" onchange="getSegment(this.value)" required data-validation-required-message="This field is required">
                                            
                                            <option>--Select Industry--</option>
                                            @foreach($industry as $br)
                                            <option value="{{$br->industry_id}}">{{$br->industry_name}}</option>
                                            @endforeach
                                        </select>

                                        </div>
                                       
                                    </div>
                                    

                                    

                                    <div class="form-group">
                                        <h5>Segment Name <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            
                                             <select class="form-control" name="segment_id" id="segment_id" required data-validation-required-message="This field is required">
                                                <option>--Select Segment--</option>
                                           
                                        </select>

                                        </div>
                                       
                                    </div>

                                      <div class="form-group">
                                        <h5>Brand Name <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            <input type="text" name="brand_name" id ="brand_name" class="form-control" required data-validation-required-message="This field is required"> </div>
                                       
                                    </div>
                                     <div class="form-group">
                                        <h5>Brand Logo <span class="text-danger">*</span></h5>
                                        <div class="controls">
                                            <input type="file" name="brand_logo" id ="brand_logo" class="form-control" required data-validation-required-message="This field is required"> </div>
                                       
                                    </div>
                                    
                                            <div class="text-xs-right">
                                                <button type="submit" class="btn btn-info">Submit</button>
                                                <button type="reset" class="btn btn-inverse">Cancel</button>
                                            </div>
                                </form>

script

<script type="text/javascript">


  function getSegment(industry)
    {
       if(industry) {
                $.ajax({
                    url: '{{url('/')}}/segment/ajax/'+industry,
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                    console.log(data)
                        $('select[name="segment_id"]').empty();
                        $('select[name="segment_id"]').prepend('<option value="">--Select Segment--</option>');
                        $.each(data, function(key, value) {
                            $('select[name="segment_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });

                    }
                });
            } else{
                 $('select[name="segment_id"]').empty();
            }
    }
   
</script>

Please sign in or create an account to participate in this conversation.