New to jQuery - having trouble finding out why an AJAX script works fine on one page, but not on ano-CodePudding

I'm new to jQuery so I suspect I'm missing something simple.. I have two pages, both using the same script.

Here it is:

$(document).ready(function() {;
    var url = document.getElementById("page_url");
    url.value = location.href;


    $('#my-form-button').on('click', function() {
        var url = $('#page_url').val();
        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!');               
            }   

        });     

    });

});

So all it's really doing is sending an AJAX form, with a small part in the beginning to record the URL to also send via AJAX. Here it is on the page working fine: https://store.melrosemac.com/iodyne-pro-data-48tb-details.html

But on another page, it's throwing an error in console like this:

Uncaught TypeError: Cannot set properties of null (setting 'value')
    at HTMLDocument.<anonymous> (mac-studio-m1-max-10-core-cpu-24-core-gpu-32gb-512ssd-details.html:1333:19)
    at c (jquery-1.10.2.min.js:4:26036)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4:26840)
    at Function.ready (jquery-1.10.2.min.js:4:3305)
    at HTMLDocument.q (jquery-1.10.2.min.js:4:717)

In the past I've seen these issues when I was trying to load the script before the DOM had loaded (like by putting it in the head) or before jQuery is, or if the wrong version of jQuery is being used. But this script is directly above the </body> just like on the other page, it's using the same jQuery file (1.1.0) even though there is another version of jQuery loaded on the page (just like the other page).

To be clear, this AJAX form still seems to work, but the part that stores the page URL and title in vars called 'url' & 'title' seems to be causing the issue.

I'm confused by this, I expected the script would perform the same way, especially a pretty simple part of it like this. What could cause this?

CodePudding user response：

Error is telling you that something is going on on the 1333 line of code. When you put the debugger there it will show you that your document.getElementById("page_url") is returning null, thus you cant set its value.

Gist: your webpage does not have element with id page_url