0
0
sandip
answered Apr 28 '23 00:00
To submit a form with AJAX and pass form data to PHP without reloading the page, you can use jQuery $.ajax() function. Here's an example code snippet that shows how to do this:
HTML form:
<form id="myForm">
<input type="text" name="name">
<input type="email" name="email">
<button type="submit">Submit</button>
</form>
JavaScript code:
javascript
Copy code
$(document).ready(function() {
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
url: 'submit.php',
type: 'POST',
data: $(this).serialize(),
success: function(response) {
console.log(response);
},
error: function() {
console.log('Error occurred while making Ajax request.');
}
});
});
});
In the above code, we're attaching an event listener to the form submit event using jQuery's .submit() function. The e.preventDefault() function call prevents the form from being submitted and the page from reloading.
In the $.ajax() function, we specify the URL of the PHP file to which we want to submit the form data, the HTTP method (in this case, POST), and the form data to be submitted using $(this).serialize().
In the PHP file "submit.php", you can retrieve the form data using the $_POST superglobal. Here's an example code snippet that shows how to retrieve the form data in PHP:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
// Your code to process the form data here
echo 'Form submitted successfully!';
?>
In the above code, we're retrieving the form data using the $ _POST superglobal and assigning it to variables named "$name" and "$email". We can then process the form data as needed (e.g. insert it into a database, send an email, etc.), and use the echo statement to output a success message to the browser.
Note that you should include appropriate error handling in your PHP code to handle cases where the form data is missing or invalid.