dimanche 2 septembre 2018

I need to dynamically fill the dropdown through laravel using JSON files with Javascript

I need to dynamically fill the dropdown through laravel using JSON files with Javascript, the state and city shows them without problem, although I have the problems with the select that I can not return the value of the suburb object, what returns is an arrangement of suburbs, although at the moment I am not passing on the arrangement itself, but only what the suburb object returns. But in theory I should return a position to fill my select.

This is my javascript and html code.

<div class="form-group">
            <label for="state">* Estate/ Region: </label><br>
            {!! Form::text('State', $product->State, ['class' => 'form-control', 'id' => 'State',]) !!}
        </div>

        <div class="form-group">
            <label for="city">* City: </label><br>
            {!! Form::text('borough', $product->borough, ['class' => 'form-control', 'id' => 'City']) !!}
        </div>

         <div class="form-group">
            <label for="Suburb">* Suburb: </label><br>
            {!! Form::select('suburb', array('key' => 'value'), 'default', ['class' => 'form-control', 'id' => 'Suburbs']) !!}
         </div>  


<script>
function init()
{
    var cp=document.getElementById("cp").value;
     jQuery.ajax({
      type: 'GET',
      async: false ,
      url: 'https://...'+cp,
      dataType: 'json',
      success: function (data) {
        console.log(data);
        var obj = jQuery.parseJSON(JSON.stringify(data));
        var cp = obj['cp'];
        var state= obj['state'];
        var city= obj['city'];
        var suburb= obj['suburbs'];
        document.getElementById('cp').value  = cp;
        document.getElementById('state').value  = state;
        document.getElementById('city').value  = city;
        document.getElementById('Suburbs').value  = suburb;
      },
      error : function(x, e) {
          alert('server error occoured');
          if(x.status==0){ alert('0 error'); 
          }else if(x.status==404){ alert('404 error'); 
          }else if(x.status==500){ alert('500 error'); 
          }else if(e=='parsererror'){ alert('Error.nParsing JSON Request failed.'); 
          }else if(e=='timeout'){ alert('Time out.'); 
          }else { alert(x.responseText); }
        }
    });
}


This is the JSON file

{"cp":"00000","city":"xxx","state":"xxx","suburbs":["xxx","xxx"]}



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire