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

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

Output:

My Personal Notes

Related Articles

HTML

Javascript

PHP