Why do you have to click Submit twice to complete a form submission when a custom widget is added in the form?

  • Profile Image
    frny
    Asked on July 8, 2025 at 10:12 PM

    Hi,
    I developed a custom widget so that we could have a time field that includes seconds. It's working well except when I mark the field as required in Jotform. When that field is required, the user has to click the submit button twice (instead of just once) in order to submit the form.

    I don't see how this could be related to anything I did with the implementation of the widget; I'm calling JFCustomWidget.subscribe('submit', ...) as shown in the docs, but if it's helpful, you can see my source code here.

    Do you have any pointers?

    Thanks,
    Matt

  • Profile Image
    Podo: Support AI Agent
    Replied on July 8, 2025 at 10:12 PM

    Hi Matt,

    Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

    Regarding your custom widget issue where users need to click submit twice when the field is marked as required, this can sometimes happen due to how the widget handles the submit event subscription. Since you are using JFCustomWidget.subscribe('submit', ...) as per the documentation, the double-click behavior might be related to the widget's internal validation or event handling.

    Here are some pointers to try:

    • Ensure your widget properly signals completion or validation status before the form submission proceeds.
    • Check if your submit event handler prevents default submission or stops propagation incorrectly.
    • Test the widget without marking it as required to confirm the issue is tied to the required validation.
    • Review your code to make sure the submit event subscription is not causing multiple triggers.

    If you can share your widget source code, we can help review it for potential causes.

    Give it a try and let us know how it goes.

  • Profile Image
    Afzal JotForm Support
    Replied on July 9, 2025 at 1:46 AM

    Hi Matt,

    Thanks for reaching out to Jotform Support. I cloned your form and tested it to see if I could replicate the issue, and I ran into the same issue:

    Why do you have to click Submit twice to complete a form submission when a custom widget is added in the form? Image 1 Screenshot 20

    I tried the basic troubleshooting steps on the cloned version of the form, but the issue persists. The issue seems specific to the widget. Unfortunately, we will not be able to help you with the custom coding. You can check our Partner's page or hire a Freelancer via Fiverr to see if they can help you with this. 

    Let us know if you have any other questions.

  • Profile Image
    frny
    Replied on July 10, 2025 at 1:12 PM

    Thank you. Knowing that it's specific to this widget is helpful. Do you know of a simple widget that doesn't have this issue for which the source code is available, so I can compare?

    Thanks,
    Matt

  • Profile Image
    Jan JotForm Support
    Replied on July 10, 2025 at 2:35 PM

    Hi Matt,

    I checked our available widgets and couldn’t find any that have a built-in required feature specific to the widget itself. Most of them rely on Jotform’s built-in Required setting rather than handling validation internally.

    I found this online that you can check and compare. It might help identify how the validation and required features are handled differently.

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://js.jotform.com/JotFormCustomWidget.min.js"></script>
        <style>
          body {
            font-family: sans-serif;
            margin: 0;
            padding: 1em;
          }
          input {
            width: 100%;
            height: 2em;
          }
        </style>
      </head>
      <body>
        <input type="text" id="myInput" placeholder="Type here..." />
        <script>
          const input = document.getElementById('myInput');
          let value = '';
          let valid = false;
          input.addEventListener('input', (e) => {
            value = e.target.value;
            valid = value.trim() !== '';
            JFCustomWidget.setWidgetValidity(valid);
          });
          JFCustomWidget.subscribe('ready', () => {
            JFCustomWidget.setWidgetValidity(false); // mark as invalid by default
          });
          JFCustomWidget.subscribe('submit', () => {
            JFCustomWidget.setWidgetValidity(valid); // confirm it's still valid
            JFCustomWidget.sendSubmit({
              valid,
              value,
            });
          });
        </script>
      </body>
    </html>

    Just like my colleague said, unfortunately, we will not be able to help you with the custom coding. You can check our Partner's page or hire a Freelancer via Fiverr to see if they can help you with this.

    Give it a try and let us know if you need help. 

  • Profile Image
    frny
    Replied on July 10, 2025 at 2:42 PM

    Thank you, I will check this out. To be clear, all I want to do is "rely on Jotform’s built-in Required setting" as you said. The only other validation I need to handle internally is validating that the user has entered valid numbers. I understand what you are saying about your policy on custom coding assistance, thanks.

  • Profile Image
    frny
    Replied on July 27, 2025 at 11:13 AM

    Hi, I finally had time to work on this again...and the issue does not appear to have anything to do with my coding. I copied and pasted the exact example code that you have on your website for developing a custom widget, and the form still has the same problem where you have to press the submit button twice when the field is marked as required. So this seems to be a problem with your system, or at the very least the code example in your documentation is incorrect. I am not asking for custom coding assistance, I just want your official example code to work. Please provide support on this, thank you.

  • Profile Image
    Keenly JotForm Support
    Replied on July 27, 2025 at 11:52 AM

    Hi Matt,

    Currently, we don’t have an official code repository for building custom widgets, but you can visit this page to learn more about Creating Your Own Widget, including access to sample widgets that can guide you through the process. If you’d prefer more hands-on support, you might also consider hiring a web developer to assist you with creating a custom widget.

    Let us know if you have any other questions.

  • Profile Image
    frny
    Replied on July 27, 2025 at 12:07 PM

    Hi Keenly,
    The link you just provided is where I obtained the code to confirm that you likely have a bug in your system, or that your example code is incorrect. You can see this problem on a super basic test form here:

    https://www.jotform.com/build/252074150636048

    I am a professional web developer, so I shouldn't need to hire one. Your support team continues to recommend hiring someone. I am asking you instead to acknowledge that there is a problem you should be addressing with your system, without having to pay extra for support, because your system is not working as advertised and your documentation is wrong. If there is some sort of secret documentation that you provide to the Jotform widget developers you recommend, please provide that to me as well...but really you should fix your website so that people following the instructions verbatim do not encounter this problem.

    Thank you,
    Matt

  • Profile Image
    Keenly JotForm Support
    Replied on July 27, 2025 at 1:05 PM

    Hi Matt,

    I'll need a bit of time to look into this. I'll get back to you as soon as I can.

    Thanks for your patience and understanding, we appreciate it.

  • Profile Image
    Keenly JotForm Support
    Replied on July 28, 2025 at 9:12 AM

    Hi Matt,

    I tested your form and had the same issue, so I created a ticket and escalated this to our Developers. Although we don't know exactly when it'll be fixed, we’ll circle back to this thread when we have an update.

    Thanks for your patience and understanding, we appreciate it.

    Why do you have to click Submit twice to complete a form submission when a custom widget is added in the form? Image 1 Screenshot 20

  • Profile Image
    frny
    Replied on July 28, 2025 at 9:16 AM

    Thanks, I appreciate you escalating the ticket.

  • Profile Image
    frny
    Replied on August 20, 2025 at 7:59 AM

    Hi, do you have any updates on this?

  • Profile Image
    Joeni JotForm Support
    Replied on August 20, 2025 at 8:04 AM

    Hi Matt,

    We know it’s taking a bit longer than usual, and we really appreciate your patience while our Developers work to get this resolved.

  • Profile Image
    Connor Product Triage Specialist
    Replied on September 18, 2025 at 9:16 AM

    Hi Matt,

    Can you add the code below to  JFCustomWidget.subscribe function.

    document.getElementById('userInput').addEventListener('change', function () {
    JFCustomWidget.sendData({
    valid: true,
    value: document.getElementById('userInput').value
    });
    })

    End result should look like this:

    Why do you have to click Submit twice to complete a form submission when a custom widget is added in the form? Image 1 Screenshot 20

    Give it a try and let us know if you need any other help.

  • Profile Image
    frny
    Replied on September 21, 2025 at 7:26 PM

    Hi, that worked, thank you. The only remaining issue is that if you don't fill out the field and then press submit, it will show a validation error as expected, but then when you fix it you have to press submit twice. But that's just a minor annoyance and we can live with that.

    I also noticed this error message in the console when `valid` is set to false (which I need to do in my widget when someone enters invalid input):

    TypeError: Cannot read properties of null (reading 'value')
        at Object.errorCatcherLog (jotform.forms.js:3728:96)
        at HTMLFormElement.handleFormSubmit (jotform.forms.js:21295:37)
        at jotform.forms.js:3447:38
        at Array.forEach (<anonymous>)
        at Object.submitObserverHandler (jotform.forms.js:3440:35)
        at HTMLFormElement.submitObserverHandler (jotform.forms.js:3968:43)


    It doesn't seem to interfere with anything, I just thought I would let you know.

    Thanks,
    Matt

  • Profile Image
    Kenneth JotForm Support
    Replied on September 21, 2025 at 9:34 PM

    Hi Matt,

    Our Developers are tackling this right now, and we’ll be back with an update as soon as we can.

    Thanks for your patience. We appreciate it.