Send dynamic data using Ajax

by Imabot

HTML

<h1>Send dynamic data using Ajax?</h1>

<form id="form">
  Firstname
  <input type="text" id="firstname" name="firstname" value="John"><br><br>
  Lastname
  <input type="text" id="lastname" name="lastname" value="Smith"><br><br>
  <input type="submit" value="Submit">
</form> 

<hr>

Response:
<div id="output">	
</div>

<hr>

More details on my blog: <a href="https://lucidar.me/en/web-dev/how-to-send-dynamic-data-using-ajax/" target="_blank">https://lucidar.me/en/web-dev/how-to-send-dynamic-data-using-ajax/</a>

CSS

#output {
	border: 1px solid #999;
	border-radius: 5px;
	padding: 5px;
	min-height:30px;
}

JavaScript

// Import AJAX module
import {ajax} from 'https://lucidar.me/en/javascript-modules/files/ajax.min.js'

// Division for displaying the response
const output = document.getElementById('output');

// Trigger an event when the form is submitted
const form = document.getElementById('form');
form.addEventListener('submit', (event) => {
	
	// Get form data
	let firstname = document.getElementById('firstname').value;
	let lastname = document.getElementById('lastname').value;
	
	// Ajax query
	ajax('https://url-example.com/api/json/post/')
	.post({ "firstname": firstname, "lastname": lastname})
	.then(function (response) { output.textContent = response })
	.catch(function(failure) { alert ('Error') })
	
	// Prevent HTML posting form
	event.preventDefault();
});