Jquery mobile page not opening php file

Question

am trying to submit a form from a jquery-mobile page to a php file for processing but whenever i press the submit button it displays an "Error Loading Page" dialog.

I have tried looking at the w3schools website form submission example and am pretty sure my code is the same.This is my code.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery Mobile</title>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- Include the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style>
  .ui-content {
  margin-top:150px;
  margin-left:500px;
  margin-right:500px;
}

/* For mobile screens */
@media screen and (max-width: 480px) {
    .ui-content{
        margin:0px;
}
</style>
</head>

<body>
<div data-role="page" id="chat">
<div data-role="header"><h1>Welcome to the Streamline Chat App</h1></div>
  <div data-role="main" class="ui-content">
   <h3>Select a username to continue</h3>
    <form method="post" action="login.php">
     <label for="username" >Username:</label>
     <input type="text" id="username" name="username">
     <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>
</body>
</html>

login.php

<?php
 $username = $_POST['username'];

 echo $username;
?>

Am wondering if am doing something wrong. Please help me out. Both files are in the same directory

Are the index.html and the login.php in the same directory? Also, you should check to make sure the username is posted first: `if(isset($_POST["username"]){`... — jakecyr, Mar 15 '17 at 14:36

score 0 · Accepted Answer · edited May 23 '17 at 10:30

0

I got the answer from another post here

Just needed to add data-ajax="false" to the form tag

<form method="post" action="login.php" data-ajax="false">
  <label for="username" >Username:</label>
  <input type="text" id="username" name="username">
  <input type="submit" data-inline="true" value="Submit">
</form>

edited May 23 '17 at 10:30

Community

1
1

answered Mar 15 '17 at 15:05

Douglas Hosea

1,002
13
30

Jquery mobile page not opening php file

1 Answers1