Je suis vraiment nouveau sur AJAX / jQuery et PHP, et j'essaie de travailler sur un petit projet qui écrit votre poids quotidien sur un Db qui est ensuite affiché plus tard avec des graphiques, etc.
Je voudrais que lorsque l'utilisateur soumet le formulaire pour son poids, il affiche un message contextuel, mais pour une raison quelconque, le script AJAX / Jquery ne semble rien faire avec le fichier php, donc aucune information n'est ajoutée dans le base de données.
Voici le formulaire HTML: (index.html)
<form id="ajax-form" method="post" action="connection.php">
<div class="columns field">
<div class="column control is-half is-offset-one-quarter">
<input
class="input"
id="weight"
name="weight"
type="text"
placeholder="Enter your weight for the day"
/>
</div>
</div>
<div class="center-test">
<div class="field">
<div class="control">
<span class="select">
<select name="person">
<option value="Ayush">Ayush</option>
<option value="Sheri">Sheri</option>
</select>
</span>
</div>
</div>
</div>
<input type="date" name="weightdate" id="weightdate" />
<div class="field column is-half is-offset-one-quarter">
<button
type="submit"
id="submit"
name="submit"
class="button is-primary"
>
Submit
</button>
</div>
</form>
<div id="error_message" class="text-danger"></div>
<div id="success_message" class="text-success"></div>
AJAX / jQuery: (à l'intérieur de index.html)
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var weight = $("#weight").val();
var person = $("#person").val(); // You miss this
var weightdate = $("#weightdate").val(); // You miss this
if (weight == "" || person == "" || weightdate == "") {
$("#error_message").html("All Fields are required");
} else {
$("#error_message").html("");
$.ajax({
url: "connection.php",
method: "POST",
data: {
weight: weight,
person: person, // Add this
weightdate: weightdate, // Add this
},
success: function (data) {
$("form").trigger("reset");
$("#success_message").fadeIn().html("data");
setTimeout(function () {
$("#success_message").fadeOut("Slow");
}, 2000);
},
});
}
});
});
PHP: (connection.php)
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
include_once 'dbconnect/db_info.php';
$weight = $_POST['weight'];
$person = $_POST['person'];
$date = $_POST['weightdate'];
$formatDate = date("d/m/y", strtotime($date));
//echo $formatDate;
if(date("m", strtotime($date)) == date("01")) {
$sql = "INSERT INTO WeightTracker (person, kg, weight_date, date_month) VALUES ('$person', '$weight', '$formatDate', 'January');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
elseif(date("m", strtotime($date)) == date("04")) {
//echo working;
$sql = "INSERT INTO WeightTracker (person, kg, weight_date, date_month) VALUES ('$person', '$weight', '$formatDate', 'April');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
else {
$sql = "INSERT INTO WeightTracker (person, kg, weight_date) VALUES ('$person', '$weight', '$date');";
#$result = mysqli_query($conn, $sql);
$result = mysqli_query($conn, $sql);
}
Quelqu'un a-t-il une idée? Lorsque je supprime le code AJAX / jQuery, le formulaire se soumet avec succès et le fichier connection.php écrit dans la base de données sans aucun problème.
3 réponses
La plupart du problème a été résolu dans les commentaires. Le problème (comme décrit dans les commentaires) était une erreur PHP Undefined index
sur cette ligne:
$person = $_POST['person'];
Comme je l'ai mentionné dans un commentaire précédent: votre ID de personne ne contient pas l'identifiant de personne attendu. Cela signifie que ce Javascript:
var person = $("#person").val();
Est en fait indéfini, donc il n'y a pas de champ person
POSTÉ à votre PHP, donc quand vous essayez de l'utiliser comme $_POST['person']
, vous obtiendrez une erreur.
Pour résoudre ce problème, ajoutez simplement l'identifiant que votre Javascript utilise pour trouver la personne:
<select name="person" id="person">
Votre problème réside ici.
include_once 'dbconnect/db_info.php';
Changez-le en quelque chose comme
realpath('__DIR__'.'/dbconnect/db_info.php');
J'espère que cela résoudra votre problème.
Les données que vous donnez pour la demande POST sont simplement weight
, il n'y a pas de données person
et weightdate
.
var weight = $("#weight").val();
var person = $("#person").val(); // You miss this
var weightdate = $("#weightdate").val(); // You miss this
if (weight == "" || person == "" || weightdate == "") {
$("#error_message").html("All Fields are required");
} else {
// Your code :)
}
Et le data
,
$.ajax({
url: "connection.php",
method: "POST",
data: {
weight: weight,
person: person, // Add this
weightdate: weightdate // Add this
},
success: function(data) {
$("form").trigger("reset");
$("#success_message")
.fadeIn()
.html("data");
setTimeout(function() {
$("#success_message").fadeOut("Slow");
}, 2000);
}
});
Questions connexes
De nouvelles questions
php
PHP est un langage de script largement utilisé, de haut niveau, dynamique, orienté objet et interprété, principalement conçu pour le développement Web côté serveur. Utilisé pour les questions sur le langage PHP.