$(function () {
$(
"#contactForm input,#contactForm textarea,#contactForm button"
).jqBootstrapValidation({
preventSubmit: true,
submitError: function ($form, event, errors) {
// additional error messages or events
},
submitSuccess: function ($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#number").val();
var city = $("input#city").val();
var qualification = $("input#qualification").val();
var about = $("textarea#about").val();
var reason = $("textarea#reason").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(" ") >= 0) {
firstName = name.split(" ").slice(0, -1).join(" ");
}
alert("Fuck " + $("input#name").val());
$this = $("#sendMessageButton");
$this.prop("disabled", true); // Disable submit button until AJAX call is complete to prevent duplicate messages
$.ajax({
url: "/assets/mail/register.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
city: city,
qualification: qualification,
about: about,
reason: reason,
},
cache: false,
success: function () {
// Success message
$("#success").html("<div class='alert alert-success'>");
$("#success > .alert-success")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-success").append(
"<strong>Your message has been sent. </strong>"
);
$("#success > .alert-success").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
error: function () {
// Fail message
$("#success").html("<div class='alert alert-danger'>");
$("#success > .alert-danger")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-danger").append(
$("<strong>").text(
"Sorry " +
firstName +
", it seems that my mail server is not responding. Please try again later!"
)
);
$("#success > .alert-danger").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
complete: function () {
setTimeout(function () {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
},
});
},
filter: function () {
return $(this).is(":visible");
},
});
$('a[data-toggle="tab"]').click(function (e) {
e.preventDefault();
$(this).tab("show");
});
});
$("#name").focus(function () {
$("#success").html("");
});
PHP Code
<?php
if(empty($_POST['name']) ||
empty($_POST['number']) ||
empty($_POST['qualification']) ||
empty($_POST['city']) ||
empty($_POST['about']) ||
empty($_POST['reason']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "<script>alert(No arguments Provided!);</script>";
return false;
}
echo "<script>alert(Come On);</script>";
?>
From the HTML Input views, I'm successfully fetching the data. But the code in PHP file is not running for some reason.
The ajax code shows "message was sent" which is only displayed if the data transfer is successful but the PHP code isn't running
i want to add the data inside the ajax code into MySQL database and for that i need to transfer the data into the PHP file
Your PHP script gets triggered, or at least the XHR request gets processed by your web server and it returns status 200.
This is indicated by your own statement:
The ajax code shows "message was sent" which is only displayed if the data transfer is successful
While you are correct that the message will be displayed only if the data transfer is successful, I am not sure you understand which transfer.
With XHR you do a request from the browser to a web server. When that request has an HTTP Status Code 200 response - that's success => your message gets rendered.
Youralert(Come On);
doesn't get rendered in your browser because you never work with the returned data. Your "success" event handler doesn't take into account returned data - only your logic defined in the JS gets processed.
I suggest you alter your logic a bit:
PHP script:
<?php
if(empty($_POST['name']) ||
empty($_POST['number']) ||
empty($_POST['qualification']) ||
empty($_POST['city']) ||
empty($_POST['about']) ||
empty($_POST['reason']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
$response = array (
"status" => "fail",
"message" => "No arguments provided"
);
return false; // This is pointless
}
else{
$response = array (
"status" => "success"
);
}
echo json_encode ( $status );
?>
Then on the JS end, process the actual response from the PHP script and filter based on the response status message:
success: function (response) {
if ( response->status == "fail" ) {
// Fail message
$("#success").html("<div class='alert alert-danger'>");
$("#success > .alert-danger")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-danger").append(
$("<strong>").text(
"Sorry " +
firstName +
", it seems that my mail server is not responding. Please try again later!"
)
);
$("#success > .alert-danger").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
}
if ( response->status == "success" ) {
// Success message
$("#success").html("<div class='alert alert-success'>");
$("#success > .alert-success")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-success").append(
"<strong>Your message has been sent. </strong>"
);
$("#success > .alert-success").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
}
I hope you get the point :)
The response from an AJAX request is not automatically executed. If you want it to be executed, you need to add it to the DOM in yoursuccess
function.
success: function (response) {
$('body').append(response); // execute the returned script.
// Success message
$("#success").html("<div class='alert alert-success'>");
$("#success > .alert-success")
.html(
"<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×"
)
.append("</button>");
$("#success > .alert-success").append(
"<strong>Your message has been sent. </strong>"
);
$("#success > .alert-success").append("</div>");
//clear all fields
$("#contactForm").trigger("reset");
},
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
DBMS is a database management system. It is designed to change, search, add and delete information in the database. There are many DBMSs designed for similar purposes with different features. One of the most popular is MySQL.
It is a software tool designed to work with relational SQL databases. It is easy to learn even for site owners who are not professional programmers or administrators. MySQL DBMS also allows you to export and import data, which is convenient when moving large amounts of information.
https://www.mysql.com/
Bootstrap is not exclusively a CSS framework, but its most popular features are CSS-centric. These include a powerful grid, icons, buttons, map components, navigation bars, and more.
https://getbootstrap.com/
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to the Q&A site for web developers. Here you can ask a question about the problem you are facing and get answers from other experts. We have created a user-friendly interface so that you can quickly and free of charge ask a question about a web programming problem. We also invite other experts to join our community and help other members who ask questions. In addition, you can use our search for questions with a solution.
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.