CODEWITHSUNDEEP
javascriptphponchange
user_777
user_777

Reputation: 805

The result gets changed every where

This is my view please have a look :

<div class="form-group target" id="tools" >
  <div class="input-group">
    <div class="col-lg-6"> <select class="form-control" style="width: 100%" name="tool_id[]" id="toolss" onchange="tool(this)" required>
      <option value="">Select</option>

      </select></div>

    <div class="col-lg-3">  
      <input type="text" class="form-control" required name="quantity[]" id="quantity" placeholder="Quantity">
    </div>
    <div class="col-lg-3" id="avail">  
      <p class="available">0 available</p>
    </div>

    <span class="input-group-btn">
      <button type="button" class="btn btn-danger addel-delete"><i class="fa fa-remove"></i>
      </button>
    </span>
  </div>
</div>

This is my script :

function tool(sel)
{
  var tools=sel.value;

  alert(tools);

  var url='<?php echo base_url(); ?>admin/tool/ajax_available';
  $.post(url, {tools:tools}, function(data){  
    alert("Value: " + $(".available").html(data));
  });
}

The problem is whenever I goes on selecting values from the select box the corresponding value and all the previously selected values are becoming same. the image am showing here.

Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool1.PNG.

Upvotes: 1

Views: 50

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle.

Problem : When you use .available selector it will affect all the element with class available in your document.

Suggested solution :

The id should be unique in the same document so if you've multiple tools you should replace the id with a class for the valid structure :

<div class="form-group target tools">

Then you should refer to the current element in your selector, so use :

$(sel).closest('.tools').find('.available').html(data);

Hope this helps.

Upvotes: 1

Related Questions