Jquery 다중 단계 양식 수집 및 데이터 추가 링크 편집

Question

나는 다중 단계 형식을 코딩하고 있습니다. 이 양식의 끝에서 각 항목의 값을 표시하는 div가 필요합니다. 엔트리 중 일부를 포맷해야합니다. 예를 들어 길이와 너비가 서로 다른 두 개의 입력으로 표시되며 결과를 길이 X 너비로 표시하려고합니다. 다른 사람들은 모두 한 줄에있을 것입니다. 편집 버튼이 각 항목 옆에 있어야합니다.

내 HTML은

<form> 
<article id="part1"> 
<input type"text" name="input1" id="input1"> 
<input type"text" name="input1" id="input2"> 
<input type"text" name="input1" id="input3"> 
<input class="next button" type="button" value="Next"> 
</article> 

<article id="part2"> 
<input type"radio" name="radio" id="input4"> 
<input type"radio" name="radio" id="input5"> 
<input class="next button" type="button" value="Next"> 
</article> 

<article id="part3"> 
<div id="results"></div> 
<input name="Submit" type="submit" class="next button submitLast" value="Order"> 
</article> 
</form> 

사람이 클릭 할 때마다 "input.next"다음 기사가 나타납니다.

"article # part2"에서 ​​"input.next"를 클릭하면 마지막 기사가 나타납니다. "div # results"내의 텍스트는 라디오가 선택된 것을 포함하여 다른 모든 단계에서 입력 된 내용이어야합니다. 각 항목에는 해당 사용자가 뒤로 이동할 수있는 버튼이 있어야합니다. 또한 # input2와 # input3은 "# input2"+ "x"+ "# input3"처럼 한 줄에 표시되어야합니다. 나머지는 한 줄에 있어야합니다.

결과를 표시하기 위해 .serializeArray()를 사용할 수 있지만 두 가지 문제가 있다는 것을 이해합니다.

1. 두 개의 고유 한 입력을 한 줄에 표시하는 방법.
2. 어떻게 내가 마지막 기사가 표시 될 때 호출이 기능이 현재 편집 버튼

처리 않습니다.

function showValues() { 
var line1 = $("#input1").val() 
var line2 = $("#input2").val()+" x "+$("input3").val() 
var option1 = $("#input4").is(":checked") 
var option2 = $("#input5").is(":checked") 
if (option1==true) { 
var type = "option1" 
} 
if (option2==true) { 
var type = "option2" 
} 
$("results").append(line1+"<br>"+line2+"<br>"+type); 

} 

하지만 편집 버튼을 추가하고 클릭하면 어떻게 표시 되는지요?

Answer 1

데이터를 한번에 (각각의 상품 광고를 나타낸다) 제 배열 투입하고 하나 개의 라인을 삽입하는 것을 제외하고, 이것은 기본적으로 코드와 동일 다음 코드

function showValues() { 
     var line1 = $("#input1").val() 
     var line2 = $("#input2").val() + " x " + $("#input3").val() 
     var option1 = $("#input4").is(":checked") 
     var option2 = $("#input5").is(":checked") 
     if (option1 == true) { 
      var type = "option1" 
     } 
     if (option2 == true) { 
      var type = "option2" 
     } 

     var data = new Array(); 
     data[0] = { text: line1, edit: 0 }; 
     data[1] = { text: line2, edit: 0 }; 
     data[2] = { text: type, edit: 1 }; 

     for (var i = 0; i < data.length; i++) { 
      $("#results").append(data[i].text); 
      $("#results").append("<input type='button' value='edit' onclick='changePage(" + data[i].edit + ")' /><br />"); 
     } 
    } 

    function changePage(pageIndex) { 
     // Replace this with whatever code is needed to change the page 
     alert(pageIndex); 
    } 

사용해 . 또한 각 행에 편집 버튼을 추가합니다.

삽입 된 편집 단추에는 changePage 메서드를 호출하고 적절한 페이지 인덱스 값을 전달하는 클릭 핸들러가 있습니다.

오타가있을 수 있지만 두 개의 jQuery 선택기에서 "#"이 누락되었습니다.