How to pass both form data and credentials on submit in ajax ?
The purpose of this article is to send the form data and credentials to PHP backend using AJAX in an HTML document.
Approach: Create a form in an HTML document with a submit button and assign an id to that button. In the JavaScript file add an event listener to the form’s submit button i.e click. Then the request is made to PHP file using jQuery Ajax.
HTML code:
HTML
<!-- HTML Code --> <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- jQuery Ajax CDN --> < script src = </ script > <!-- JavaScript File --> < script src = "script.js" ></ script > <!-- Internal CSS --> < style > .container { margin: 35px 0px; } input, textarea, button { display: block; margin: 30px auto; outline: none; border: 2px solid black; border-radius: 5px; padding: 5px; } button { cursor: pointer; font-size: large; font-weight: bolder; } h1 { text-align: center; } </ style > </ head > < body > < div class = "container" > < h1 >Demo Form</ h1 > <!-- Form --> < form > < input type = "text" name = "name" id = "name" placeholder = "Enter your Name" > < input type = "text" name = "age" id = "age" placeholder = "Enter your Age" > < textarea name = "aaddress" id = "address" cols = "30" rows = "10" placeholder = "Enter your address" > </ textarea > <!-- Form Submit Button --> < button type = "submit" id = "submitBtn" > Submit </ button > </ form > </ div > </ body > </ html > |
chevron_right
filter_none
JavaScript Code: The following is the code for the “script.js” file.
Javascript
// Form Submit Button DOM let submitBtn = document.getElementById( 'submitBtn' ); // Adding event listener to form submit button submitBtn.addEventListener( 'click' , (event) => { // Preventing form to submit event.preventDefault(); // Fetching Form data let name = document.getElementById( 'name' ).value; let age = document.getElementById( 'age' ).value; let address = document.getElementById( 'address' ).value; // jQuery Ajax Post Request $.post( 'action.php' , { // Sending Form data name : name, age : age, address : address }, (response) => { // Response from PHP back-end console.log(response); }); }); |
chevron_right
filter_none
PHP Code: The following is the code for the “action.php” file.
PHP
<?php // Checking if post value is set // by user or not if (isset( $_POST [ 'name' ])) { // Getting the data of form in // different variables $name = $_POST [ 'name' ]; $age = $_POST [ 'age' ]; $address = $_POST [ 'address' ]; // Sending Response echo "Success" ; } ?> |
chevron_right
filter_none
Output: