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그 중 하나가 사용 변경하면, 형태의 입력에 이벤트 핸들러를 .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입니다.

---

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

---

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

---

Extending Udi's answer, this only checks on form submission, not on every input change.

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

---

First, I'd add a hidden input to your form to track the state of the form. Then, I'd use this jQuery snippet to set the value of the hidden input when something on the form changes:

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

When your button is clicked, you can check the state of your hidden input:

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

---

$('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>

In addition to above @JoeD's answer.

If you want to target fields in a particular form (assuming there are more than one forms) than just fields, you can use the following code:

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

---

Try this:

<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>

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