Why the form submit disappears when I hit the send button?

Working on a simple submit form (https://formsubmit.co/) in a Streamlit app and sending it using Ajax. The form is a simple Bootstrap contact form.
My problem is when I click the send button, the form disappears and I get instead the response:
Before:


After:
Screenshot 2022-11-17 at 18-52-10 main4 · Streamlit

I didn’t ask about the response, I would like to keep the form visible and deal with the response later!
I tried to insert display:block; in the style attribute of the div containing the form, but it doesn’t work!
I am new to Streamlit, can anyone guide me where I am doing wrong?
My code:

form_from_html = "html/myForm_1.html"

with open(form_from_html, 'r') as f:
    html_form = f.read()

st.title("TEST:")

js_string = """
            <script language="javascript">
                const form = $(#contact-form).serialize();
                $.ajax({
                    dataType: 'json',
                    accepts: 'application/json',
                    data: form,
                });
            </script>
       """

html(html_form + js_string, height=600, width=490)
st.title("END")

EDIT:
I found that {"success":"true","message":"The form was submitted successfully."} is an html iframe due to html(html_form + js_string, height=600, width=490) (see my code).
I tried to set value hidden to the tag attribute hidden without success!

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.