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

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

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폼의 입력에 대한 이벤트 핸들러, 변경된 입력이 있는 경우 설정에 사용합니다.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기본값입니다.
• 위해서select기본값입니다. 선택
• 위해서checkbox/radio기본값입니다. 선택됨

여기 그 예가 있습니다.

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

var formStr = JSON.stringify($("#form").serializeArray());
...
function Submit(){
   var newformStr = JSON.stringify($("#form").serializeArray());
   if (formStr != newformStr){
      ...
         formChangedfunct();
      ...
   }
   else {
      ...
         formUnchangedfunct();
      ...
   }
}

jQuery Form Observe 플러그인이 필요합니다.그것이 당신이 찾고 있는 것입니다.

Udi의 답변을 확장하여, 이것은 모든 입력 변경이 아닌 양식 제출만 확인합니다.

$(document).ready( function () {
  var form_data = $('#myform').serialize();
  $('#myform').submit(function () {
      if ( form_data == $(this).serialize() ) {
        alert('no change');
      } else {
        alert('change');
      }
   });
});

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
  $("#result").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Form "your_form_name"</h2>
<form name="your_form_name">
  <input type="text" name="one_a" id="one_a" value="AAAAAAAA" />
  <input type="text" name="one_b" id="one_b" value="BBBBBBBB" />
  <input type="text" name="one_c" id="one_c" value="CCCCCCCC" />
  <select name="one_d">
    <option value="111111">111111</option>
    <option value="222222">222222</option>
    <option value="333333">333333</option>
  </select>
</form>
<hr/>
<h2>Form "your_other_form_name"</h2>
<form name="your_other_form_name">
  <input type="text" name="two_a" id="two_a" value="DDDDDDDD" />
  <input type="text" name="two_b" id="two_b" value="EEEEEEEE" />
  <input type="text" name="two_c" id="two_c" value="FFFFFFFF" />
  <input type="text" name="two_d" id="two_d" value="GGGGGGGG" />
  <input type="text" name="two_e" id="two_f" value="HHHHHHHH" />
  <input type="text" name="two_f" id="two_e" value="IIIIIIII" />
  <select name="two_g">
    <option value="444444">444444</option>
    <option value="555555">555555</option>
    <option value="666666">666666</option>
  </select>
</form>
<h2>Result</h2>
<div id="result">
  <h2>Click on a field..</h2>
</div>

위의 @JoeD의 답변 외에도.

필드가 아닌 특정 양식의 필드를 대상으로 지정하려면(양식이 둘 이상인 경우) 다음 코드를 사용할 수 있습니다.

$('form[name="your_form_name"] input, form[name="your_form_name"] select').click(function() {
    // A form element was clicked
});

사용해 보십시오.

<script>
var form_original_data = $("form").serialize(); 
var form_submit=false;
$('[type="submit"]').click(function() {
    form_submit=true;
});
window.onbeforeunload = function() {
    //console.log($("form").submit());
    if ($("form").serialize() != form_original_data && form_submit==false) {
        return "Do you really want to leave without saving?";
    }
};
</script>

먼저 양식의 상태를 추적하기 위해 양식에 숨겨진 입력을 추가합니다.그런 다음 이 jQuery 스니펫을 사용하여 양식의 무언가가 변경될 때 숨겨진 입력 값을 설정합니다.

    $("form")
    .find("input")
    .change(function(){
        if ($("#hdnFormChanged").val() == "no")
        {
            $("#hdnFormChanged").val("yes");
        }
    });

버튼을 클릭하면 숨겨진 입력 상태를 확인할 수 있습니다.

$("#Button").click(function(){
    if($("#hdnFormChanged").val() == "yes")
    {
        // handler code here...
    }
});

언급URL : https://stackoverflow.com/questions/3025396/how-do-you-handle-a-form-change-in-jquery