mercredi 11 mars 2020

How can I make dependant dropdown list mantain their values after validation fail? - Laravel - JavaScript

I've trying to document my self in order to solve my problem on my own but can't find any similar scenario. once again I apologize in advance for my level of English (not my first language).

Context: I'm working on laravel 5.5 and i have in this particular view a form that works with several drop down list to manage user university info such as country of university, university, sub hierarchy (campus, clinical hospital, etc) and faculties.

Problem: When validation fails the page is reloaded properly with every field prompted, but the rest of the ddlist appears unselected.

evidence before submit

evidence after submit

My declaration for the root DDlist that start initialiced

<div class='form-group'>
    <label></label>
    <select id="CHU" name="CHU" class="form-control select2" style="width: 100%">
        <option value=""></option>
        <option value="NEW"> + </option> 
        @foreach($country as $c)
            <option value=""  title=""></option>
        @endforeach
    </select>
    <span class="help-block">
        <strong></strong>
    </span>
</div>     

Declaration of the next ddlist:

<div class="form-group">
    <label></label><br>
    <select id="HU" name="HU"class="form-control select2" style="width: 100%">
        <option value=""></option>
    </select>
    <span class="help-block">
        <strong></strong>
    </span>                        
</div>

This fields are secuentialy dependant so i can't start this view with all ddlist filled, so i started them all empty except for country of university and when some option is selected i use this code to fill the next one.

//CHU as Country Home University
//HU as Home University
$('#CHU').on('change', function(e){
    e.preventDefault();
    var u_iso = $(this).val()
    var u_name = $("#CHU option:selected").text();               
    if($.trim(u_iso) != '' && u_iso != "NEW" ){
        $.get('/universities',{u_iso:u_iso}, function (data){
            if(data.uni[0] == ""){
                // omited to share clean code
            }else{
                $('#HU').empty();
                $('#HU').append("<option value=''></option>");
                $('#HU').append("<option value='NEW'> + </option>");
                $.each(data.uni, function (index, value){
                    $('#HU').append("<option value='"+index+"'>"+value+"</option>");
                })
                //here i manage the rest of the ddlist secuence reset and placeholders
            }            
        })
    }
});

What I've tryed:

  • I've reworked the controller validation using return('view')->withInput(); after validators fail.
  • I've try to add in the dynamic filling section described above.
  • I've read many forums/sites related looking for similar problem but nothing usefull yet.

Hope this contains all the relevant information for beein understandable, any help/tip will be appreciated. Thanks in advance!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire