Using chatbot ai within an HTML Form causes form submission

Chatbot
#1

When using the chatbot ui control, anytime it is included between tags all messages cause the form to be submitted. This clears any local state and defaults all messages back to the initial load.

Steps To Reproduce:

  1. Take any of the sample code provided with the utility
  2. Test that it works without a form and that it maintains state and offers back and forth chat as expected.
  3. Wrap the placeholder html div/control with
  4. Now the page will cause a postback on every message send and reset to the default state.
#2

Hello,

If you’re using the ChatBot component inside the form HTML element, you need to add submit listener and use the e.preventDefault() method to prevent the default action:
Event: preventDefault() method - Web APIs | MDN ;

Please check the example in the following snippet:
https://snippet.dhtmlx.com/a3u7k6l2

#3

Please note this is also not an ideal solution because it requires referencing the button element far outside of it’s creation and relying on it containing a specific css class. None of that can be controlled or guaranteed by the calling code, and there could also be other buttons with the same class on the page.

It would be ideal if the code could just be fixed to include the type=“button” so that none of this would be necessary. Thank you!

#4

This is not a very good solution because it disables the entire form from functioning. Presumably it was added for a purpose and should not just be killed.

The reason it happens is because the chat widget creates the “Send” button as a tag but does not set the “type” attribute. That means it gets the default behavior, which is unfortunately to submit any form it is included in. The code could be fixed by simply adding type=“button” on the creation of the button tag.

In the absence of fixed code, I was able to work around the solution by adding the following javascript after the chatbot is instantiated:

var btn = $(“button.primary”);
btn[0].setAttribute(“type”, “button”);

#5

Hello,

Thank you for identifying the issue and proposing a solution. I will pass this suggestion along to the development team for their review. They will evaluate it and determine if this fix will be included in the next version.