Please help with a feedback form. Everything seems right, but the data in the database are not sent. Can anyone help?

You need to create a feedback form for a site on PHP with fields Name, Surname, Telephone, Email, and Text field. The obtained data should be sent to the database via jQuery, as well as the ability to retrieve data from the database using jQuery. Here is the code.....run it all on Denver. Database and table created, but data is not sent back. Please help with data retrieval.



 <meta charset="UTF-8">
 <title>Test task</title>
 <link rel="stylesheet" href="style.css">


 the <h1>submission Form</h1>
 <div id="output"></div>
 <div class="form">
 <form action method="post" name="form">
 <input id="name" type="text" name="name" placeholder="Name" required="required">
 <input id="surname" type="text" name="surname" placeholder="last Name" required="required">
 <input id="tel" type="tel" name="tel" placeholder="+994XXXXXXXXX" required="required">
 <input id="email" type="email" name="email" placeholder="example@example.com" required="required">
 <textarea id="text" name="text" placeholder="Message"></textarea>
 <input id="submit" type="submit" value="Send">
</form>
</div>

 <script src="jquery-3.3.1.min.js"></script>
 <script src="form.js"></script>


$(document).ready(function(){
$("#submit").onclick(function(){
alert("Hello!");

 var name = $("#name").val();
 var surname = $("#surname").val();
 var tel = $("#tel").val();
 var email = $("#email").val();
 var text = $("#text").val();

$.ajax({
 method: "post",
 url: "main.php?",
 data: data
});
});
});

<?php
 $name = $_POST['name'];
 $surname = $_POST['surname'];
 $tel = $_POST['tel'];
 $email = $_POST['email'];
 $text = $_POST['text'];

 $connection = mysqli_connect("localhost", "root", "", "te_database");

 if(true) {
 mysqli_query($connection, "INSERT INTO `users` (`name`, `surname`, `tel`, `email`, `text`) VALUES ('$name', '$surname', '$tel', '$email', '$text')");
}
?>
June 3rd 19 at 19:24
5 answers
June 3rd 19 at 19:26
Solution
// Instead
$('#submit').onclick(function(){
//...
});

// Use this
$('form[name=form]').on('submit', function(event) {
event.preventDefault();
 // Form submission will work on the Send button, by pressing Enter
 // and will not reload the page when submitting
$.ajax({
 url: 'main.php',
 method: 'POST',
 // JQuery method to serialize the form (https://api.jquery.com/serialize/)
 data: $(this).serialize(),
 success: function() {
alert('Success');
},
 error: function() {
alert('Error');
}
});
});
Can you help with extracting the data from the database to the page in the same way? (Using jquery and php)
HTML:



 <meta charset="UTF-8">
 <title>Test task</title>
 <link rel="stylesheet" href="style.css">


 the <h1>submission Form</h1>
 <div class="form">
 <form action method="post" name="post_data">
 <input id="name" type="text" name="name" placeholder="Name" required="required">
 <input id="surname" type="text" name="surname" placeholder="last Name" required="required">
 <input id="tel" type="tel" name="tel" placeholder="+994XXXXXXXXX" required="required">
 <input id="email" type="email" name="email" placeholder="example@example.com" required="required">
 <textarea id="text" name="text" placeholder="Message"></textarea>
 <input id="submit" type="submit" value="Send">
</form>
</div>

 <div class="form">
 <form action method="get" name="get_data">
 <input id="get" type="submit" value="Get data">
 <div id="output">

</div>
</form>
</div>

 <script src="jquery-3.3.1.min.js"></script>
 <script src="form.js"></script>



JS:
$(document).ready(function(){

 //POST Function
 $('form[name="post_data"]').on('#post', function(event) {
event.preventDefault();

$.ajax({
 url: 'post.php',
 method: 'POST',
 data: $(this).serialize(),
 success: function() {
alert('Success!');
},
 error: function() {
alert('Error!');
}
});
});

//GET Function
$('form[name="get_data"]').on('#get', function() {

$.ajax({
 url: 'get.php',
 method: 'GET',
 success: function(response) {
$("#output").html(response);
}
});
});
});


PHP:
<?php
 $connection = mysqli_connect("localhost", "root", "", "te_database");

 $result = mysqli_query("SELECT * FROM data", $connection);

 $row = mysqli_fetch_array($result);
{
 print $row['id', 'name', 'surname', 'tel', 'email', 'text']."<br-->";
}
?>
- Lula.Schmi commented on June 3rd 19 at 19:29
June 3rd 19 at 19:28
$.ajax({
 method: "post",
 url: "main.php?",
 data: data
});


Here You send to the server data an undefined variable, respectively, nothing comes.

UPD:
$("#submit").onclick(function()
and in this line, use a non-existent function onclick, and you just .click

UPD2:
but this line is actually interesting:
if(true) {...

You managed to override the constant? ;)
How should the code look like to retrieve the data back to the page? What to write here:
$.ajax({
//?
}); - Lula.Schmi commented on June 3rd 19 at 19:31
June 3rd 19 at 19:30
Because you did not send

$.ajax({
 method: "post",
 url: "main.php?",
 data: {
 name: name,
 surname: surname,
 tel: tel
 email: email
 text: text
}
 });
June 3rd 19 at 19:32
odd too difficult, and even send data empty, much easier to be the same:
$(document).ready(function(){
 $("form").on('submit', function(e){
 e.preventDefault(); // here you left in the boot
 var data = $(this).serialize(); // then in one fell swoop get the form data
$.ajax({
 method: "post",
 url: "main.php?",
 data: data
});
});
});

In principle, to look into the console would be enough, as a candidate for the employee you should know such things as debugging in the browser console.
How to write display data to the page? - Lula.Schmi commented on June 3rd 19 at 19:35
, you must have the onsuccess handler in which the answer can be processed and output in the desired item. - Lula.Schmi commented on June 3rd 19 at 19:38
June 3rd 19 at 19:34
How to display data from database back to a page in a table?

Find more questions by tags jQueryHTML