Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Ajax Saving Craft Template
When I add an ajax script to the page it's being overrode and still submitting the form with a refresh instead of loading my ajax script. Is there a basic ajax insert script for a form anywhere? Or at least as an example would someone be able to do it to the project settings page?
Replies (5)
Hi,
Please refer to the src/js/custom/authentication/sign-in/general.js script and you can reuse the form submit flow for your ajax processing.
For your ajax processing you can use Axios plugin which is included in the Metronic core by default and available in all pages.
Regards.
I took the code from the authentication - sign in and modified it. Something like this should work.
"use strict";
var OrderType_form = (function () {
var e, t, r;
return {
init: function () {
(e = document.querySelector("#order_type_form")),
(t = document.querySelector("#order_type_submit")),
(r = FormValidation.formValidation(e, {
fields: {
status: { validators: { notEmpty: { message: "The status is required" } } },
order_type_id: {
validators: {
notEmpty: { message: "The Order Type ID is required" },
stringLength: { min: 1, max: 4, message: "Order Type ID must be more than 1 and less than 4 characters long." },
regexp: { regexp: /^[a-zA-Z0-9]+$/, message: "Order Type ID can only consist of alphabetical and number" },
},
},
description: {
validators: {
notEmpty: { message: "Description field is required." },
stringLength: { min: 5, max: 50, message: "Description must be more than 5 and less than 50 characters long." },
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: ".fv-row", eleInvalidClass: "is-invalid", eleValidClass: "is-valid" }),
icon: new FormValidation.plugins.Icon({ valid: "fa fa-check", invalid: "fa fa-times", validating: "fa fa-refresh" }),
},
err: { clazz: "invalid-feedback" },
control: { valid: "is-valid", invalid: "is-invalid" },
row: { invalid: "has-danger" },
})),
t.addEventListener("click", function (i) {
i.preventDefault(),
r.validate().then(function (r) {
"Valid" === r
? (t.setAttribute("data-kt-indicator", "on"),
(t.disabled = !0),
axios
.post(t.closest("form").getAttribute("action"), new FormData(e))
.then(function (t) {
Swal.fire({
text: "New record successfully processed!",
icon: "success",
buttonsStyling: !1,
confirmButtonText: "Ok, got it!",
customClass: { confirmButton: "btn font-weight-bold btn-light-primary" },
}).then(function (t) {
t.isConfirmed && ((e.querySelector("[name="order_type_id"]").value = ""), (e.querySelector("[name="description"]").value = ""), window.location.reload());
});
})
.catch(function (e) {
let t = e.response.data.message,
r = e.response.data.errors;
for (const e in r) r.hasOwnProperty(e) && (t += "\r\n" + r[e]);
e.response && Swal.fire({ text: t, icon: "error", buttonsStyling: !1, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn btn-primary" } });
})
.then(function () {
t.removeAttribute("data-kt-indicator"), (t.disabled = !1);
}))
: Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: !1,
confirmButtonText: "Ok, got it!",
customClass: { confirmButton: "btn btn-primary" },
});
});
});
},
};
})();
KTUtil.onDOMContentLoaded(function () {
OrderType_form.init();
});
