Unable to hide content snippet on form submit in portals. Displays along with the success message after form submission

Question

I am working on partner portal in dynamics 365 portals.

I included a content snippet(qrcode scanner) in the 'upload result' web page. This web page also has an entity form placed in it after the content snippet.

When I load the web page, the content snippet and the form display on the web page(as expected).

After filling the required details and submitting the form, the content snippet doesn't hide on form submission. It still is displayed on the page along with the success message.

I added the following code in the Additional settings of the Entity form of the web page,

$(document).ready(function(){  
    $("#InsertButton").click(function(){   // onclick submit button
        $('#snippet-scanner').parent().hide();    // hide the content snippet
});
});

it hides as soon as we click the submit button but then re-appears along with the success message.

Can you please suggest me a way to hide or remove the content snippet from the web page when the success message is displayed, after the form is submitted.

Answer 1

Your problem here is that the page reload on form submit. I see 3 possible solutions.

1. Quickfix - check if form exists on page load and hide content snippet dependently.

   $(document).ready(function() {
       if (!$(".entity-form").length) {
           $("#snippet-scanner").hide();
       }
   })
   

2. My personal favourite - change success of form to redirect to the same page, append a custom query string such as success=true then use liquid to only render the content snippet and form if the success doesn't equal true (you would need to display your own success message)

3. Prevent default action of the form and submit it yourself with javscript. I have done this before and it's a bit fiddly, probably wouldn't recommend for a simple use case like this.