Jeśli chcesz zapisywać dane z formularza bez odświeżania strony, możesz użyć technologii AJAX. AJAX to skrót od Asynchronous JavaScript and XML. Pozwala na asynchroniczne wysyłanie żądań HTTP do serwera i odbieranie odpowiedzi bez konieczności przeładowywania całej strony.
- Tworzymy naszą formę index.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<form method="POST" onsubmit="return sendData();">
<label>Name</label>
<input type="text" name="name" id="name">
<label>Age</label>
<input type="text" name="age" id="age">
<input type="submit" name="submit_form" value="Submit">
</form>
<div id="res" ></div>
</body>
</html>
2. Tworzymy plik ze skryptem o nazwie script.js
function sendData()
{
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
$.ajax({
type: 'post',
url: 'insert.php',
data: {
name:name,
age:age
},
success: function (response) {
$('#res').html("Name: " + name + " Age: " + age + " has been added to database");
}
});
return false;
}
3. Tworzymy plik .php gdzie dane będą zapisywane np. do bazy danych insert.php
<?php
$name = $_POST['name'];
$age = $_POST['age'];
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) { die("Connection failed: " . mysqli_connect_error());
}
$sql = "INSERT INTO MyGuests (name, age)
VALUES ('$name', '$age')";
if (mysqli_query($conn, $sql)) {}
mysqli_close($conn);
?>
