function loginDB(tx)
         {
            var Username = document.getElementById("username").value;
          var Password = document.getElementById("password").value;
          tx.executeSql("SELECT * FROM SoccerEarth WHERE UserName='" + Username + "' AND Password= '" + Password + "'", [], renderList);

          }
         function renderList(tx,results) {
         if (results.rows.length > 0) {
           navigator.notification.alert("You are in!");
           $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page4" );
         }
         else
         {
           navigator.notification.alert("Incorrect Password, Please try again!");
            $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page3" );
         }
         }

<div data-role="page" id="page4" data-theme="d">
<div data-role="header">
    <a href="#page1" class="ui-btn ui-icon-home ui-btn-icon-left">Sign Out</a>
    <h1>SoccerMeet</h1>
</div>
<div data-role="main" class="ui-content">
    <ul data-role="listview" data-inset="true">

        <li>
            <a href="#page5" data-transition="slide">
                <img src="images/icon1.jpg">
                <h2>Search Soccer Events</h2>
                <p>Find soccer meets near you</p>
            </a>
        </li>
        <li>
            <a href="#page6" data-transition="slide">
                <img src="images/icon2.png">
                <h2>Create an Event</h2>
                <p>Have an event you would like to invite people to?</p>
            </a>
        </li>
        <li>
            <a href="#page5" data-transition="slide">
                <img src="images/icon4.png">
                <h2>Help Center</h2>
                <p>FAQ's and further guidance on the app</p
                        ></a>
        </li>
        <li>
            <a href="#page1" data-transition="slide">
                <img src="images/icon3.png">
                <h2>Settings</h2>
                <p>Make changes to the app</p
                        ></a>
        </li>
        <li>
            <a href="#page1" data-transition="slide">
                <img src="images/icon5.png">
                <h2>The Team</h2>
                <p>Meet the team behind the app, the co-founders, developers etc.</p
                        ></a>
        </li>
    </ul>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" data-icon="user">Profile</a></li>
                <li><a href="#page1" data-icon="location">Find Events</a></li>
                <li><a href="#" data-icon="calendar">Calendar</a></li>
                <li><a href="#" data-icon="info">Help Center</a></li>
                <li><a href="#page7" data-icon="camera">Camera</a></li>
            </ul>
        </div>
    </div>
</div>