表单提交前检查输入框值是否变更的实现咨询（附代码）

Hey there! Let's walk through fixing and optimizing your code to check if the input value has changed before submitting the form.

First, a quick heads-up: your original JS code has a small syntax mistake—you're missing a closing parenthesis ) at the end of the if condition. That would cause the code to fail immediately, so we'll fix that first.

Basic Fixed Version #

Here's the corrected base code with some small improvements:

JavaScript #

$(document).ready(function(){
  $('#submitButton').click(function(e) {
    // Prevent default form submission to run our check first
    e.preventDefault();
    
    // Cache the input element to avoid re-querying the DOM
    const $targetInput = $('input[name="inputToBeChecked"]');
    const originalValue = $targetInput.data('original-value');
    const currentValue = $targetInput.val();

    if(currentValue !== originalValue) {
      alert("Input field has changed!");
      // Uncomment below to submit the form if needed
      // $(this).closest('form').submit();
    } else {
      alert("Input field has not changed!");
      // Uncomment below to submit the form if needed
      // $(this).closest('form').submit();
    }
  });
});

HTML #

<form>
  <input type="text" name="inputToBeChecked" id="inputToBeChecked" 
         value="Original input field value" 
         data-original-value="Original input field value">
  <button id="submitButton" type="button">Submit</button>
</form>

Key Optimizations & Best Practices #

• Avoid hardcoding original values: Storing the original value in a data-* attribute is way more flexible than hardcoding it in your JS. This is especially useful if the input's initial value is dynamically generated (e.g., from a backend API) — you won't have to manually sync the string in two places.
• Prevent default submission: If your button is a form submit button (type="submit"), always use e.preventDefault() to intercept the default action first. You can then decide to proceed with submission after your check.
• Cache DOM elements: Storing the input element in a variable ($targetInput) saves you from querying the DOM multiple times, which boosts performance.
• Use strict equality (!==): This is more precise than loose equality (!=) because it avoids unexpected type conversion issues.
• Better user feedback (optional): Replace the basic alert with a custom modal or inline message for a smoother user experience — alerts work for testing, but they're a bit intrusive for production.

More Robust Implementation (Using Form Submit Event) #

If you want to cover all submission scenarios (like users pressing Enter to submit the form), listening to the form's submit event instead of the button's click event is a better approach:

JavaScript #

$(document).ready(function(){
  $('form').submit(function(e) {
    const $targetInput = $(this).find('input[name="inputToBeChecked"]');
    const originalValue = $targetInput.data('original-value');
    const currentValue = $targetInput.val();

    if(currentValue !== originalValue) {
      alert("Input field has changed!");
      // If you want to block submission when the value changes, keep this line
      // e.preventDefault();
    } else {
      alert("Input field has not changed!");
      // Block submission here if needed
      // e.preventDefault();
    }
  });
});

HTML #

<form>
  <input type="text" name="inputToBeChecked" id="inputToBeChecked" 
         value="Original input field value" 
         data-original-value="Original input field value">
  <button id="submitButton" type="submit">Submit</button>
</form>

内容的提问来源于stack exchange，提问作者nicozica