不同的结果来自同一领域

Question

Here am using Dynamic-Form-Element-Creation-And-Deletion-Plugin-Addel to insert more values and its working but the problem am facing here is when i select a value from the select box used by addel the corresponding data is appearing in the corresponding box and if i choose another select box by clicking add button the corresponding value comes in the first field not in the corresponding field. here is my view

<div class="form-group ">
         <label class="col-lg-3 control-label">Select Tools<span
                            class="required">*</span></label>
            <div class="col-lg-6">

             <div class="addel">

                 <div class="form-group target">
                    <div class="input-group">
                        <div class="col-lg-6"> <select class="form-control tools" style="width: 100%" name="tool_id[]" id="tools" 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">  
                  <input type="text" class="form-control" name="available" id="available" placeholder="Available" value="0 available">
                  </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>

            <button type="button" class="btn btn-success addel-add"><i class="fa fa-plus"></i></button>
          </div>

        </div>
      </div> 

here is my script

<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: " + $("#avail").html(data));

      });

   }
 </script>

here is my controller

public function ajax_available()
{
    $data['available']=$this->Tool_model->view_available_by_type($_POST['tools']);
    //var_dump($data['available']);
    $this->load->view('admin/tool/ajax_available',$data);
}

here is my ajax_available view

<input type="text" class="form-control" name="available"  id="available" placeholder="" value="<?php echo $available->available;?> available">

my picture looks like this Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG .

Answer 1

You are not giving your elements unique identifiers. Every time you add a new row with a dropdown and textbox, it generates the same IDs again for these new elements. This is invalid HTML, all elements must have a unique id.

So when you do

$("#avail").html(data)

it finds the first instance of an element with that ID - because there should only be one. As far as javascript is concerned, the others don't exist, because they are not valid.

Since you will have multiple "Available" textboxes in the page, you can't rely on ID to populate the right one. Give your "avail" div a class instead of an id, and then tell the script to find the related one by using its position in the markup:

<div class="col-lg-3 avail">
  <input type="text" class="form-control available" name="available" placeholder="Available" value="0 available">
</div>

And then in your code, instead of $("#avail").html(data) , do:

$(this).parent().parent().find(".avail").html(data);

This goes up the DOM by two divs, to find the common ancestor of both the select ( this in the context of the function), and the div you want to change, and then searches within it for an element with the avail class, and populates it with the data.

You should also remove "id" attributes from any other elements which can be duplicated, such as "quantity", for example.

PS I'm not sure why you use a textbox for this "Available" property - it seems like a status value coming from the database which the user should not change. Therefore it should be a label or span, really. Textboxes are for input, not output. Plus your user could type and change the value, which might confuse them. But I will leave you to sort that.