This works on all platforms except Safari/Firefox on iOS:
jQuery("#gform_1").one('submit', function(event) {
const form = document.getElementById("gform_1");
const firstName = document.getElementById('input_1_1').value;
const lastName = document.getElementById('input_1_2').value;
const phoneNumber = document.getElementById('input_1_3').value;
const email = document.getElementById('input_1_4').value;
const formData = {
firstName: firstName,
lastName: lastName,
phoneNumber: phoneNumber,
email: email
};
jQuery.ajax({
url: 'https://www.example.com/submissions.php',
type: 'POST',
data: formData,
success: function(response) {
console.log("Success!", response);
},
error: function(xhr, status, error) {
console.error("Error!", error);
console.log(xhr.responseText);
}
});
});
console.error("Error!", error) is empty. It says "Error!". console.log(xhr.responseText) is also blank. I don't think this is a COR issue since Submits.php is hosted on the same server/domain as the form.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I need to prevent Default.
jQuery("#gform_1").one('submit', async function(event) { event.preventDefault(); const form = document.getElementById("gform_1"); const firstName = document.getElementById('input_1_1').value; const lastName = document.getElementById('input_1_2').value; const phoneNumber = document.getElementById('input_1_3').value; const email = document.getElementById('input_1_4').value; const formData = { firstName: firstName, lastName: lastName, phoneNumber: phoneNumber, email: email }; const request = await new Promise((resolve, reject) => { jQuery.ajax({ url: 'https://www.example.com/submissions.php', type: 'POST', data: formData, success: function(response) { console.log("Success!", response); resolve(); }, error: function(xhr, status, error) { console.error("Error!", error); console.log(xhr.responseText); reject(error); } }); }); await request; console.log("AJAX request completed!"); });