页面存在两个相同表单时，JavaScript submit函数仅生效第一个的解决方法

你猜的完全正确！问题根源就是没有限定操作的范围——当页面存在多个同类型表单时，你的代码里直接用全局类选择器$('.store-search-postcode')会选中页面上所有匹配的输入框，所以只会对第一个表单的元素生效，第二个表单的提交逻辑自然没法正确触发。

修复思路 #

核心就是用this关键字绑定当前提交的表单，所有操作都限定在这个表单内部：

• 在submit回调里，this指向当前正在提交的表单元素，用$(this)把它转成jQuery对象
• 用.find()方法在这个表单内部查找对应的输入框，而不是全局查找
• 后续的取值、修改值操作都基于这个表单内的输入框，就不会影响其他表单了

修改后的代码 #

$('.store-search-form').submit(function() {
    // 获取当前提交的表单对象
    const $currentForm = $(this);
    // 只在当前表单内查找输入框
    const $postcodeInput = $currentForm.find('.store-search-postcode');
    // 获取当前输入框的值
    let postcodeinput = $postcodeInput.val();
    
    // 移除空格
    postcodeinput = postcodeinput.replace(/\s/g, '');
    
    // 验证长度并裁剪
    if (postcodeinput.length >= 5 && postcodeinput.length <= 7) {
        // 只修改当前表单内输入框的值
        $postcodeInput.val(postcodeinput.substring(0, postcodeinput.length - 3));
    }
});

额外优化建议 #

可以给输入框的默认提示用HTML5的placeholder属性代替JS事件，更简洁且符合原生规范：

<input type="text" name="d" placeholder="Enter Postcode..." class="find-form-input field store-search-postcode" />

这样就不需要onclick、onfocus、onblur这些事件处理了，浏览器原生支持占位符功能。

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