I'm trying to separate my code with the MVC pattern using AJAX, PHP, and JS
Let's jump right in ... ( I have been trying hours and researched all over the net until i got annoyed and decided to ask for help )
login.html
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login Page</title>
<LINK rel="stylesheet" type="text/css" href="/coupons/css/style.css">
<script src="/coupons/js/controllerJS.js" type="text/javascript"></script>
<script src="/coupons/js/valider.js" type="text/javascript"></script>
<style>
a {
border: 1px solid green;}
</style>
</head>
<body >
<div id="divLogin">
<h1>Login Page</h1>
<h2>Please Fill in the following form</h2>
<form ENCTYPE="multipart/form-data" name="fLogin" id="fLogin" action="" method="POST">
<table id="tForm" border="1">
<tr>
<td><label for="email">Email Address</label></td>
<td> <input type="text" autocomplete="off" tabindex="1" class="txtfield" id="email" name="email"></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" autocomplete="off" tabindex="2" class="txtfield" id="password" name="password"></td>
</tr>
<tr>
<td> <input type="submit" class="btn" id="btnSub"></td></tr>
</table>
</form>
</div>
</body>
</html>
So now back to the JS file which will act as controller AJAX
controllerJS,js
Code:
$(function(){
$('#fLogin').submit(function(event){
// On desactive le comportement par default du navigateur
// qui consiste a appeller la page action du formulaire
alert("form had been submitted for review");
event.preventDefault();
var data = "email="+$('#email').val()+"&password="+$('#password').val()+"&action=X";
alert(data);
$.ajax({
type: "POST",
url: "bin/controller/controller.php",
data: data,
success: function(data, statusText, jqXHR) {
alert(jqXHR.responseText);
var xmlDoc=jqXHR.responseXML;
$('#login').html(xmlDoc.getElementsByTagName("membre")[0].firstChild.nextSibling.firstChild.nodeValue)
.hide()
.fadeIn(3500).animate({right:'400px', top:'20px'}, 3500).css({"color":"red","font-size":"25px"});
}
});
return false; // Prevents browser from loading a new page
});
});
Now the PHP File
controller.php
PHP Code:
<?php
session_start();
require("../../paramDB/connexion.php");
$table="membre";
// Fonction dans le controlleur envoie le message sous forme XML a la Vue
function listeXML($req){
header ("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>";
echo "<xml>";
while ($row = mysql_fetch_assoc($req))
{
echo "<membre>";
echo "<userID>$row[userID]</userID>";
echo "<username>$row[username]</username>";
echo "<password>$row[pass]</password>";
echo "<AccountType>$row[aType]</AccountType>";
echo "</membre>";
}
echo "</xml>";
}
$action=$_POST['action'];
switch($action){
case "X" :
mysql_select_db($sql_bdd,$db_link);
$requete="SELECT * FROM $table";
$req=mysql_query($requete,$db_link) or die(mysql_error());
listeXML($req);
break;
}
?>
This form works properly... but it doesn't validate ...
So where is my problem ? Please continue ... as I explain ...
I'm trying to have another form validate and go though the same file
controllerJS.js
Now this form validates but nothing hapens and i'm lost after having tring so many different things.
Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="/coupons/js/controllerJS.js" type="text/javascript"></script>
<script src="/coupons/js/valider.js" type="text/javascript"></script>
<style>
.valid{
border: #0C3 solid 3px;
}
.invalid{
border:#C00 solid 3px;
}
div#formReg td>input {
line-height: 1em;
width: 280px;
}
h1 {
text-align: center;
margin: 0px;
}
div#formReg{
position: relative;
margin : 20px 100px; 0 0;
}
div#formReg td label{
background-color:#FFFF66;
margin:8px;
width:140px;
}
</style>
</head><div id="content" >
<!-- CONTENT -->
<div id="formReg">
<h1>Creation de compte utilisateur</h1>
<form ENCTYPE="multipart/form-data" id="ajouterform" name="ajouterform" action="" method="post">
<table>
<tr >
<td class='titre' colspan = '2'></td>
<td class="Valogo"> <img src="" name="exit_button" width="20px" height="20px" ></td>
</tr>
<tr>
<td ><label for="userN">Nom Usager :</label></td>
<td ><input class="txtField" name="userN" type="text" id="userN" ></td>
<td><img src="" id="i1" width="20px" height="20px" ></td>
</td>
</tr>
<tr>
<td ><label for="pass">Mot de passe :</label></td>
<td><input class="txtField" name="pass" type="password" id="pass"></td>
<td><img src="" id="i2" width="20px" height="20px" ></td>
</tr>
<tr>
<td><label for="cpass">Comfirmation :</label></td>
<td><input class="txtField" name="cpass" type="password" id="cpass"></td>
<td><img src="" id="i3" width="20px" height="20px" ></td>
</tr>
<tr height ="20">
<td style="border:none">
</tr>
<tr>
<td><label for="nom"> Nom :</label></td>
<td><input class="txtField" name="nom" type="text" id="nom"></td>
<td><img src="" id="i4" width="20px" height="20px" ></td>
</tr>
<tr>
<td ><label for="prenom">Prenom :</label> </td>
<td><input class="txtField" name="prenom" type="text" id="prenom"></td>
<td><img src="" id="i5" width="20px" height="20px" ></td>
</tr>
<tr>
<td><label for="tel" > Téléphone #: </label></td>
<td><input class="txtField" name="tel" type="text" id="tel"></td>
<td><img src="" id="i6" width="20px" height="20px" ></td>
</tr>
<tr>
<td><label for="adresse"> Adresse : </label></td>
<td><input class="txtField" name="adresse" type="text" id="adresse"></td>
<td><img src="" id="i7" width="20px" height="20px" ></td>
</tr>
<tr>
<td ><label for="ville"> Ville : </label></td>
<td><input class="txtField" name="ville" type="text" id="ville"></td>
<td><img src="" id="i8" width="20px" height="20px" ></td>
</tr>
<tr>
<td ><label for="prov"> Province : </label></td>
<td><input class="txtField" name="prov" type="text" id="prov"></td>
<td><img src="" id="i9" width="20px" height="20px" ></td>
</tr>
<tr>
<td ><label for="country"> Pays : </label></td>
<td><select class="txtField" id="country" name="country">
<option value="" SELECTED>Select One</option>
<option value="af" >Afghanistan</option>
<option value="ax" >Aland Islands</option>
<option value="al" >Albania</option>
<option value="dz" >Algeria</option>
<option value="as" >American Samoa</option>
<option value="ad" >Andorra</option>
<option value="ao" >Angola</option>
<option value="ai" >Anguilla</option>
<option value="aq" >Antarctica</option>
...Have to cut the post in 2 as i go over 20000 caracters code will folow in post number 2