On form submit event

 
1
0
-1

I have a form and I want to make and check some things before the form is sent. So, the obvious way is to create an onsubmit event. I used a script element and a simple test code to cancel the submit:

$(function() { //jquery ready function
	const myForm = document.querySelector("#myForm");
	myForm.addEventListener("submit", (event)=>{
		return false;
	});
});

It didn't work. If there are other other statements like alert it will execute them but ignores the return false!

I examined the page code and found that there is already an onsubmit event generated by joget that returns true!

//put it outside the jquery ready function is because the csrf token will be populate correctly when jquery ready.
$("form#myForm").on("submit", function(){
	//make sure csrf token is set correctly
    var form = this;
    if ($(form).find("[name='"+ ConnectionManager.tokenName +"']").length === 0) {
    	$(form).append('<input type="hidden" name="'+ConnectionManager.tokenName+'" value="'+ConnectionManager.tokenValue+'"/>');
    }
    	return true;
});

Is there a way to handle it;

Many times I have found that Joget has very large limitations on how flexible you can be with what it gives you ready-made, and every time you have to invent some trick at best.

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Hi Nik, please refer: How to confirm before submit process . Additionally try targeting the Submit button / Process Assignment buttons to handle your events instead of trying to access the form by its ID. 


      Hope this helps. Thanks 

      1. Nik

        If I have understood you suggest to catch the onclick event of the save button which is a stage before submitting. Interesting. I will try it.

      2. Varnaa

        Yup, feel free to reach out if you have further questions. 

      3. Nik

        Sorry but it doesn't work. It ignores the return false; and continues submitting the form to the server!!!

        $(function() { //jquery ready function
            const submitButton = document.querySelector("#submit");
            submitButton.addEventListener("click", (event)=>{
                return false;
            });
        });

      4. Varnaa

        https://jogetdoc.int.joget.cloud/jw/web/userview/jdocs/docs/DX8/frontend-validation – try this maybe

      5. Nik

        I haven't tried it yet but I wonder why this should work since it uses return false which has already been tested and doesn't work for the reasons I've mentioned. That is, there is already code for addEventListener for submit that is created by joget itself with return false. It still makes me very strange that Joget itself has such an article about something that doesn't work, Don't they know that they THEMSELVES have produced a pre-existing addEventListener that has always return true so any other attempt to return false will be ignored?

        The Joget code is:


        //put it outside the jquery ready function is because the csrf token will be populate correctly when jquery ready.
$("form#questionnaire").on("submit", function(){
	//make sure csrf token is set correctly
	var form = this;
	if ($(form).find("[name='"+ ConnectionManager.tokenName +"']").length === 0) {
		$(form).append('<input type="hidden" name="'+ConnectionManager.tokenName+'" value="'+ConnectionManager.tokenValue+'"/>');
	}
	return true;
});
      6. Nik

        I tried it. Sorry but it doesn't work!!!

        Simply try this code:

        <script>
$(function(){
	$("form#questionnaire").on("submit", function(){
    	return false;
	});
});
</script>

        It will never work as long as there is corresponding Joget onsubmit code that always returns true. The form will always be sent.

        It is very annoying.


      7. Varnaa

        Hi Nik, I have the below snippet as part of a huge script that works perfectly well for me.

         $("#process_approve, #process_reject").each(function() {
                    var btn = $(this);
                    if (!btn.data("has-auth-handler")) {
                        btn.on("click", function(e) {
                            e.preventDefault();
                            var clickedButtonId = $(this).attr('id');
                            console.log(clickedButtonId + " button clicked, showing authentication popup");
                            createAuthPopup(clickedButtonId);
                            return false;
                        }).data("has-auth-handler", true);
                    }
                });


        You can find the full script here. The idea behind the snippet is to prompt reauth before any approvals your use case maybe different but the form prevention should happen and you can do your custom action before continuing your flow. 

      8. Nik

        I had already faced the problem with the click event which is a step before the submit where you can have control. But along the way I realized that this way another problem emerges. That in essence some validations of joget are canceled so they have to be done in javascript in the click event. Nightmare!

      CommentAdd your comment...