I am new to AJAX and am trying to learn basic calls through AJAX and jQuery. I have a simple drop-down list of countries in which I want to select a specific country and send its value to the server, where it will process, which country has been selected, and produce a certain result. I fill out the drop-down list from the database, I would like to know how to get the current value of the list, in my code only the first value is sent to the server.

<div class="dropdown-menu"> {{ range .}} <button type="submit" id="ajax_btn" class="dropdown-item" value="Submit">{{ .Title}}</button> {{ end }} </div> <script type="text/javascript"> $(document).ready(function () { $("#ajax_btn").on('click',function () { button = this.value; var el = document.getElementById("ajax_btn").innerHTML; if (button == "Submit"){ $.ajax({ url:"receive", type: "POST", data: {button: el}, success: function(results) { console.log(results) $('#response').html(results); } }); } });

});

    1 answer 1

    The problem is not AJAX, but that you use the ID $("#ajax_btn") selector $("#ajax_btn") . Since valid HTML can only have one ID instance per page - jQuery returns the first match. Accordingly, the event is hung only on the first button. Use the class selector (: