Show phone code of a country selected in dropdown Laravel

Question

I'm trying to show the phone code based on the country selected. Like when you try to register and while choosing a country the phone code changes at the same time.

here's my code.

<select class="form-control" name="country_id" required>
        <option value selected disabled>Select Country</option>
        @foreach ($countries as $country)
            <option value="{{ $country->id }}" id="shop-country">{{ $country->name }}</option>
        @endforeach
    </select>

    <div class="form-group">
        <label>Phone Number</label>
            @foreach ($countries as $country)
                <span id="phonecode">{{ $country->phonecode }}</span>
            @endforeach
    </div>

Best use javascript to achieve this. For eg: set a phonecode attribute in the select option and listen to onchange event to display phonecode.. — user3532758, Jul 24 '20 at 02:17
thanks for replying! should I use onchange="document.getElementById('phonecode').innertext()" ? — AlphaChino, Jul 24 '20 at 02:23
no, listen to change in country list. Change your select `option` to include a new attribute called `phonecode`: ` — user3532758, Jul 24 '20 at 02:30
it just shows the last item. here's what I did; {{ $country->phonecode }} — AlphaChino, Jul 24 '20 at 02:47
Where can I find a phone prefixes seeder that is compatible with **[this countries seeder](https://www.itsolutionstuff.com/post/how-to-add-country-list-in-laravelexample.html)** ? I want to do the same. Thanks! — Razvan Zamfir, Jan 20 '22 at 13:14

score 1 · Accepted Answer · answered Jul 24 '20 at 03:56

First, you need to populate the select options with a custom attribute, for example, phonecode

<select id="countryList" class="form-control" name="country_id" required>    
 @foreach ($countries as $country)
    <option phonecode="{{ $country->phonecode }}" 
            value="{{ $country->id }}" 
            id="shop-country">{{ $country->name }}
   </option>
 @endforeach
</select>

Remove foreach loop from pone code text.

<div class="form-group">
  <label>Phone Number</label>
  <span id="phonecode"></span>
</div>

Now, use Javascript to listen to change events on the select list.

<script>
 let countryList = document.getElementById("countryList") //select list with id countryList
 let phoneCode = document.getElementById('phonecode') //span with id phonecode

 countryList.addEventListener('change', function(){
  phoneCode.textContent = this.options[this.selectedIndex].getAttribute("phonecode");
 });
</script>

Show phone code of a country selected in dropdown Laravel

1 Answers1