Problème de formulaire avec JQuery Mobile

Bonjour chères amies développeur,
Je suis un nouveau développeur de jquery mobile, j’ai un problème avec le code ci-dessous, étant donnée que quand je rempli le formulaire (index.html) et l’envoyer vers (action.php), j’ai la sortie qui affiche le code du deuxième fichier (action.php).
Fichier index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html> 
<html> 
<head> 
  <meta name=viewport content="user-scalable=no,width=device-width" />
  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
  <script src=jquery.js></script>
  <script src=jquery.mobile/jquery.mobile.js></script>
</head> 
    <body> 
<div data-role=page id=home>
  <div data-role=header>
    <h1>Home</h1>
  </div>
  <div data-role=content>
    <p> Window content </p>
    Name : <input type=text /> <br />
  </div>
</div>
</body>
</html>
<script>
 
$("input").bind ("change", function (event)
{
  var name = $(this).val ();
  $.ajax (
  { 
   url : "action.php", 
    data : { name : name },
    complete : function (xhr, result)
 
    {
      if (result != "success") return;
      var response = xhr.responseText;
     $("#home div:jqmData(role=content)").append (response);
    }
  });   
});
</script>

Fichier action.php

Code:

1
2
3
4
<?
$name = $_REQUEST["name"];
echo utf8_encode ("<p> The name entered is $name </p>");
?>