Hello i have look for a lot of tuto about how to do a good formulaire with php and ajax and i actually try to start from a code that a friend gave me. i actually succes to send the request but it looks like the data that i get are empty ... may you have a look and tel me if i have an error or something ?
Formulaire.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<form id="formulaire" name="form1" method="get">
<p class="titre">Coordonnées</p>
<label>Nom : </label>
<input type="text" name="nom" size="30" /><br />
<label>Prenom : </label>
<input type="text" name="prenom" size="30" /><br />
<label>Adresse mail : </label>
<input type="text" name="mail" size="30" /><br />
<label>Telephone : </label>
<input type="text" name="telephone" size="30" /><br />
<label>Code postal : </label>
<input type="text" name="codepostal" size="30" /><br />
</form>
<img src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Service/edi.jpg" style="cursor:pointer; width:50px;"onclick="Formulaire();">
<script type="text/javascript">
function Formulaire()
{
var nom = $(document).find(".champ[name=nom]").val();
var prenom = $(document).find(".champ[name=prenom]").val();
var mail = $(document).find(".champ[name=mail]").val();
var telephone = $(document).find(".champ[name=telephone]").val();
var codepostal = $(document).find(".champ[name=codepostal]").val();
var regex = new RegExp("[^a-zA-Z_éàèôïâê@. 0-9]","i");
var regextel = new RegExp("#^0[1-68]([-. ]?[0-9]{2}){4}$#");
var regexmail = new RegExp("^([a-zA-Z0-9]+(([\.\-\_]?[a-zA-Z0-9]+)+)?)\@(([a-zA-Z0-9]+[\.\-\_])+[a-zA-Z]{2,4})$");
/*if(regex.test(nom) == true || regex.test(prenom) == true || regexmail.test(mail) == false || regex.test(telephone) == true || regex.test(codepostal) == true ||
nom == "" || prenom == "" || mail == "" || telephone == "" || codepostal == "")
{
alert ("Veuillez remplir tous les champs correctement");
}
else
{*/
$.ajax({type: "GET", url: "http://formatfactory.biz/lib/php/form2.php",data: "idcrea=vengeance&nom="+nom+"&prenom="+prenom+"&mail="+mail+"&telephone="+telephone+"&codepostal="+codepostal,success: function(html)
{
alert(html);
}
});
//}
}
</script>
</body>
</html>
Form2.php
<?php
//Connexion à la DB avant d'effectuer notre requête
require_once ('connect.php');
$nom = isset($_POST['nom']) ? $_POST['nom'] : "";
$prenom = isset($_POST['prenom']) ? $_POST['prenom'] : "";
$mail = isset($_POST['mail']) ? $_POST['mail'] : "";
$codepostal = isset($_POST['codepostal']) ? $_POST['codepostal'] : "";
$telephone = isset($_POST['telephone']) ? $_POST['telephone'] : "";
try {
$sql = "INSERT INTO vengeance (nom, prenom, mail ,telephone, codepostal) VALUES ('".$nom."','".$prenom."','".$mail."','".$telephone."','".$codepostal."')";
// On exécute la requête
$req = $db->exec($sql);
$db = null;
}
catch(PDOException $e)
{
echo "Erreur";
}
?>
Here are my proposals.
Change this line:
<form id="formulaire" name="form1" method="get">
to:
<form id="formulaire" name="form1" method="post">
If you want an image as submit button, then you have to use:
<input
type="image"
src="http://slpubmedias.tf1.fr/test_nocache/test_jf/Service/edi.jpg"
style="cursor:pointer; width:50px;">
and don't call the function with onclick event from there. You're using jQuery. Just place the input type="image" inside the form, before the closing </form> tag.
Don't name your JavaScript functions with capital letter, unless they are constructor functions. You're breaking the conventions. So don't use:
function Formulaire()
Instead use something like:
function envoyerFormulaire()
or
function sendForm()
In your function you are trying to get the value of an element with the CSS class champ and value "nom" for the attribute name:
var nom = $(document).find(".champ[name=nom]").val();
But your input fields don't have the class champ. That is why you get empty values.
Here is another way to submit the form:
$(document).ready(function () {
$('#formulaire').submit(function (event) { // get the form with id formulaire
event.preventDefault(); // prevent sending the form by the browser
$.ajax({
type: "POST",
url: "http://formatfactory.biz/lib/php/form2.php",
data: $('#formulaire').serialize() // serialize the form
})
.done(function (data) {
// do something if form sent
})
.fail(function (err) {
// do something if submit failed
});
});
});
When using jQuery this is the most common way to submit a form per AJAX.
As you see, there is no need to get the value of every single field manually.
Bonne chance!