页面加载后无法提交HTML表单，刷新后可正常提交的问题

我仔细看了你的代码，发现几个关键问题导致了这个怪异的现象，下面一步步帮你修复：

1. 致命语法错误：函数闭合括号位置错误 #

你的funComplaint函数里，在定义x.onreadystatechange回调后多写了一个闭合括号}，这直接把x.open()和x.send()踢出了函数体外！首次加载页面时，点击按钮执行funComplaint，实际只运行到回调定义就结束了，根本没发送请求。刷新后浏览器的缓存或解析机制可能“掩盖”了这个错误，但这是问题的核心。

2. 回调里的未定义变量错误 #

在onreadystatechange的else分支里，你直接用了msg变量，但这个变量只在请求成功的分支里定义。当请求还在处理中或状态错误时，msg是未定义的，会抛出错误阻塞后续逻辑。

3. jQuery Mobile页面生命周期适配问题 #

你用$(document).ready()移除按钮样式，但jQuery Mobile默认用AJAX加载页面，ready事件不会在AJAX加载的页面上触发。应该用jQuery Mobile专属的pagecreate事件来确保DOM操作在正确时机执行。

4. 事件绑定的优化建议 #

虽然你用了内联onClick，但在jQuery Mobile环境下，更推荐用事件委托绑定点击事件，避免AJAX加载带来的事件绑定失效问题。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="jquery.mobile-1.4.5/demos/_assets/css/jqm-demos.css">
    <script src="jquery.mobile-1.4.5/demos/js/jquery.js"></script>
    <script src="jquery.mobile-1.4.5/demos/_assets/js/index.js"></script>
    <script src="jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script>
        // 替换ready为jQuery Mobile的pagecreate事件
        $(document).on("pagecreate", function() {
            $('#submt4').removeClass('ui-btn');
            // 用事件委托绑定点击事件，替代内联onClick
            $('#submt4').on('click', funComplaint);
        });

        function funComplaint() {
            var name = document.getElementById("name").value;
            var mobile = document.getElementById("mobile").value;
            var vehno = document.getElementById("vehicleno").value;
            var complaint = document.getElementById("complaint").value;
            var letters = /^[A-Za-z, ]+$/;
            var numbers = /^[0-9]+$/;
            var alphanum = /^[0-9a-zA-Z]+$/;

            if (name == "" || mobile == "" || vehno == "" || complaint == "") {
                alert("Please fill all fields........");
                return false;
            }
            if (!name.match(letters)) {
                alert("Name must have alphabet characters only");
                document.getElementById('name').focus();
                return false;
            }
            if (!mobile.match(numbers)) {
                alert("Mobile number must have numeric characters only");
                document.getElementById('mobile').focus();
                return false;
            }
            if (mobile.length == 0 || mobile.length > 12 || mobile.length < 10) {
                alert("Mobile number should not be empty / length be between 10 to 12");
                document.getElementById('mobile').focus();
                return false;
            }
            if (!vehno.match(alphanum)) {
                alert("Vehicle number must have alphanumeric characters only");
                document.getElementById('vehicleno').focus();
                return false;
            }

            var x = new XMLHttpRequest();
            x.onreadystatechange = function() {
                if (x.readyState == 4) {
                    if (x.status == 200) {
                        var msg = x.responseText.trim();
                        if (msg == "Complaint Received") {
                            window.location = "home.html";
                        } else {
                            alert(msg);
                        }
                    } else {
                        // 请求失败时提示错误状态
                        alert("Request failed with status: " + x.status);
                    }
                }
            };
            // 修正括号位置，确保这两句在函数内部
            x.open("GET", "http://localhost:8087/CarRental/com/selcar/getComplaint.jsp?name=" + encodeURIComponent(name) + "&mobile=" + encodeURIComponent(mobile) + "&vehno=" + encodeURIComponent(vehno) + "&complaint=" + encodeURIComponent(complaint), true);
            x.send();
        }
    </script>
</head>
<body>
    <div class="center container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h2 align="center">COMPLAINTS</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="text" placeholder="Name" name="name" id="name"></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="text" placeholder="Mobile" name="mobile" id="mobile"></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><input type="text" placeholder="Vehicle No" name="vehicleno" id="vehicleno"></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><textarea rows="4" cols="50" name="complaint" id="complaint">Enter your complaint here...</textarea></div>
        </div>
        <div class="row">
            <div class="col-xs-12" align="center">
                <!-- 移除内联onClick -->
                <button class="btn btn-primary btn-lg " type="button" id="submt4">SUBMIT</button>
            </div>
        </div>
    </div>
</body>
</html>

额外优化说明 #

• 给GET请求参数加上encodeURIComponent()，避免特殊字符导致请求解析错误
• 简化了表单验证的逻辑，去掉空分支让代码更清爽
• 完善了请求失败的错误提示，方便后续排查问题

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