ajax를 통해 데이터베이스의 개별 폼 요소 값을 업데이트 하시겠습니까?

Question

사용자가 변경할 수있는 페이지에 꽤 많은 입력 요소가 있습니다. 나는 양식을 제출하고 싶지 않습니다. 사용자가 요소 중 하나의 값을 변경 한 후에 데이터베이스 값을 변경하기 만하면됩니다.

현재 각 입력에 포커스 아웃을 바인딩하는 중입니다. 이것은 보통 (페이스 북, 등 ..) 완료되는 방법입니까?

$('input').focusout(function() { 
    var current_val = $(this).val(); 
    var preset_val = $(this).attr('rel');//attribute set with original value 
    if (current_val !== preset_val) { 
       alert ('Value changed.');//where I would post to php page to update database 
      } 
    });" 

Answer 1

"일반적으로"하는 방식은 사용자가 단추를 클릭하여 변경 사항을 저장하거나 커밋 할 때까지 대기하는 것입니다. 각 변경 사항을 업데이트하려면 사용자에게 변경 사항을 명확하게 전달해야합니다.

사용할 적절한 이벤트는 변경 사항을 캡처하는 데 얼마나 적극적인지에 따라 결정됩니다. 키 스트로크 업데이트마다 keyup이 입력에 적합하고 선택 및 라디오/체크 박스에 대해서는 click이 적합합니다. 덜 공격적인 것은 blur 또는 change입니다.

가능한 변경 사항을 캡처하는 데 매우 능동적 인 방법 중 하나는 click 및 keyup을 양식 요소 자체에 첨부하는 것입니다. 이렇게하면 모든 요소에 리스너를 추가하는 오버 헤드를 줄일 수 있습니다. 양식에서 이벤트가 발생할 때마다 a) 원래 대상을 확인하거나 b) 전체 양식을 작성하거나 c) 모든 요소를 ​​반복하고 변경 사항을 감지하고 ajax 필드 만 변경하십시오.

onbeforeupload 또한 창을 닫은 경우에도 양식의 최종 확인을 수행하는 데 사용할 수 있지만 이는 너무 지나치게 빠를 수 있습니다.

문서

• https://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement
• https://developer.mozilla.org/en-US/docs/DOM/element.onkeyup
• https://developer.mozilla.org/en-US/docs/DOM/element.onchange
• https://developer.mozilla.org/en-US/docs/DOM/element.onblur
• https://developer.mozilla.org/en-US/docs/DOM/element.onclick