뒤로 버튼 핸들 동적 폼

Question

텍스트 필드의 배열이있는 폼이 있습니다. 사용자 (자바 스크립트를 통해)는 폼에 임의의 수의 텍스트 필드를 추가 할 수 있습니다. 양식을 제출하고 뒤로 버튼을 누르면 양식은 처음에 렌더링되었을 때 원래 양식에 있던 필드 만 표시됩니다 (추가 된 텍스트 필드는 손실됩니다). 사용자가 제출 한 상태에서 뒤로 버튼이 양식을 렌더링하도록 허용하는 가장 좋은 방법은 무엇입니까? 모든 아이디어를 환영합니다, 내가 시도한 몇 가지가 있습니다 :

• 이 는 몇 이유 그러나 저 의 가장 큰 살인자를 잘 작동하지 않습니다 (쿠키에 양식 데이터를 넣어하는 쿠키가 있다는 것입니다 4K
• 세션
• 에서 양식 데이터를 넣어) 크기 에서 제한하는 것은 AJAX를 통해 양식을 제출 한 후 역사에게 도움을

감사를 관리 할 수 ​​있습니다. 제 웹 사이트에 시험 양식을 게시했습니다 (http://fishtale.org/formtest/f1.php).

<form action="f2.php" method="post"> 
<input type="text" name="text[]" id="text1"/> 
<input type="submit" name="saveaction" value="submit form" /> 
</form> 

<a href="f2.php" id="add_element">Add Form Element</a> 

<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></script> 

<script type="text/javascript" > 
    $('#add_element').click(function (event) { 
     event.preventDefault(); 
     $('#text1').after('<input type="text" name="text[]" />'); 
    }); 
</script> 

이 내가 얼마 전에 올린 질문과 유사하다, Best Way For Back Button To Leave Form Data은, 그러나,이 양식의 요소는 사용자가 수정됩니다 또한 여기에 내가 언급 한 동작을 나타내는 간단한 양식입니다.

Answer 1

나는 이것을 위해 미리 쓰여진 라이브러리를 찾을 수는 없지만 이전에 해결 된 것 같습니다.

1. 를 사용하여 컨트롤을 추가하여 페이지의 UI를 수정하는 각각의 방법은 또한에 메소드 호출 (텍스트 자바 스크립트 표현을) 밀어하기 위해 AJAX 메서드를 호출되도록 command pattern : 나 자신 그것을 가지고 있다면 나는이 방법을 취할 것 서버의 세션에 저장된 큐

2. body onLoad가 완료된 후 AJAX 메서드를 사용하여 사용자가있는 페이지의 명령 대기열에 대한 서버 세션을 쿼리합니다. 하나가 검색되면 큐의 각 구성원 eval은 사용자가 수행 한 순서와 동일한 순서로 페이지의 UI를 다시 작성합니다.

이 방법을 사용하면 컨트롤의 추가뿐만 아니라 제거도 기록합니다. 텍스트 상자와 같은 사용자 입력 컨트롤에 대해 별도의 상태 보유자가 필요합니다 (AJAX 메서드 액세스로 서버 쪽 세션이 필요할 수도 있음).

Answer 2

웹 페이지 상단에 나만의 뒤로 버튼을 만들어 표준 웹 브라우저의 뒤로 버튼보다 더 크고 예쁘게 만들 수 있습니다.

코드에서 코드는 이전 상태가 무엇인지 알 수 있고 이전 상태가 아니면 브라우저의 백 기능을 호출 할 수 있습니까?

Answer 3

추가 할 추가 필드의 인코딩 된 목록과 그 값을 저장하는 <input type="hidden"> (제출하지 않으려면 양식이 name이 아닌)을 만드는 것이 어떻습니까? 브라우저가 'back'에 새로 추가 된 필드를 기억하지는 않지만 은이 처음부터 양식에 있던 숨겨진 필드의 값을 기억합니다.여기

문서 언로드에 추가 필드를 저장하고 준비에 그들을 검색하는 예이다 :

<input type="hidden" id="remembertexts" /> 

<form action="http://www.google.com/" method="get"> 
    <div id="texts"> 
     <input type="text" name="text[]" value="" /> 
    </div> 
    <div> 
     <input type="submit" /> 
     <input type="button" id="addtext" value="+" /> 
    </div> 
</form> 

<script type="text/javascript"> 

    // Add new field on button press 
    // 
    $('#addtext').click(function() { 
     addInput(''); 
    }); 

    function addInput(text) { 
     $('#texts input').eq(0).clone().val(text).appendTo('#texts'); 
    }; 

    // Store dynamic values in hidden field on leaving 
    // 
    $(window).bind('beforeunload', function() { 
     var vals= []; 
     $('#texts input').each(function() { 
      vals.push(encodeURIComponent(this.value)); 
     }); 
     $('#remembertexts').val(vals.join(';')); 
    }); 

    // Retrieve dynamic values on returning to page 
    // 
    $(function() { 
     var extratexts= $('#remembertexts').val().split(';').slice(1); 
     $.each(extratexts, function() { 
      addInput(decodeURIComponent(this)); 
     }); 
    }); 
</script> 

주 : 당신은 단지에 필요한 경우 대신 window.onbeforeunload의 form.onsubmit을 사용할 수 있습니다

• 제출물에 대한 가치를 기억하십시오. onunload 일부 브라우저는 해당 이벤트가 발생하기 전에 이전 양식 값을 저장하므로 일부 브라우저에서는 작동하지 않습니다.

• Firefox에서는 숨겨진 입력의 위치가 중요합니다. 어떤 이유로 동적으로 추가 된 필드 아래에 넣으면 Firefox는 어떤 입력인지 혼동하여 값을 기억하지 못합니다.

• 이 예제는 Opera에서 작동하지 않습니다. 오페라에서 작동하도록 만들 수도 있지만 고통 스럽습니다. 오페라의로드 및 언로드 이벤트 호출은 일관성이 없으므로 대신 onSubmit을 사용하거나 폴링 간격에서 숨겨진 필드를 설정해야합니다. 더 나쁜 것은 오페라가 이전 양식 필드 값을 기억할 때로드가 실행 된 후 실제로는 까지 채워지지 않습니다! 이미 많은 폼 스크립팅 문제가 발생합니다. 오페라 호환성이 필요한 경우 양식 값이 입력 될 때까지 대기하도록 작은 시간 제한을 onload에두면 해결할 수 있습니다.

Answer 4

뒤로 버튼 사용을 차단하십시오. 뒤로 버튼을 누르면 새로운 필드가 포함 된 사용자의 이전 페이지가 다시 표시됩니다. 이렇게하면 사용자는 뒤로 버튼을 정상적으로 사용할 수 있으며 "이전"페이지의 모양을 완벽하게 제어 할 수 있습니다.

특정 사용 예에서는 모든 필드가 표시되고 제출 된 값으로 채워지는 페이지 만 렌더링하면됩니다.

사용자가 입력 할 양식 시퀀스를 제공하고 이전 양식으로 돌아갈 수있는 모든 마법사 유형의 프로세스에 따라 따라야 할 좋은 패턴입니다.

this advice on capturing the onUnload event을 사용하여 양식 제출을 트리거하여 (입력 된 값을 가져올 수 있도록) "뒤로"가 표시된 이전 페이지를 다시 렌더링하는 것이 좋습니다. 유일한 대안은 사용자가 필드를 떠날 때마다 입력 된 값을 보내기 위해 Ajax를 사용하고 표시 할 추가 값을 검색하기 위해 AJAX를 통해 모든 페이지를 서버에 확인하도록하는 것입니다.

• Mastering the Back Button with Javascript
• Don't Let the Door Hit You
• Cross Browser unload Event and the Back Button
• Persisting portlet forms data in WebSphere Portal V5.1
: 여기
양식의 데이터를 유지하기 위해 뒤로 버튼의 기능에 대한 제어를 복용하고 언로드 이벤트를 사용 대해 논의 몇 가지 추가 페이지입니다

Answer 5

좋은 b 로우 이저 에 의해 완벽하게 작동 할 수 있습니다..

Firefox 1.5는 단일 브라우저 세션에서 JavaScript 상태를 포함하여 전체 웹 페이지에 대한 메모리 내 캐싱을 사용합니다. 방문한 페이지간에 앞뒤로 이동하면 페이지가로드되지 않고 JavaScript 상태가 유지됩니다. source

이 너무 Opera 및 WebKit에서 지원됩니다.

1. 이 onunload, onbeforeunload를 사용하지 마십시오 : 당신은 규칙에 충실에서 그러나 DOM 캐시에만 가능합니다.

2. Cache-control: no-store 또는 must-revalidate을 사용하지 마십시오.
   PHP에서는 session.cache_limiter을 patently_ridiculous (nocache)으로 변경해야합니다 (nocache). none으로 변경해야합니다.

   session_cache_limiter('none'); 
   

3. 불행히도 HTTPS도 있습니다.

브라우저에 페이지를 다시로드하도록 강요하지 않으면 해당 페이지가 다시로드되지 않습니다. 그들은 RFC 2616 suggests과 똑같이 DOM과 그 값을 변경하지 않을 것입니다. 당신이 데이터를 은닉 할 장소를 찾고 계신 경우

---

는 믿기 힘들만큼 교묘 한 해킹있다 - window.name can store megabytes of data. 서버로 전송되지 않으며 창간에 공유되지 않습니다.

5 localStorage가 IE8 사파리에서 구현되는 플래시 쿠키 및 HTML 4.

Answer 6

2 단계도있다 (폼 처리 스크립트는 세션 변수에 배열 저장 배열에 입력 값을두고 또는 텍스트/db/당신이 무엇을 발견 적절한).

1 단계 : 양식을 출력하는 스크립트는 세션 변수가 발견되면 javascript (차례대로 양식으로 채워짐)를 추가하고 세션 변수도 지 웁니다.