[javascript] jQuery에서 양식 변경을 어떻게 처리합니까?

Program / 글쓴이

jQuery에서 양식의 요소가 변경되었는지 테스트하는 간단한 방법이 있습니까?

편집 :click() 이벤트 만 확인하면된다고 추가해야합니다 .

편집 : 정말 더 구체적이어야 미안합니다! 양식이 있고 다음과 같은 버튼이 있다고 가정합니다.

$('#mybutton').click(function() {
  // Here is where is need to test
  if(/* FORM has changed */) {
     // Do something
  }
});

양식이로드 된 후 변경되었는지 어떻게 테스트합니까?

답변

다음과 같이 할 수 있습니다.

$("form :input").change(function() {
  $(this).closest('form').data('changed', true);
});
$('#mybutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

이것은 릭 change그 중 하나가 사용 변경하면, 형태의 입력에 이벤트 핸들러를 .data()세트에 changed가치를 true우리는 단지 클릭에 그 값을 확인,이 그 가정 #mybutton(바로 교체하지 않을 경우 형태로 내부 $(this).closest('form')에 $('#myForm')) 그러나 다음과 같이 더 일반적으로 만들 수 있습니다.

$('.checkChangedbutton').click(function() {
  if($(this).closest('form').data('changed')) {
     //do something
  }
});

참조 : 업데이트 됨

jQuery에 따르면 이것은 모든 양식 컨트롤을 선택하는 필터입니다.

http://api.jquery.com/input-selector/

: input 선택기는 기본적으로 모든 양식 컨트롤을 선택합니다.

답변

서버로 보낼 양식 데이터가 변경되었는지 확인하려면 페이지로드시 양식 데이터를 직렬화하고 현재 양식 데이터와 비교할 수 있습니다.

$(function() {

    var form_original_data = $("#myform").serialize();

    $("#mybutton").click(function() {
        if ($("#myform").serialize() != form_original_data) {
            // Something changed
        }
    });

});

답변

실시간 및 간단한 솔루션 :

$('form').on('keyup change paste', 'input, select, textarea', function(){
    console.log('Form changed!');
});

답변

여러 선택기를 사용하여 모든 양식 요소의 변경 이벤트에 콜백을 연결할 수 있습니다.

$("input, select").change(function(){
    // Something changed
});

편집하다

클릭 한 번에만 필요하다고 언급 했으므로 원래 코드를 다음과 같이 수정할 수 있습니다.

$("input, select").click(function(){
    // A form element was clicked
});

# 2 수정

좋아, 다음과 같이 무언가가 변경되면 설정되는 전역을 설정할 수 있습니다.

var FORM_HAS_CHANGED = false;

$('#mybutton').click(function() {
    if (FORM_HAS_CHANGED) {
        // The form has changed
    }
});

$("input, select").change(function(){
    FORM_HAS_CHANGED = true;
});

답변

업데이트 된 질문을보고 다음과 같이 시도하십시오.

$('input, textarea, select').each(function(){
    $(this).data("val", $(this).val());
});
$('#button').click(function() {
    $('input, textarea, select').each(function(){
        if($(this).data("val")!==$(this).val()) alert("Things Changed");
    });
});

원래 질문의 경우 다음과 같이 사용하십시오.

$('input').change(function() {
    alert("Things have changed!");
});

답변

$('form :input').change(function() {
    // Something has changed
});

답변

여기에 우아한 해결책이 있습니다.

값이 변경되었는지 여부를 판별하는 데 사용할 수있는 양식의 각 입력 요소에 대한 숨겨진 특성이 있습니다. 각 입력 유형에는 고유 한 속성 이름이 있습니다. 예를 들면

  • 에 대한 text/textarea그것의 DEFAULTVALUE
  • 에 대한 select그것의 defaultSelect
  • 에 대한 checkbox/radio그것의 defaultChecked

다음은 그 예입니다.

function bindFormChange($form) {

  function touchButtons() {
    var
      changed_objects = [],
      $observable_buttons = $form.find('input[type="submit"], button[type="submit"], button[data-object="reset-form"]');

    changed_objects = $('input:text, input:checkbox, input:radio, textarea, select', $form).map(function () {
      var
        $input = $(this),
        changed = false;

      if ($input.is('input:text') || $input.is('textarea') ) {
        changed = (($input).prop('defaultValue') != $input.val());
      }
      if (!changed && $input.is('select') ) {
        changed = !$('option:selected', $input).prop('defaultSelected');
      }
      if (!changed && $input.is('input:checkbox') || $input.is('input:radio') ) {
        changed = (($input).prop('defaultChecked') != $input.is(':checked'));
      }
      if (changed) {
        return $input.attr('id');
      }

    }).toArray();

    if (changed_objects.length) {
      $observable_buttons.removeAttr('disabled')
    } else {
      $observable_buttons.attr('disabled', 'disabled');
    }
  };
  touchButtons();

  $('input, textarea, select', $form).each(function () {
    var $input = $(this);

    $input.on('keyup change', function () {
      touchButtons();
    });
  });

};

이제 페이지의 양식을 반복하면 기본적으로 비활성화 된 제출 버튼이 표시되고 실제로 양식의 일부 입력 값을 변경하는 경우에만 활성화됩니다.

$('form').each(function () {
    bindFormChange($(this));
});

jQuery플러그인으로 구현하는 방법 은 여기 https://github.com/kulbida/jmodifiable입니다.