- ABP Framework version: v8.3.0
- UI Type: MVC
- Database System: EF Core (SQL Server)
- Tiered (for MVC) or Auth Server Separated (for Angular): no
- Steps to reproduce the issue:
Hi,
We are looking for some assistance in understanding how I can run some JavaScript on submit of the form before the form is actually posted. We have converted the modal to a normal page and at the moment the form is being submitted via ajax still. This is all working correctly.
We have then implemented a RichTextEdtior. On save of the form we want to take the contents of the editor and ensure it is placed as the value of a hidden input, so this gets passed to the server correctly. The way we have gone about this is to try and use the "submit" event listener. Something like the below
form.addEventListener('submit', function (event) {
// Prevent the default form submission
event.preventDefault();
const desc = document.querySelector('input#Description');
desc.value = editor.innerHTML;
//submit the form
...
});
Whether this is the best way to set the contents is debatable, however the question is how can handle stuff before the form is submitted. As preventDefault appears to be too late or getting missed due to it being submitted through ajax. So both the server and onsubmit function get called at the same time. Looking through the docs,I can't seem to find anything about handling this situation. As I imagine there are some scripts somewhere handling the posting of these forms.
One thing we can look to do is to set it on change, however that seems less performant. Is there any hook within the way ABP do things that I can listen to. Or would maybe changing this to a server side post worthwhile investigating and is there any guidance for that
Thanks for your assistance
Alex
2 Answer(s)
-
0
Hi,
you can try this
var $form = $('#formElement'); $form.on('submit', function (e) { e.preventDefault(); if ($form.valid()) { abp.message.confirm( ..., async function (isConfirmed) { if (isConfirmed) { e.preventDefault(); $form.ajaxSubmit({ success: function (result) { .... }, error: function (result) { abp.notify.error(result.responseJSON.error.message); abp.ui.clearBusy(); } }); } } ); } else { abp.ui.clearBusy(); } }); -
0
Hey,
Thanks for this, didn't think to try it through jQuery, it must be part of the lifecycle when listening to multiple events which makes sense
Thanks.
