2014-04-23 2 views
0

동적 양식 ("Hinzufügen"버튼을 눌러 양식 필드 추가)을 만들었습니다.동적으로 생성 된 필드 액세스 및 비활성화

하지만 난

:-(그것과 함께 얻을 일부 기능을 필요 dosent 동적 생성 작동 미세 배열이 잘 작동으로도.

을 양식을 게시하지만 지금은 때 새로운 몇 가지 필드를 비활성화해야 필드는 생성하지만 난 ... 그것을 처리하는 선택기를 찾을 해달라고 내가 원하는 무엇

: 새로운 필드가 작성

을 모든 "폰"(data[?][von])하고 "비스"(data[?][bis]) 필드 F 이전에 입력란을 사용 중지해야합니다.

"von"필드는 마지막 "bis"필드의 데이터를 포함해야하며 또한 비활성화되어야합니다. 여기

은 코드입니다 : 도와

감사합니다 :-) 설명

$(document).ready(function() { 
    var MaxInputs  = 100; //maximum input boxes allowed 
    var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
    var AddButton  = $("#AddMoreFileBox"); //Add button ID 
    var submit1  = $("#submit"); 

    var x = InputsWrapper.length; //initlal text box count 
    var FieldCount=1; //to keep track of text box added 

    $(submit1).click(function (e) //on add input button click 
    { 
     $("#abser").submit(); 
    }); 

    $(AddButton).click(function (e) //on add input button click 
    { 
     if(x <= MaxInputs) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      $(InputsWrapper).append('<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label></div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td ><label class="inline">Von:</label><input name="data['+ FieldCount +'][von]" type="text" class="text nextto" /></td><td><label class="inline">Bis:</label><input name="data['+ FieldCount +'][bis]" type="text" class="text nextto" /></td></tr></table></p><p><label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data['+ FieldCount +'][art]" class="text nextto"><option value="Ortsaugenschein">Ortsaugenschein</option></select></p><p><label class="inline">Ort:</label><input name="data['+ FieldCount +'][ort]" type="text" class="text inline" /></p><p><label class="inline">Detail:</label></br><textarea name="data['+ FieldCount +'][detail]"></textarea></p></div>'); 
      x++; //text box increment 
     } 
     return false; 
    }); 

    $("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
      $(this).parent('div').remove(); //remove text box 
      x--; //decrement textbox 
     } 
     return false; 
    }) 
}); 
<center><h6>Absenz erfassen</h6></center> 
<div class="grid_12"> 
    <div class="grid_3">&nbsp;</div> 
    <div class="grid_6"> 
     <form id="abser" action="addon/absdb/testpost.php" method="post"> 
      <label class="inline">Datum:</label> 
      <input type="hidden" name="datum" id="dtp_input2" value="" /> 
      <div id="InputsWrapper"> 
       <div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"> 
        <label><font color="#FFFFFF">Weg:</font></label> 
       </div> 
       <div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"> 
        <p> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" > 
          <tr class="tablebg"> 
           <td> 
            <label class="inline">Von:</label><input name="data[1][von]" type="text" class="text nextto" /> 
           </td> 
           <td> 
            <label class="inline">Bis:</label><input name="data[1][bis]" type="text" class="text nextto" /> 
           </td> 
          </tr> 
         </table> 
        </p> 
        <p> 
         <label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp; 
         <select name="data[1][art]" class="text nextto"> 
          <option value="Ortsaugenschein">Ortsaugenschein</option> 
         </select> 
        </p> 
        <p> 
         <label class="inline">Ort:</label> 
         <input name="data[1][ort]" type="text" class="text inline" /> 
        </p> 
        <p> 
         <label class="inline">Detail:</label> 
         </br> 
         <textarea name="data[1][detail]"></textarea> 
        </p> 
       </div> 
      </div> 
      <p> 
       <input type="submit" class="submit" id="AddMoreFileBox" value="Hinzufügen" /> 
       <input type="submit" class="submit" id="submit" value="Speichern" /> 
      </p> 
     </form> 
    </div> 
    <div class="grid_3"> 
     &nbsp; 
    </div> 
</div> 
+0

경우'.removeclass' 요소는 무엇입니까? 또한 '영어'언어는 '힌즈 후겐'입니까? – Satpal

+1

