jQuery新手求助：AJAX脚本在部分页面报空值赋值错误的原因

错误根源 #

报错的核心原因是：报错页面中不存在id为page_url的DOM元素，或者该元素的id拼写存在大小写/字符差异。

当执行document.getElementById("page_url")时，找不到对应元素就会返回null，后续尝试给null设置value属性，就会触发Cannot set properties of null的类型错误。

排查步骤 #

• 打开报错页面的开发者工具（F12），切换到Elements标签，搜索page_url，确认是否存在匹配id的元素。
• 检查元素id的拼写是否完全一致（注意区分大小写，比如Page_URL和page_url会被视为不同id）。

修复方案 #

方案1：补全缺失的DOM元素 #

在报错页面的表单中添加id为page_url的隐藏输入框：

<input type="hidden" id="page_url" name="page_url">

这样脚本就能正常找到元素并设置当前页面URL。

方案2：简化脚本，移除对DOM元素的依赖 #

直接在AJAX请求中传入location.href，无需通过隐藏输入框中转，代码更简洁可靠：

$(document).ready(function() {
    $('#my-form-button').on('click', function() {
        var phone_number= $('#phone_number').val();
        var email_id= $('#email_id').val();
        var message= $('#message').val();
        var title = $('title').text();

        //send to formspree via ajax
        $.ajax({
            url:'https://formspree.io/f/xpzezajg',
            method:'POST',
            data:{            
                email: email_id,
                phone: phone_number,
                message: message,
                url: location.href, // 直接传入当前页面URL
                title: title,
            },
            dataType:"json",
            success:function() {
                alert('your mail has been sent!');               
            }   
        });     
    });
});

方案3：添加空值判断，避免报错（兼容原有逻辑） #

如果需要保留隐藏输入框的逻辑，可添加判断确保元素存在后再赋值：

$(document).ready(function() {
    var urlInput = document.getElementById("page_url");
    // 先判断元素是否存在
    if (urlInput) {
        urlInput.value = location.href;
    }

    $('#my-form-button').on('click', function() {
        // 同样判断元素是否存在，不存在则直接用location.href
        var url = $('#page_url').val() || location.href;
        var phone_number= $('#phone_number').val();
        var email_id= $('#email_id').val();
        var message= $('#message').val();
        var title = $('title').text();

        //send to formspree via ajax
        $.ajax({
            url:'https://formspree.io/f/xpzezajg',
            method:'POST',
            data:{            
                email: email_id,
                phone: phone_number,
                message: message,
                url: url,
                title: title,
            },
            dataType:"json",
            success:function() {
                alert('your mail has been sent!');               
            }   
        });     
    });
});

内容的提问来源于stack exchange，提问作者little tiny man