Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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


JavaScript Code: The following is the code for the “script.js” file.



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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


PHP Code: The following is the code for the “action.php” file.

PHP

filter_none

edit
close

play_arrow

link
brightness_4
code

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


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :