Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Awesome!! Thank you guys!



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();
});



This is for a mysql insertion query of the form data


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(