CODEWITHSUNDEEP
javascriptjqueryajax
user9437856
user9437856

Reputation: 2388

Ajax response displaying multiple times on every click

I have two dropdowns and I am displaying first dynamically by clicking on the Add More button and second, it will call the ajax and display. I mean When I click on the Add more button then it will also call the Ajax and get the output and it will display the second dropdown. This is also working.

But I am getting one issue. Now the issue is, When I click the first time on the Add more button then it will call the ajax and display the dropdown. When I click on the second time the I am getting two dropdowns from ajax. When I click on the third time the I am getting three dropdowns from ajax and it continues repeating Like below image. I have to display only one dropdown which will come from the ajax. I shared my script code below.

enter image description here

 $(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getname",
    //data: {},
    dataType: 'json',

    success: function(response) {

      addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
      $.each(response, function(key, data) {
        addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
        //rm_details.push(addrm);
      });
      addrm += '</select>';
    }
  });
    var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length+2;
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      numberIncr++;
      $(".medication_info").append('<input type="text" name="pp_order'+numberIncr+'" value="'+c+'-' + inner(innercoutner, 2) + '" class="form-control event_stop dynamicVal"><select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select>' + addrm);
    }
    count++;

  });
});

Upvotes: 1

Views: 168

Answers (1)

Barmar
Barmar

Reputation: 780724

Make addrm a local variable, so it doesn't remember the content from the previous call.

And the code at the bottom that appends to .medication_info needs to be inside the success: function.

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs

  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    $.ajax({
      type: "POST",
      url: "/access_control/getname",
      //data: {},
      dataType: 'json',

      success: function(response) {

        var addrm = '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
        $.each(response, function(key, data) {
          addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
          //rm_details.push(addrm);
        });
        addrm += '</select>';
        //Check maximum number of input fields
        if (x < maxField) {
          x++; //Increment field counter
          numberIncr++;
          $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select>' + addrm);
        }
        count++
      }

    });
  });
});

There's also no need for async: false.

Upvotes: 1

Related Questions