How to pass both form data and credentials on submit in ajax ?

09 Dec, 2020
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="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </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>
JavaScript Code: The following is the code for the “script.js” file.
Javascript
// Form Submit Button DOMlet 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);    });});
PHP Code: The following is the code for the “action.php” file.
PHP
<?php  // Checking if post value is set// by user or notif(isset($_POST['name'])) {      // Getting the data of form in    // different variables    $name = $_POST['name'];    $age = $_POST['age'];    $address = $_POST['address'];      // Sending Response    echo "Success";}?>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2020
HTML
JavaScript
PHP
PHP Programs
Technical Scripter
Web Technologies
Web technologies Questions
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.