인쇄용 양식 요소 값 가져 오기

Question

저는 JQuery를 사용하는 데 능통하며 대개 대부분의 일들을 뒤죽박죽으로 처리 할 수 ​​있습니다. 나는이 문제에 대한 인터넷 검색을 시도했으나 틀린 용어를 찾거나 공개 된 솔루션이 없습니다.

주문 양식 페이지의 print.css 파일을 준비 할 때 텍스트 입력을 제거하고 주소를 포함하는 SELECT 메뉴와 마찬가지로 해당 값을 인쇄 할 수 있는지 묻는 질문을 받았습니다.

연구 할 때 .val() 메서드 (현재 .fieldValue()라고도 함)와 .serializeArray()를 사용하여 값을 추출하는 방법을 알았을뿐 아니라 양식 요소의 위치.

분명히 :
SELECT 메뉴는 기본 배달 주소의 첫 번째 줄을 보여줍니다. 인쇄물의 경우 전체 주소를 몇 줄에 걸쳐 표시하고 SELECT 메뉴는 표시하지 않을 수 있습니다.

나는 나에게 값을 캡처 할 수 있습니다 작업 아래에이 솔루션을 가지고,하지만 난 형태 요소의 장소에 삽입하는 방법을 모른다 : 어떤 도움 Printing an HTML form using jQuery

감사합니다!

---

EDIT 캡쳐 값 만 HTML의 형태 요소를 교체하지 인쇄물에 삽입되어야한다.

Answer 1

여기 jsfiddle 같은 염기성 용액이다 http://jsfiddle.net/2mBSS/15/

기본적 : 뭔가 (버튼 클릭과 같은)에 대응하는 요소에 루프를 발생하고 그 값으로 대체 할 .replaceWith()의 jQuery 함수를 사용하면 .. . 너는 .val()와 함께. 당신이 볼 수 있듯이 <select>뿐만 아니라 <input> 요소와 잘 작동합니다.

더 복잡한 HTML 요소를 만들어 입력을 바꿀 수 있습니다 (예 : "<p>" + val + "</p>").

페이지가 다시로드 될 때까지 양식 입력란이 완전히 제거된다는 점에 유의하십시오. 이것은 전혀 중요하지 않을 수도 있습니다 (예를 들어 새 탭에서 인쇄 페이지를 여는 경우) 또는 사이트 디자인이 손상 될 수 있습니다 ... 개인적으로 인쇄 된 CSS 페이지를 사용하여 인쇄 된 페이지의 스타일을 지정하는 것이 좋습니다 (예 : 입력 상자의 테두리. 그러나 이것은 <select> 요소에서 선택된 옵션의 값을 추출해야하는 경우 잘 작동하지 않을 수 있습니다.

페이지를 그대로 유지하려면 숨겨진 요소를 삽입하여 인쇄용 텍스트를 보유하고 인쇄 단추를 클릭 할 때 입력 양식의 값을 복사 한 다음 인쇄하십시오 CSS를 사용하면 모든 입력을 숨기고 대신 보조 요소를 표시 할 수 있습니다 (예 : <p> 또는 <span>).