2012-04-15 4 views
3

저는 JavaScript가 처음이므로 다음을 수행하는 표준 방법을 찾아 내려고 노력하고 있습니다.제출하기 전에 양식을 여러 번 사용하십시오.

일부 체크 박스와 선택기가있는 양식이 있습니다. 확인란이 음악 스타일이고 선택자가 사람들의 이름이라고 가정 해 보겠습니다.

사용자가 여러 사람의 음악 스타일을 선택한 다음 모든 데이터가 포함 된 양식을 제출할 수 있기를 바랍니다.

예를 들어, 사용자는 먼저 클래식, 재즈, 록, 팝을 선택하고 "조"를 선택한 다음 재즈, 팝, 컨트리 및 일렉트로 니카를 선택하고 "제인"을 선택할 수 있습니다. 그래서 "제출자"와 "양식 제출"을위한 두 개의 버튼이 있어야합니다. 그들은 원하는대로 사용자가 많은 양식을 사용하도록 허용

  1. 피드백
  2. 에 대한 양식 아래 채울 이름과 자신이 선택한 스타일의 목록을 가지고 있고 :

    나는 싶습니다 마지막에 모든 데이터를 제출하십시오

jquery를 사용하여 JSON이 완벽하다는 느낌이 들지만이 작업을 수행하는 방법을 알아 내기 위해 어떤 검색 용어를 사용해야할지 모르겠습니다.

중요한 점은 양식이 Python의 Django보기로 처리된다는 것입니다.

+0

JS 브라우저가 아닌 브라우저를 지원해야합니까? (일반적으로 모든 웹 사용자의 약 2 %). 모바일 브라우저 (전화, 태블릿)를 지원해야합니까? –

+0

비 js 브라우저 또는 모바일 장치를 지원할 필요가 없습니다. – OregonTrail

+0

얼마나 궁금한가요? 얼마나 많은 사람들이 셀렉터에 등록 될 수 있습니까? – Alerty

답변

1

제출자에게 AJAX를 사용하여이를 수행 할 수 있습니다. 작업 흐름은 다음과 같아야합니다.

  1. 사용자가 Joe와 해당 음악 스타일을 선택합니다.
  2. 사용자가 '사용자 제출'을 누르십시오. 이 이벤트에서 JSON 개체로 선택한 사람 (Joe)의 이름과 선택한 음악 스타일을 인코딩하고 AJAX (jquery ajax()) 요청을 통해 백 엔드 스크립트로 전달합니다.
  3. 서버 측 스크립트는 필요한 처리를 수행합니다. 완료되면 AJAX는 'success handler'를 호출합니다. 이 시점에서 'Joe'를 제거하면 사용자는 제출이 성공적 이었음을 알게되고 Joe에게 다시 제출하지 않습니다.
  4. 양식에있는 다른 모든 사람들을 위해 세탁, 헹구기, 반복하십시오.

PS - AJAX를 통해 백엔드에 정보를 전달할 때 JSON으로 인코딩 할 필요가 없습니다. 표준 POST 요청으로 보낼 수도 있습니다. Javascript 객체를 JSON으로 인코딩하려면 JSON.stringify()

위의 내용은 한 가지 방법입니다. 질문에 대한 질문 (데이터 수집을 계속 - 제출)과 같이 작동합니다. 사용자가 '사람 제출'을 누를 때마다 데이터를 Javascript 객체에 추가하지만 제출하지 마십시오. 제출 된 데이터는 계속 JS 객체로 작성됩니다.

마지막으로 사용자가 '양식 제출'을 클릭하면 데이터를 문자열화하고 제출합니다.

관련 문제