Stop an input field in a form from being submitted

Expanding your options

Becoming interactive smartly

If your input is just for show and should not be modified but viewed, consider making it readonly:

<input type="text" id="excludeInput" readonly>  <!-- Yeah, you can look but you can't touch! hah -->


This input field turns into a viewer-only field letting users select and copy data but not modify or submit it.

Working with dynamic forms

Working with forms that accept dynamic inputs? Here's a JavaScript jewel:

$('form').on('submit', function(){
  $('#excludeInput').remove(); // Now you see me. Now you don't!
});


This beauty removes the dynamic input from the DOM just in time before submission, keeping your form data intact.

Keeping form data client-side

Need to manage your form data in the client? Exclude fields from the serialized array while submission:

$('form').on('submit', function(e) {
  e.preventDefault();

  var formData = $(this).serializeArray().filter(function(item) {
    return item.name !== 'excludeInput'; // Not today, Ser!
  });

  $.ajax({
    url: this.action,
    type: this.method,
    data: formData,
    success: function(response) {
      // Handle your victorious response!
    }
  });
});


Digging Deeper

Elegantly handling form layout

To make sure your layout doesn't bounce around when you remove or disable fields, creatively use CSS to hold the position:

.input-hidden {
  visibility: hidden;
  position: absolute;  /* Don't just vanish, vanish with style! */
}


Ensuring Accessible UX

While cleverly coding those input fields, do consider the accessibility of your form. Make sure your disabled fields interact well with screen readers and the overall user experience is not hampered.

User script maintenance

Using a userscript for modifications in multiple form pages? Keep track of all the changes it incurs for clarity and easy maintenance. Test in multiple environments to ensure uniform functionality. Remember, the spiderweb of coding gets messier when bugs get in!