JavaScript Post Request Like a Form Submit

Last Updated : 12 Apr, 2023

Many web developers face the challenge of emulating the functionality of a form submission using a JavaScript POST request in situations where a form is not available or appropriate. The problem requires finding a way to replicate the behavior of a form submission using JavaScript, with the goal of accurately sending data to a server and receiving a response.

When a form is submitted in HTML, the data entered by the user is sent to the server through a POST request. The server then processes the data and responds accordingly.

In JavaScript, it is possible to send a POST request to the server to submit data, just like a form submission. This can be particularly helpful when you need to send data to the server without requiring the user to manually submit a form.

To send a POST request in JavaScript, you usually need to specify the endpoint where the data will be sent, along with the data that needs to be sent.

Solution JavaScript Code: We will create a JavaScript function that creates a hidden form, sets the method to “post” by default, sets the action to the given path, and populates the form with hidden input fields based on the given params object. Finally, it will append the form to the document body and submit it.

Example 1: Create a file named index.html, we will create a simple interface with one button. In this example, we will click a button, and send data to the server using a POST request

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Send Data</title> 
  
    <style> 
        div { 
            display: flex; 
            justify-content: center; 
  
            margin-top: 5%; 
        } 
  
        button { 
            padding: 0.6em 1em; 
            border: 4px solid #fa725a; 
            transition: ease-in-out 0.3s; 
            background-color: transparent; 
            color: #fa725a; 
            font-weight: bolder; 
            font-size: 16px; 
  
            cursor: pointer; 
        } 
  
        button:hover { 
            transform: scale(1.2) rotate(10deg); 
            background-color: #fa725a; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <button id="send_data">Send Data !</button> 
    </div> 
  
    <script> 
        const send_button = document.getElementById 
            ("send_data"); 
  
  
        function postData(path, params, method) { 
  
            // Create form 
            const hidden_form = document.createElement('form'); 
  
            // Set method to post by default 
            hidden_form.method = method || 'post'; 
              
            // Set path 
            hidden_form.action = path; 
              
            for (const key in params) { 
                if (params.hasOwnProperty(key)) { 
                    const hidden_input = document.createElement 
                        ('input'); 
                    hidden_input.type = 'hidden'; 
                    hidden_input.name = key; 
                    hidden_input.value = params[key]; 
  
                    hidden_form.appendChild(hidden_input); 
                } 
            } 
  
            document.body.appendChild(hidden_form); 
            hidden_form.submit(); 
        } 
  
  
        send_button.addEventListener('click', () => { 
  
            // Call postData function    
            postData('https://...com/posts', 
                { title: 'foo', body: 'bar', userId: 1 }); 
        }); 
    </script> 
</body> 
  
</html>

Output:

JavaScript post request like a form submit

Example 2: In this example, we will send an array as a value, something which is mentioned below:

{ 
    title: 'fruits', 
    names: ['Apple','Banana','Mango'], 
    basketId: 1 
}

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Send Data</title> 
  
    <style> 
        div { 
            display: flex; 
            justify-content: center; 
  
            margin-top: 5%; 
        } 
  
        button { 
            padding: 0.6em 1em; 
            border: 4px solid #fa725a; 
            transition: ease-in-out 0.3s; 
            background-color: transparent; 
            color: #fa725a; 
            font-weight: bolder; 
            font-size: 16px; 
  
            cursor: pointer; 
        } 
  
        button:hover { 
            transform: scale(1.2) rotate(10deg); 
            background-color: #fa725a; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <button id="send_data">Send Data !</button> 
    </div> 
  
    <script> 
        const send_button = document.getElementById 
            ("send_data"); 
  
  
        function post(path, params, method) { 
              
            //Create form 
            const hidden_form = document.createElement('form'); 
              
            // Set method to post by default 
            hidden_form.method = method || 'post'; 
              
            // Set path 
            hidden_form.action = path; 
              
            for (const key in params) { 
                if (params.hasOwnProperty(key)) { 
                    const hidden_input = document.createElement 
                        ('input'); 
                    hidden_input.type = 'hidden'; 
                    hidden_input.name = key; 
                    hidden_input.value = params[key]; 
  
                    hidden_form.appendChild(hidden_input); 
                } 
            } 
  
            document.body.appendChild(hidden_form); 
            hidden_form.submit(); 
        } 
  
        send_button.addEventListener('click', () => { 
            // Call postData function    
            post('https://...com/posts', 
                {  
                    title: 'fruits',  
                    names: ['Apple', 'Banana', 'Mango'],  
                    basketId: 1  
            }); 
        }); 
    </script> 
</body> 
  
</html>