There are all areas:

<input list="region" class="form-control" name="region"> <datalist id="region" > <?php foreach ($regions as $region){ ?> <option value="<?php echo $region['name']?>" selected="selected"><?php echo $region['name']?></option> <?php } ?> </datalist>

They can be selected both from the drop-down list and through the search bar. Is it possible to make the data sent when choosing from the list? That is, clicked - dropped the list, chose a region, and the name of the region went to the server:

 $(document).ready(function() { $('.form-control').change(function() { var regionid = $("input[name='region']").val(); console.log(regionid); $.ajax({ type: 'POST', url: '/index.php?route=checkout/checkout/region', data:{ "region_id":regionid}, beforeSend: function() { $("#loader").css("display", "block"); $("#loader").animate({ opacity: 1 }, 500); }, success: function(data) { $('#div_city').html(data); } }).done(function(data) { $("#loader").animate({ opacity: 0 }, 500, function() { $("#loader").css("display", "none"); }); }); }); });

So go after the input closes. Chose, clicked on another input or on another place, and only then the data is sent. click fails - incorrect data is sent.

enter image description here

enter image description here

enter image description here

  • Since, in fact, it has nothing to do with PHP, instead of PHP code, it makes sense to insert a minimal (2-3 <option> -a) example of the final (displayed in the browser) HTML code. - Regent
  • Yes, it is necessary that whatever it was, I ask whether it is possible to do so, maybe it will not work. - Sender1050
  • Yes, after choosing from the drop down item. - Sender1050
  • What about typing the value into <input> manually? Simply, there is a simple option in which when you select an item, the request will leave immediately, however, in this case, and when typing each character, the request will leave. Do you like this option? - Regent
  • No, but you can’t do that. Impressed with a few letters did the name of the regions appear and when you clicked on the region, did it go to the server? - Sender1050

1 answer 1

To leave the request immediately when selecting an item from the list, input can be used instead of the change event.

And so that the request does not go away when you enter each character in <input> , you can check that the value of <input> same as the value of some <option> -a from <datalist> .

As a result, an example is obtained as follows:

 $(document).ready(function() { var regionIds = $("#region option").map(function() { return this.value; }).get(); $('.form-control').on("input", function() { var regionId = this.value; if (regionIds.indexOf(regionId) < 0) return; $.ajax({ type: 'POST', url: '/sendurl', data: { "region_id": regionId } }); }); }); 
 <input list="region" class="form-control" name="region"> <datalist id="region"> <option value="name1">name1</option> <option value="name2">name2</option> <option value="name3">name3</option> </datalist> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • Thanks for the help, everything works as it should - Sender1050