Hi
We’re trying to POST to a custom form from inside a react app running in matrix.
Is this possible?
Have tried via ajax from another page in matrix to no avail.
How do the form elements need to be configured for the POST?
Appreciate assistance
mitch
This should help you (you can ignore the swal part, thats just for fancy modal pop up. The key thing is to grab the form id and include the id with _submit as the name and id as an input. This particular page allowed the user to retrieve a form via ajax (multiple forms) and then post that particular form all on the one page, hence why the id’s aren’t hard coded in etc.)
$('body').on('click', '.sq-form-submit', function(e){
e.preventDefault(); // prevent the form from being submit
var form = $(this).closest("form");
var formid = $(form).attr('id'); // grab form id and the additional submit ID that squiz forms require
var formidsubmit = formid + '_submit';
$("<input type='hidden' value='Submit' />") // inject the submit id element in before its posted
.attr("id", formidsubmit)
.attr("name", formidsubmit)
.appendTo(form);
swal({
title: "Are you sure you want to submit the form?",
text: "The form will be posted straight away!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, post it!",
closeOnConfirm: false
}, function (isConfirm) {
if (!isConfirm) return;
$.ajax({
url: form.attr('action'),
type: "POST",
data: form.serialize(), //serialize the data
dataType: "html",
success: function (response) {
swal("Done!", "It was succesfully posted!", "success");
console.log(response);
$("#formdata").html('<br>' + ' Nice... now why not submit one of the other forms?');
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error", "Please try again", "error");
}
});
});
});