Jump to content

Validating Delete form submission event in AJAX


Recommended Posts

This is on a report details page containing both UPDATE and DELETE buttons, I have been unsuccessful in capturing / processing a delete event using the  the new AJAX  processing.

The functional intention is that I have a requirement to verify some data / field values before permitting a record delete.  Before the AJAX release, I could capture Mod0DeleteRecord onclick event and then process using return false if validation failed.

With AJAX on, I can still capture the button click and process a validation (actual code below), but the return false and event.preventDefault does stop the delete event from continuing.  I suppose I could approach this by hiding the delete button altogether until such time that the proper criteria permits deletion but I would prefer to keep the UX as it was before the AJAX update.

document.getElementsByName("Mod0DeleteRecord")[0].addEventListener('click', function(event) {
 event.preventDefault();

if (1==1) {
 alert("validation failed");
 return false;
}
});

I've also tried using the BeforeFormSubmit event handler but was not able to capture the delete click vs the update click hence the delete validation script would validate for update submissions and vice-versa.

I've spent an embarrassing amount of time time trying to figure this out, your help is much appreciated.

Thank you

 

Link to comment
Share on other sites

  • 2 weeks later...

I have tested this code with validation. You can adjust validation rules and it will be prevent delete event.

 

<script>
var validation = true;
//// Validation of the Delete Button
if (document.querySelector('input[id^="Mod0DeleteRecord"]')){
    document.querySelector('input[id^="Mod0DeleteRecord"]').addEventListener('mousedown', function(event) {
        if (1==1){
            validation = false; //YOUR Logic for the Delete Validation
        }
    });
}
/////
if (document.querySelector('input[id^="Mod0EditRecord"]')){
    document.querySelector('input[id^="Mod0EditRecord"]').addEventListener('mousedown', function(event) {
        validation = true; //For Working Edit Buttons
    });
}

if (document.querySelector('input[id^="Mod0CancelRecord"]')){
    document.querySelector('input[id^="Mod0CancelRecord"]').addEventListener('mousedown', function(event) {
        validation = true; //For Working Back Buttons
    });
}


document.addEventListener('BeforeFormSubmit', function(event) {
	if (!validation){
        alert('EVENT Prevented'); //Some custom alert.
        event.preventDefault();
    }
});

</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...