PHP表单提交防止跳转 实现提交后输入框标红2秒复位及提示求助

第一步：调整HTML代码 #

新增提示文本容器，用来显示提交后的"12345"提示：

<form action="mail.php" method="POST" onsubmit="return foo(this);">
    <input type="text" name="full_name" value="" required>
    <!-- 新增提示文本容器，默认隐藏 -->
    <p id="submit-tip" style="display:none;color:#ff3f4c;margin:5px 0 0 0;"></p>
    <button type="submit">submit form</button>
</form>

第二步：替换原有JavaScript代码 #

直接替换你原来的foo函数即可实现需求：

function foo(form){
    // 提前获取需要操作的元素
    const $input = $(form).find('input[name="full_name"]');
    const $tip = $('#submit-tip');
    
    // 提交后立即设置输入框样式、显示提示
    $input.css({
        "background-color": "#ffebed",
        "border": "2px solid #ff3f4c"
    });
    $tip.text('12345').show();

    $.ajax({
        url: $(form).attr('action'),
        type: 'POST',
        data: $(form).serialize(),
        success: (res)=>{
            // 原有成功逻辑保留
            console.log(res);
        },
        error: (err)=>{
            // 原有错误逻辑保留
            console.error(err);
        },
        complete: ()=>{
            // 2秒后恢复样式、隐藏提示、重置表单
            setTimeout(()=>{
                $input.css({
                    "background-color": "#fff",
                    "border": "1px solid #f4f4f4"
                });
                $tip.hide();
                form.reset();
            }, 2000);
        }
    });

    return false;
}

补充说明 #

如果你的输入框默认样式和上述恢复的样式不一致，把setTimeout里的css属性值改成你实际的默认值即可。如果不需要等AJAX请求完成才开始计时，把setTimeout这段代码移到AJAX请求外、$tip.text('12345').show();的后面即可。

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