다른 결과가 동일한 필드에 나타납니다

Question

더 많은 값을 삽입하고 작동하는 데 문제가 있지만 여기에 직면 한 문제는 해당 상자에 해당 데이터가 표시되는 선택 상자에서 값을 선택할 때입니다. 추가 버튼을 클릭하여 다른 선택 상자를 선택하면 해당 값이 해당 필드가 아닌 첫 번째 필드에옵니다. 여기 내보기 여기

<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> 

입니다 것은 내 스크립트 여기

<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> 

것은 여기 내 ajax_available보기 내 그림이 보이는

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

내 컨트롤러

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); 
} 

입니다 like이 Valid XHTML http://spdc.in/demo/spectra/assets/images/s-tool.PNG입니다.

Answer 1

귀하의 요소에 고유 한 식별자를 부여하지 않았습니다. 드롭 다운 및 텍스트 상자가있는 새 행을 추가 할 때마다이 새 요소에 대해 동일한 ID가 다시 생성됩니다. 유효하지 않은 HTML이며 모든 요소는 고유 한 ID를 가져야합니다.

그래서 당신은 그 ID를 가진 요소의 첫 번째 인스턴스를 발견

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

을 수행 할 때 - 하나만이 있어야하기 때문이다. 자바 스크립트에 관한 한, 다른 것들은 유효하지 않기 때문에 존재하지 않습니다.

페이지에 여러 개의 "사용 가능한"텍스트 상자가 있으므로 ID를 사용하여 올바른 페이지를 채울 수 없습니다. 당신의 "이익"을 부여하는 대신 아이디의 클래스를 div에 다음 마크 업에서의 위치를 ​​사용하여 관련 하나 찾을 수있는 스크립트를 말해 : $("#avail").html(data) 대신, 코드에서 다음

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

그리고 작업을 수행합니다

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

이것은 (함수의 맥락에서 this) 모두 선택의 공통 조상을 찾기 위해, 두 개의 div를하여 DOM을 간다, 당신은 다음 변경할 및 사업부는 것이 내 검색 요소를 avail 클래스로 채우고 데이터로 채 웁니다.

또한 "수량"과 같이 복제 할 수있는 다른 요소에서 "id"특성을 제거해야합니다.

P. 왜이 "사용 가능한"속성에 텍스트 상자를 사용하는지 모르겠습니다. 사용자가 변경해서는 안되는 데이터베이스의 상태 값처럼 보입니다. 따라서 라벨 또는 스팬이어야합니다. 텍스트 상자는 입력 용이며 출력용이 아닙니다. 또한 사용자가 값을 입력하고 변경할 수 있으므로 혼동 될 수 있습니다. 그러나 나는 당신을 그 일로 분류 할 것입니다.