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:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.

My Personal Notes

Related Articles

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

HTML

Javascript

PHP