데이터를 serialize 할 때 동적 데이터가 표시되지 않습니다.

Question

다음 코드를 사용하여 다른 입력 텍스트 상자를 동적으로 추가하고 있습니다. 내가 가진 문제는 데이터를 serialize하고 내 PHP 스크립트에 전달할 때 추가 된 입력 텍스트 상자의 데이터가 표시되지 않는다는 것입니다.

내가 뭘 잘못하고 있는거야 ??

감사

HTML 코드는

<div class="control-group" id="ports"> 
<label class="control-label" for="dataport1">dataport</label> 
<div class="controls"> 
    <input type="text" id="dataport_1" name="dataport_1" placeholder="Type something"> 
</div> <!-- end controls --> 
</div><!-- end control-group--> 
<div class> 
    <a class="btn btn-primary pull-right" id="addportbtn">Add Another Port</a> 
</div> 

JQUERY SCRIPT은

좋아

function addPorts() 
{ 

    var count = 2; 
    var numports = 2; 
    var idnum; 

    $('#addportbtn').click(function() { 
    //alert(count); 
    numports = idnum; 
    var addHtml = '<div class="control-group">' + 
      '<label class="control-label" for="dataports">data port</label>'+ 
      '<div class="controls">'+ 
      '<input type="text" id="dataport_idnum" placeholder="Type something">'+ 
      '</div> <!-- end controls -->'+ 
      '</div><!-- end cotrol-group-->' 
     $("#ports:last").after(addHtml); 

     numports = numports + 1; 
     count++; 

    }); //end click 
} 

Answer 1

이 코드에는 여러 가지 문제점이 있습니다. 지금

<div class="control-group" id="ports"> 
<label class="control-label" for="dataport1">dataport</label> 
<!--         ^no underscore, which means this won't work correctly --> 
<div class="controls"> 
    <input type="text" id="dataport_1" name="dataport_1" placeholder="Type something"> 
</div> <!-- end controls --> 
</div><!-- end control-group--> 
<div class> 
<!--^the class attribute without a value. While it may not cause parsing issues, its good to fix this anyway if you aren't going to use it --> 
    <a class="btn btn-primary pull-right" id="addportbtn">Add Another Port</a> 
</div> 

그리고 자바 스크립트 : 나는 HTML을 시작합니다

function addPorts() 
{ 

    var count = 2; // Every single one of these variables is local to the function 
    var numports = 2; // And thus cannot be accessed, and are re-initialized 
    var idnum;  // every time the function is called 
    // ^this variable is not incremented, so it will always be undefined 
    $('#addportbtn').click(function() { // and on that note, every time addPorts() 
    //alert(count);      // called, it attaches another click 
    numports = idnum;     // handler 
    var addHtml = '<div class="control-group">' + 
      '<label class="control-label" for="dataports">data port</label>'+ //this label won't attach to the input, as there is no input with the id of 'dataports' 
      '<div class="controls">'+ 
      '<input type="text" id="dataport_idnum" placeholder="Type something">'+ //idnum is not parsed, strings are not parsed into variables. You must escape them first. 
      '</div> <!-- end controls -->'+ 
      '</div><!-- end cotrol-group-->' 
     $("#ports:last").after(addHtml); 

     numports = numports + 1; //again, variables are local to function, so doing this doesn't do anything 
     count++;     // is pointless, isn't used. 

    }); //end click 
} 

을 그리고 아래 링크로 이제 수정 ...

직렬화 방법은, 일반적으로 적용된다 양식이 아니라 div가 있습니다. 형태가 직렬화 때 이제

var numports = 2; // make variable global, so it can be accessed by any function 
$(function() { //execute on dom ready, so events are bound correctly. 
    $('#addportbtn').click(function() { 
     var addHtml = '<div class="control-group">' + 
      '<label class="control-label" for="dataport_' + numports + '">data port</label>' + 
      '<div class="controls">' + 
      '<input type="text" id="dataport_' + numports + '" name="dataport_' + numports + '" placeholder="Type something"/>' + 
                 //  ^name specified 
      '</div> <!-- end controls -->' + 
      '</div><!-- end cotrol-group-->' 
     $("#ports .control-group:last").after(addHtml); 
     numports++; 
    }); 
}); 

는 올바르게 관련을 추가합니다 :

<form id="ports"> 
    <div class="control-group"> 
     <label class="control-label" for="dataport_1">data port</label> 
     <div class="controls"> 
      <input type="text" id="dataport_1" name="dataport_1" placeholder="Type something" /> 
     </div> 
     <!-- end controls --> 
    </div> 
    <!-- end control-group--> 
    <div> <a class="btn btn-primary pull-right" id="addportbtn">Add Another Port</a> 

    </div> 
</form> 

jQuery의 .serialize() 방법은이 일을 위해, 그래서 그것을 지정해야합니다, 요소의 이름 속성과 분리되어 작동 입력 필드

여기에 working demo입니다.

Answer 2

는, 그것을 해결! Check jsfiddle addPorts()으로 전화하여 필요한 변수를 얻을 수 있습니다.

$(function(){ 
$('#addportbtn').click(function() { 

numports = 1; 
var addHtml = '<div class="control-group">' + 
     '<label class="control-label" for="dataports">data port</label>'+ 
     '<div class="controls">'+ 
     '<input type="text" id="dataport_idnum" placeholder="Type something">'+ 
     '</div> <!-- end controls -->'+ 
     '</div><!-- end cotrol-group-->' 
    $("#ports:last").append(addHtml); 

    numports = numports + 1; 
    count++; 

}); //end click 

function addPorts() 
{ 

var count = 2; 
var numports = 2; 
var idnum; 


} 
});