防止表单基于宽度提交答案

【问题标题】：Prevent Forms From Submitting Based on Width防止表单基于宽度提交
【发布时间】：2017-05-12 02:25:00
【问题描述】：

如何防止我的页面上的部分表单根据页面的宽度提交？

即如果页面在 900px 和 1200px 之间，则只有具有 .regular-form 类的表单输入/选择项目将包含在表单提交中。

【问题讨论】：

您有几个解决方案，但我想说需要更多细节才能完全理解您想象的这将如何发挥作用。
按照您的问题的表述方式，该功能没有意义。我猜测这是一个响应式表单，您不希望提交这些输入的原因是因为它们在该宽度下不可见。如果是这样，你不应该重复“我应该显示这个输入吗？”逻辑变成“我应该提交这个输入吗？”逻辑。相反，使用 CSS 媒体查询来显示/隐藏它们，并使用 JS 说“不要提交隐藏的那些”。例如stackoverflow.com/questions/1374147/… 这将更容易维护。

【解决方案1】：

您可以确保相关元素不是 DOM 的一部分，这将确保它们也不会在提交中发送。

您可以使用此代码来执行此操作：

if($(window).width() > 900 && $(window).width() < 1200) {
    $('input,select,textarea').not('.regular-form').remove()
}

【讨论】：

我认为根据 OP 应该是not('.regular-form').remove()
无论如何都不是 JS 大师。那么，这将是可行的代码吗？ <script type="javascript"> if($(window).width() > 990) { $('input,select,textarea').not('.regular-form').remove() } else if($(window).width() > 797 && $(window).width() < 991) { $('input,select,textarea').not('.shorter-form').remove() } else { } </script>
删除type="javascript"。你不需要它。语法看起来不错。不要忘记包含 jquery 库（我认为您缺少一些宽度值，例如 990）。尝试并更新。
当然可以。感谢您花时间回答并确认我的代码。非常感谢！
嘿德克尔。澄清一下......如果这些文本区域不是.regular-form，这个脚本是否会删除所有输入、选择和文本区域？这样，如果脚本出现在网站的另一个页面上，并且该页面上还有其他表单元素，那么这些元素会从页面中删除吗？如果是这样，我将如何确保它只删除 .shorter-form 和 .shortest-form 项目？

【解决方案2】：

我不知道您是否需要考虑动态调整大小的窗口，所以一个简单的解决方案是这样的：

if($(window).width() > 900 && $(window).width() < 1200)
{
    $('.regular-form').prop('disabled', false);
}

【讨论】：