죄송합니다.이보기에서 삭제되었습니다. 사용자가 필드를 제거하지 못하도록 .removeclass가 사용되지 않습니다 ... 다른 항목에서는 .removeclass 버튼 (다음에 생성 된 필드 X)을 눌러 생성 된 필드를 제거 할 수 있습니다. – Phantom001

+1

$ ('input [name $ = "[von]"]')과 같은 [폰] 필드를 선택할 수 있습니다. [bis] $ ('input [name $ = "[bis]"]')와 비슷합니다. "name $"은 지정된 값으로 끝나는 속성을 의미합니다. 희망이 도움이됩니다. –

답변

0

지금 작동!

$(document).ready(function() { 

var MaxInputs  = 100; //maximum input boxes allowed 
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID 
var AddButton  = $("#AddMoreFileBox"); //Add button ID 
var submit1  = $("#submit"); 
var x = InputsWrapper.length; //initlal text box count 
var FieldCount=1; //to keep track of text box added 

$(submit1).click(function (e) //on add input button click 
{ 
    $("#abser").submit(); 
}); 

$(AddButton).click(function (e) //on add input button click 
{ 
    $('input[name$="[von]"]').attr('disabled', 'disabled'); 
    $('input[name$="[bis]"]').attr('disabled', 'disabled'); 

     if(x <= MaxInputs) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      var lastfield = FieldCount-1; 
      var lasttime = $('input[name$="['+ lastfield +'][bis]"]').val(); 
      $(InputsWrapper).append('<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label></div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td ><label class="inline">Von:</label><input name="data['+ FieldCount +'][von]" type="text" value="'+ lasttime +'" disabled="disabled" class="text nextto" /></td><td><label class="inline">Bis:</label><input name="data['+ FieldCount +'][bis]" type="text" class="text nextto" /></td></tr></table></p><p><label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data['+ FieldCount +'][art]" class="text nextto"><option value="Ortsaugenschein">Ortsaugenschein</option></select></p><p><label class="inline">Ort:</label><input name="data['+ FieldCount +'][ort]" type="text" class="text inline" /></p><p><label class="inline">Detail:</label></br><textarea name="data['+ FieldCount +'][detail]"></textarea></p></div>'); 
      x++; //text box increment 
     } 

return false; 

}); 

$("body").on("click",".removeclass", function(e){ //user click on remove text 
     if(x > 1) { 
       $(this).parent('div').remove(); //remove text box 
       x--; //decrement textbox 
     } 
return false; 
}) 
}); 

<center><h6>Absenz erfassen</h6></center> 



<div class="grid_12"> 
<div class="grid_3">&nbsp;</div> 
<div class="grid_6"> 

<form id="abser" action="addon/absdb/testpost.php" method="post"> 


<label class="inline">Datum:</label> 

<div class="controls input-append date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> 
<input size="16" type="text" value="" readonly> 
<span class="add-on"><i class="icon-th"></i></span> 
</div> 
<input type="hidden" name="datum" id="dtp_input2" value="" /> 

<div id="InputsWrapper"> 

<div style="border: 1px solid silver; margin: 5px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#3391B0;"><label><font color="#FFFFFF">Weg:</font></label> 

</div><div style="border: 1px solid silver; margin: 0px 5px 0px 0px; padding:8px 8px 8px 8px; background-color:#EDF8FE"><p><table width="100%" border="0" cellspacing="0" cellpadding="0" class="formtable" ><tr class="tablebg"><td > 

<label class="inline">Von:</label><input name="data[1][von]" type="text" class="text nextto" /> 


</td><td> 

<label class="inline">Bis:</label><input name="data[1][bis]" type="text" class="text nextto" /> 

</td></tr></table></p><p> 

<label class="inline" for="art">Art:</label>&nbsp;&nbsp;&nbsp;<select name="data[1][art]" class="text nextto"> 

<option value="Ortsaugenschein">Ortsaugenschein</option></select> 

</p><p> 

<label class="inline">Ort:</label><input name="data[1][ort]" type="text" class="text inline" /> 

</p><p> 

<label class="inline">Detail:</label></br><textarea name="data[1][detail]"></textarea> 

</p></div> 


</div> 

<p> 

<input type="submit" class="submit" id="AddMoreFileBox" value="Hinzufügen" /> 
<input type="submit" class="submit" id="submit" value="Speichern" /> 
</p> 
</form> 

</div> 

<div class="grid_3"> 
&nbsp; 
</div> 

</div> 
관련 문제