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:
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!
