How to POST form data to external PHP file using Javascript (Ajax)?

Question

I am creating a web app with a login function. The server-side works (PHP file takes post input, checks it against user database and either returns Error:Missing-Input , Error:Invalid-Credentials , or Success:Logged-In ). This works perfectly when just simply POSTing to the PHP file, but I need the app to silently POST the data when the form is submitted, then either alert 'Try Again' or change the page to the application's home screen ( app/index.html ). The Javascript I've used (and changed, and changed), is below (form:

var frm = $('#signinform');
frm.submit(function (ev) {
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function(data) {
            if(data.includes("Success:Logged-In")){
                localStorage.login="true";
                window.location.href = "app/index.html";
            }else if(data.includes("Error:Missing-Input")){
                alert("Login error! You may have missed one of the fields.");
            }else if(data.includes("Error:Invalid-Credentials")){
                alert("Login error! You have entered your email or password incorrectly.");
            }
        }
    });
        ev.preventDefault();
});

The HTML form is as follows (signin.html):

<div id="container">
    <h1>Sign In</h1><hr><br><br>
    <form id="signinform" method="post" action="https://somedomain.com/api/endpoint/signin.php">
        <div style="text-align:left; margin-left: 15px;">Email:</div><input name="email" id="email" type="email" placeholder="email@domain.com" required="required" /><br><br>
        <div style="text-align:left; margin-left: 15px;">Password:</div><input name="password" id="password" type="password" placeholder="*********" required="required" /><br>
        <br><br><input type="submit" id="login" value="Submit" /><br><br>
        <p>No account? <a href="signup.html">Click here to sign up!</a></p>
    </form>
</div>
<script src="formhandle.js"></script>

I know this is a duplicate of a million and one other questions, blog posts, tutorials, etc. I just cannot make anything work.

EDIT: The current JS code seems to be ignored. The form posts to itself and ignores the AJAX url. I've tried including the <script> tag at the top and bottom of the HTML. PreventDefault in the JS didn't make any difference either.

EDIT 2: Various changes to JS & HTML to show what more I've tried, though this now just goes straight to the remote server (still ignoring preventdefault).

Answer 1

The code in the question now works as expected. I was missing the jquery lib declaration, I've seen many questions online relating to this problem, having perfectly written Javascript but the code for some reason fails. If any such people browse this post, the fix is:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

At the bottom of the HTML page before

<script src="myScript.js"></script>
</body>
</html>