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

  • 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

  • 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.

  • 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.

  • 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

  • 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. 

  • 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.

  • 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.

  • 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.

  • 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

  • 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.

Your Reply