Question

Trying to do a simple web app with jquery mobile. I have put together a simple log in form with ajax results to be displayed. Problem is my ajax is not getting a result even when I alert out to see if the URL is valid. Is there something special I need to do using jquery mobile?

Any thoughts/answers much appreciated!

Here is the HTML code:

    <div data-role="page" id="login" data-theme="a" data-add-back-btn="true">
        <div data-role="header">
            <h2>Log in</h2>
        </div>
            <div data-role="content" data-theme="a" data-add-back-btn="true">   
                <form action="mobilelogin.php" method="post">
                  Email: <input type="text" name="email" id="useremail">
                  Password:  <input type="password" name="password" id="userpassword">
                <input type="submit" value="Enter">
                </form>
                <div id="loginresult"></div>
            </div>
        <div data-role="footer"><h4>Chris Sherwood Design 2012</h4></div>
    </div>

Js file:

$(document).ready(function() {

  $('form').submit(function() {
  var emailchecker = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var email = $("#useremail").val();
  var userpassword = $("#userpassword").val();
  var checklength = userpassword.length;

  if(email == ""){
    alert('Please fill in email field');
     return false;
  }else if(userpassword == ""){
    alert('Please fill in password field');
     return false;
  }else if((!emailchecker.test(email))){
    alert('Please use a valid email');
     return false;  
  }else if(checklength < 6 || checklength > 6){
    alert('Password must be six characters');
     return false; 
  }else{
  var datastring = $(this).serialize();
  alert(datastring);
  return false;
        $.ajax({
        type: "POST",
        url: "mobilelogin.php",
        data: datastring,
        success: function(data){
        $("#loginresult").html(data);
        }
        });

  }

  });

PHP

<?php
echo 'nothing special here...';
?>

Answer 1

From your code:

return false;
    $.ajax({
    type: "POST",
    url: "mobilelogin.php",
    data: datastring,
    success: function(data){
    $("#loginresult").html(data);
    }
    });

You are returning false before the ajax request.

EDIT (assumed it was a simple mistake, have added more explanation)

You will need to either move that return false; to below the ajax() call, or use the event object like so:

$('form').submit(function(e) {
    e.preventDefault();

The problem with just using return false; is that if there is an error in something before it it will not stop the default action. So if your ajax request errors it will miss the return false; and start loading the action page.