0

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).

jpl42
  • 113
  • 1
  • 4
  • And what is the return of your ajax call? Do you get something? – Michael Sep 15 '16 at 12:51
  • The form seems to ignore the AJAX and tries to post to itself (signin.html, not signin.php on the remote server). Also, the only console output is `TypeError: document.getElementById(...) is null`. – jpl42 Sep 15 '16 at 12:53
  • your button is not a submit button or haven't a click function to call loginFunction – Michael Sep 15 '16 at 12:56
  • Edited HTML in the question to reflect change but to no avail. – jpl42 Sep 15 '16 at 13:01
  • – Michael Sep 15 '16 at 13:03
  • Still POSTs to itself. Where might be the best place to add `prevent default` to stop the forms default action? – jpl42 Sep 15 '16 at 13:06
  • check the second answer here. http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form – Michael Sep 15 '16 at 13:11
  • Have updated my question to reflect further changes. Am I maybe missing something obvious like including the AJAX/Jquery libs or something? – jpl42 Sep 15 '16 at 13:31
  • for sure you need to include lib for jquery, You probably already get an error in the console if it's the case. – Michael Sep 15 '16 at 13:34

1 Answers1

0

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>
jpl42
  • 113
  • 1
  • 4