आप jQuery में फ़ॉर्म परिवर्तन कैसे संभालते हैं?

Question 1

JQuery में, क्या परीक्षण का एक सरल तरीका है यदि किसी फॉर्म के तत्वों को बदल दिया गया है?

संपादित करें: मुझे यह जोड़ा जाना चाहिए कि मुझे केवल एक पर जांच करने की आवश्यकता हैclick() घटना की ।

संपादित करें: क्षमा करें, मुझे वास्तव में अधिक विशिष्ट होना चाहिए था! कहो कि मेरे पास एक फॉर्म है और मेरे पास निम्नलिखित के साथ एक बटन है:

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

यदि लोड होने के बाद से फॉर्म बदल गया है तो मैं कैसे परीक्षण करूंगा?

Question 2

तुम यह केर सकते हो:

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

यह changeईवेंट हैंडलर को प्रपत्र में इनपुट करता है, यदि उनमें से कोई भी इसका उपयोग मान .data()को सेट करने के लिए करता है , तो हम बस क्लिक पर उस मान की जांच करते हैं, यह मानता है कि फॉर्म के अंदर है (यदि बस के साथ प्रतिस्थापित नहीं किया गया है ), लेकिन आप इसे और भी सामान्य बना सकते हैं, जैसे:changedtrue#mybutton$(this).closest('form')$('#myForm')

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

संदर्भ: अद्यतन

JQuery के अनुसार यह सभी फॉर्म कंट्रोल को चुनने के लिए एक फिल्टर है।

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

: इनपुट चयनकर्ता मूल रूप से सभी फ़ॉर्म नियंत्रणों का चयन करता है।

Question 3

यदि आप यह जांचना चाहते हैं कि क्या प्रपत्र डेटा, जैसा कि सर्वर को भेजा जाने वाला है, बदल गया है, तो आप पृष्ठ लोड पर प्रपत्र डेटा को क्रमबद्ध कर सकते हैं और इसकी तुलना वर्तमान प्रपत्र डेटा से कर सकते हैं:

$(function() {

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

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

});

Question 4

एक वास्तविक समय और सरल समाधान:

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

Question 5

आप किसी भी रूप तत्व के लिए परिवर्तन ईवेंट में कॉलबैक संलग्न करने के लिए कई चयनकर्ताओं का उपयोग कर सकते हैं।

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

संपादित करें

चूँकि आपने उल्लेख किया है कि आपको केवल एक क्लिक के लिए इसकी आवश्यकता है, आप बस मेरे मूल कोड को इसमें संशोधित कर सकते हैं:

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

EDIT # 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;
});

Question 6

अद्यतन किए गए प्रश्न को देखकर ऐसा कुछ करने का प्रयास करें

$('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!");
});

Question 7

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

Question 8

यहाँ एक सुंदर समाधान है।

प्रपत्र पर प्रत्येक इनपुट तत्व के लिए छिपी हुई संपत्ति है जिसे आप यह निर्धारित करने के लिए उपयोग कर सकते हैं कि मूल्य बदल गया था या नहीं। प्रत्येक प्रकार के इनपुट का अपना संपत्ति नाम होता है। उदाहरण के लिए

इसके लिए 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

Question 9

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

Question 10

आपको jQuery फॉर्म ऑब्जर्व प्लगइन की आवश्यकता है । वही तुम खोज रहे हो।

Question 11

उदी के उत्तर का विस्तार, यह केवल फॉर्म जमा पर जाँच करता है, हर इनपुट परिवर्तन पर नहीं।

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

Question 12

पहले, मैं फ़ॉर्म की स्थिति को ट्रैक करने के लिए आपके फ़ॉर्म में एक छिपा हुआ इनपुट जोड़ूंगा। फिर, मैं इस jQuery स्निपेट का उपयोग छिपे हुए इनपुट के मूल्य को सेट करने के लिए करूँगा जब फॉर्म में कुछ परिवर्तन होता है:

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

जब आपका बटन क्लिक किया जाता है, तो आप अपने छिपे हुए इनपुट की स्थिति की जांच कर सकते हैं:

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

Question 13

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

स्निपेट का विस्तार करें

उपरोक्त @ जोड के उत्तर के अतिरिक्त।

यदि आप किसी विशेष रूप में फ़ील्ड्स को लक्षित करना चाहते हैं (यह मानते हुए कि एक से अधिक फ़ॉर्म हैं) केवल फ़ील्ड्स की तुलना में, आप निम्न कोड का उपयोग कर सकते हैं:

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

Question 14

इसे इस्तेमाल करे:

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