Hey there, I successfully managed to implement a post request using ajax for my submit functionality. However, I am now looking to make this asynchronous to account for any delays in processing by my php file. Unfortunately, I am struggling to figure out how to integrate the asynchronous aspect with ajax in my function. Here is what I have so far:
submitForm(e) {
console.log(e);
e.preventDefault();
/* to prevent double submitting the form after the first submit*/
/* submitBtn.disbabled = true; */
this.isDisabled=true;
this.submitStatus = 'Successfully sent!';
/* append form-values to the formdata so I can push it to my .php file */
const formData = new FormData();
formData.append('user_name', this.user_name);
formData.append('user_email', this.user_email);
formData.append('user_message', this.user_message);
/* async function implementation should probably start here..*/
/* object of my http request */
const ajax = new XMLHttpRequest();
/* opening my connection */
ajax.open('POST', this.url);
ajax.onreadystatechange = function() {
/* if state is send and status is ok */
if(ajax.readyState === 4 && ajax.status === 200) {
if (ajax.responseText === "success") {
/* contactForm.innerHTML = `<h2>Thank you, ${contactName}, your message has been sent.</h2>` */
}else {
this.submitStatus = ajax.responseText;
this.isDisbaled = false;
}
}
}
/* call to my promise function goes here */
/* sending the request with the appended form data
and executing the load event */
ajax.send(formData);
/* resetting the input-fields to blank after the submit is completed */
this.user_name="";
this.user_email="";
this.user_message="";
}
Your assistance on this matter would be greatly appreciated!