Preventing Duplicate Record Creation on Form Resubmission

Scenario : Identified that when the Submit button is clicked, and the user subsequently navigates back to the form using the browser’s Back/Forward button, the previously entered content is still present. If the Submit button is clicked again, a duplicate record is created.

Solution: To resolve this issue, we have implemented a solution that clears all form fields when the user navigates back using the browser’s Back button. 

/**

 *@NApiVersion 2.1

 *@NScriptType ClientScript

 */

define([‘N/search’, ‘N/ui/dialog’], function (search, dialog) {

  function pageInit(context) {

    const form = document.querySelector(‘form’);

    const btn = document.querySelector(‘input[type=”submit”]’);

    const navEntry = performance.getEntriesByType(“navigation”)[0];

    const modernType = navEntry?.type;

   if(modernType == “back_forward”){

    clearFormFields(form);

   }

    

    if (form && btn) {

      form.onsubmit = function () {

        // At this point, the form is valid and about to submit

        btn.disabled = true;

        btn.value = ‘Submitting…’;

        return true;

      };

    }

  }

   function clearFormFields(form) {

    if (!form) return;

 

    const fields = form.querySelectorAll(‘input, select, textarea’);

 

    fields.forEach(function (field) {

      const type = field.type?.toLowerCase();

      if ([‘text’, ’email’, ‘textarea’, ‘tel’, ‘url’, ‘number’, ‘date’, ‘search’].includes(type)) {

        field.value = ”;

      } else if (type === ‘checkbox’ || type === ‘radio’) {

        field.checked = false;

      } else if (field.tagName === ‘SELECT’) {

        field.selectedIndex = 0;

      }

    });

  }

  return {

    pageInit: pageInit,

  }

});

Leave a comment

Your email address will not be published. Required fields are marked *