2010-01-28 2 views
2

페이지로드가 완료된 후 jQ로 DOM에 추가 된 동적 요소가 포함 된 양식을 제출하려고합니다.jQuery : 동적 양식 요소 제출 문제

폼에서 serialize()를 실행하면 동적 필드가 아닌 페이지에 하드 코드 된 모든 필드의 데이터를 가져옵니다.

여기

.. 제출 버튼을 눌렀을시 HTML

<form id="someform" name="someform" method="post" action""> 
    <input type="text" name="afield" /> 
<ul id="somelist"> 
</ul> 
<input type="submit" name="submit" /> 
</form> 

<img id="add" src="add-button.png" /> 

<div class="new_unit" style="display:none"> 
<input type="text" name="somefield" /> 
</div> 

자바 스크립트

<script type="text/javascript"> 
// Adds a new field to the form 
$('#add').click(function() { 
$('#somelist').append('<li>' + $('.new_unit').html() + '</li>'); 
}); 

// Validate before submission 
$('#someform').validate({ 
......., 
....., 
submitHandler: submit_form 
}); 

function submit_form() { 
_data = $('#someform').serialize(); 
alert(_data); 
} 
</script> 

같은 일부 코드 조각이다, 정적 필드의 데이터, 시카고이 등장합니다. 일부 필드은 jQuery에 의해 추가되지 않았습니다.

여기에 similar questions 몇 개가 있습니다. 나는 아직 제안 된 해결책을 따르고있다.

저는 최신 jQuery (1.4.1)를 사용 중이며 live() 이벤트 바인더를 가지고 노는 것을 고려했습니다. 이 문제를 해결할 수있는 느낌이 있지만 validate() 플러그인과 함께 사용하는 방법을 알 수는 없습니다.

제안 사항?

감사합니다, m^전자는

+0

흠 :

<input type="text" id="copy" /> 

과 :

것은 그들에게 다른 이름을 지정하려면이 작업을 수행하는 것이 약간 쉬울 수 있습니다 jquery, ms의 jquery.validate가 나를 위해 작동합니다. 파이어 폭스 3.6 이상. 원한다면 완전한 테스트 파일의 복사본을 줄 수 있습니다 –

+0

Grrrr ... 멍청한 짓은하지 않을 것입니다! 나를 위해, 적어도 내가 그 []를 포함 할 때까지. 대부분 비슷한 이름의 필드가 여러 인스턴스로 발행되는 것 같습니다. 귀하의 의견에 감사드립니다. –

답변

4

문제는 동적으로 추가 필드가 모두 같은 명명 된 것입니다. 당신은 그들에게 다른 이름을 주거나, 당신이 서버에서 사용하는 것에 따라 그들에게 somefield[]과 같은 이름을 부여 할 수 있습니다 (PHP와 나는 이것을 처리 할 것이라고 믿습니다). 코드가 그대로 호스팅 구글의 링크가있는 테스트 파일에 붙여 넣기,

$("#add").click(function() { 
    $("#copy").clone().removeAttr("id").attr("name", "field[]") 
    .appendTo("#somelist").wrap("<li>") 
}); 
+0

쿠오 !! !! 고마워. PHP [] 집단은 속임수를 사용했습니다. 그리고 clone() 기능은 대단한 시간 절약입니다. 왜 내가 그렇게 오래 사용하지 않은지 궁금해! –