CODEWITHSUNDEEP
javascripthtml
John
John

Reputation: 952

JavaScript deletes the text in my textbox

I have multiple buttons with the rel attribute. I called them rel1, rel2 etc.

The rels contains data, that I retrieve with Javascript.

When I click on the button the button needs to send run a second JavaScript. The second JavaScript sends the rel to a textbox.

So far the script is working. But when I click on the button for the second rel the first textbox, that is filled with the data of rel1 gets empty.

Does someone know what the problem is and how I can solve it?

Here is the script for button1:

<script type="text/javascript">
  $( document ).ready(function() {
    $('#grid1').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response1.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ {
        "targets": 6,
        "render": function ( data, type, full, meta ) {
          return  '<button type="button" id="product_select1" rel1="'+data+'" onclick="getProduct1()">Button</button>';
        }
      } ]              
    });   
  });
</script>

This scripts sends the data to the textbox:

<script type="text/javascript">
  $('body').on('click', '.selectClass', function () {
    var product_txt1         = $(this).attr('rel1');

    $("#product_txt1").val(product_txt1);
    modal1.style.display = "none";

  });     
</script>

Maybe its neccesary. Here is my second script:

<script type="text/javascript">
  $( document ).ready(function() {
    $('#grid2').DataTable({
      "bprocessing": true,
      "serverSide": true,
      "ajax": {
        "url": "response2.php",
        "type": "POST",
        "error": function(){
          $("#employee_grid_processing").css("display","none");
        }
      },
      "columnDefs": [ {
        "targets": 6,
        "render": function ( data, type, full, meta ) {
          return  '<button type="button" id="product_select1" rel2="'+data+'" onclick="getProduct2()">Button</button>';
        }
      } ]              
    });   
  });
</script>

<script type="text/javascript">
  $('body').on('click', '.selectClass', function () {
    var product_txt2         = $(this).attr('rel2');

    $("#product_txt2").val(product_txt2);
    modal2.style.display = "none";

  });     
</script>

Upvotes: 1

Views: 49

Answers (1)

Duannx
Duannx

Reputation: 8726

The problem is when you click one button, it triggle all click function. Because you handle click function by class. You need to specify your buttons by unique ID and handle click function by that ID. Either you can merge your click function like that:

$('body').on('click', '.selectClass', function () {
    var product_txt1         = $(this).attr('rel1');
    var product_txt2         = $(this).attr('rel2');
    if(product_txt1 != null && product_txt1 != undefined){
        $("#product_txt1").val(product_txt1);
        modal1.style.display = "none";
    }
    if(product_txt2 != null && product_txt2 != undefined){
        $("#product_txt2").val(product_txt2);
        modal2.style.display = "none";
    }

  });

Upvotes: 1

Related Questions