jquery how to make multiple ajax calls

Question

I am stuck on ajax, I have first select box, which list all countries for a sender, and I also have second select box which also list countries for a receiver. I use ajax to append the countries but the issue now is that, the second select box is not populated.

I call the country from my php function

public function country()
{
    return $this->countries->getCountries();
}

My route

 Route::get('/country', [ 'as' => 'customer.country', 'uses' => 'IndexController@country' ]);

my ajax now

$.ajax({
    type: "get",
    url: "/country",
    success: function (res) {
        if (res) {
            $.each(res,function(key,value){
                $("#country").append('<option value="'+value+'">'+value+'</option>');
            });
        }
    }
});

and My select box is as follow

For Sender:

    <div class="col col-md-6">
        <div class="form-group">
           <label  class="required">Receiver Country</label>
              <select id="country" class="form-control" required>
                  <option selected disabled>Select Country</option>
              </select>
         </div>
    </div>

Then for receiver:

<div class="col col-md-6">
        <div class="form-group">
           <label  class="required">Receiver Country</label>
              <select id="country" class="form-control" required>
                  <option selected disabled>Select Country</option>
              </select>
         </div>
    </div>

Now only the select box for sender always populated but the receiver will not. Pls how can I get the two select box populated using the ajax?.

UPDATED...pls check

`public function country() { return $this->countries->getCountries(); }` My route ` Route::get('/country', [ 'as' => 'customer.country', 'uses' => 'IndexController@country' ]);` — Uyo-obong Akpan, May 28 '20 at 08:35
and where do you call country()? Please update the QUESTION instead of posting code in the comments.. — mplungjan, May 28 '20 at 08:36
Where do you call the AJAX in the WEBPAGE? Not the server code — mplungjan, May 28 '20 at 08:37
You've used the same id for both `select` elements which is invalid. Change this to a class instead — Rory McCrossan, May 28 '20 at 08:40
@RoryMcCrossan Thanks...bad me...I did not remember that...I working now — Uyo-obong Akpan, May 28 '20 at 08:45

score 1 · Answer 1 · answered May 28 '20 at 08:39

you used the same id for the two Select, try something like that:

if (res) {
        $.each(res,function(key,value){
         $("#country_sender").append('<option value="'+value+'">'+value+'</option>');
         $("#country_receiver").append('<option value="'+value+'">'+value+'</option>');
        });
    }

jquery how to make multiple ajax calls

1 Answers1