동적으로 여러 그룹 만들기

양식에서 고객은 여러 그룹을 만들 수 있습니다. 모든 그룹에는 동일한 입력 필드가 있습니다. 고객이 '+ 추가 그룹'을 클릭하면 추가 그룹이 jQuery를 통해 동적으로 생성됩니다 (HTML은 AJAX 호출을 통해 다운로드 됨).동적으로 여러 그룹 만들기

다음은 샘플 HTML입니다. 각 ul 태그는 그룹입니다. 그룹 ul에서 각 입력 필드는 그룹 번호 필드를 포함합니다. 이와 같이 : foo_1, foo_2

current_group은 총 그룹 수를 추적하는 숨겨진 필드입니다.

add_group 버튼을 클릭하면 jQuery는 전체 그룹 수를 current_group에서 얻은 다음 추가 그룹을 동적으로 가져옵니다.

어떻게해야합니까?

또한 고객이 양식을 마쳤을 때 제출 버튼을 클릭하면 PHP를 통해 오류 확인으로 인해 동일한 페이지로 돌아갈 수 있습니다. 동적 HTML 그룹을 다시 풀고 싶지 않습니다. 어떻게이 문제를 해결할 수 있습니까?

<h2> Group One </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_1'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_1'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<h2> Group Two </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_2'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_2'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<input type='hidden' id='current_group' value='2' /> 
<input type='button' id='add_group' value='+ Additional Group' />

출처

2012-05-12 I' ll-Be-Back

첫 번째 HTML 요소 집합이 이미있는 경우 서버를 호출하는 대신 jQuery의 clone()을 사용하여 요소를 복사 할 수 있습니다. 당신은 당신이 말한 것과 같은 요소를 찾고 이름을 대체해야합니다.

newFormElems.find("select").each( 
    function(){   
     this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)}); 
    } 
);

그리고 무엇을 동적으로 대처하는 가장 좋은 방법은 다음과 같습니다 더 읽을 수있는 형식

var count = 1; 
function addRow(){ 
    count++; 
    var newFormElems = jQuery(".Form").clone(); //clone the form 
    var selects = newFormElems.find("select"); //find the selects 
    selects.eq(0).prop("name", "foo_" + count); //rename first 
    selects.eq(1).prop("name", "bar_" + count); //rename second 
    newFormElems.appendTo("#someElem"); //add to the page 
}

이 수를 증가 명명 기능을 다시 실행하는 또 다른 방법으로

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");

양식? Ajax로 데이터를 제출하거나 검증 후에 PHP 코드를 작성해야한다.

출처

2012-05-12 11:57:03 epascarello

한 가지 방법은 여러 가지가 있습니다. 이것은 당신의 논리입니다. 실수가 없다면 효과가 있습니다.

새 그룹 표시를 가져올 때마다 group_ids[]이라는 숨김 필드를 유지하십시오. 모든 그룹 ID가 배열로 수신됩니다. $ _REQUEST [ 'group_ids']에서 해당 배열에 액세스 할 수 있습니다 (코드에 따라 $ _POST 또는 $ _GET을 사용할 수 있습니다)

이제 페이지를 제출할 때마다 사용자가 제출 한 그룹 ID를 확인하십시오. 드롭 다운 값도받을 수 있습니다. 해당 그룹을 다시 표시해야 할 경우 $_REQUEST['group_ids']을 사용하여 데이터베이스에서 가져올 수 있으며 사용자가 선택한 값의 현재 값과 비교하여 올바른 옵션을 선택합니다.

출처

2012-05-12 11:56:16 Imdad

동적으로 여러 그룹 만들기

답변

관련 문제