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

0 0 1 minute read

The purpose of this article is to send the form data and credentials to the 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 JavaScript, the file adds an event listener to the form’s submit button i.e click. Then the request is made to a PHP file using jQuery Ajax.

Example:

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> 
</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> 

CSS

.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; 
}

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); 
    }); 
});

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"; 
} 
?>