如何捕獲 Streamlit 表單變量並將其傳遞給 Javascript？

Question

從我簡單的Streamlit聯系表單中，我想獲取姓名、email 和消息，並使用JavaScript通過FormSubmit將它們發送給網站所有者。 這是我的代碼：

import streamlit as st
from streamlit.components.v1 import html

form = st.form("myForm", clear_on_submit=True)
name = form.text_input("Full name")
email = form.text_input("Email Address")
msg = form.text_area("Message")

submit = form.form_submit_button("Send")

my_js = """
            var dict_values = {"{{name}}", "{{email}}", "{{msg}}"};
            var s = JSON.stringify(dict_values);
            console.log(s);
            window.alert(s);
            $.ajax({
                method: 'POST',
                url: 'https://formsubmit.co/ajax/my-email',
                dataType: 'json',
                accepts: 'application/json',
                data: JSON.stringify(s)
                success: (data) => console.log(data),
                error: (err) => console.log(err)
            });
        """
my_html = f'''<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
                                 <script type="text/javascript">
                                     {my_js}
                                 </script>
           '''
if submit:
   html(my_html)

代碼運行良好，我的意思是表單，但沒有任何反應！ 我認為我的問題是我將變量傳遞給JavaScript的方式！

非常感謝任何幫助/建議。

Answer 1

你的進口之一是不合適的，其次是$.ajax()在success之前似乎有一個缺失,而且我認為你的dict_values變量沒有被正確分配。 它應該使用名稱、email 和 msg 變量，並使用:字符為鍵賦值，而不是,字符。 它應該是這樣的：

import streamlit as st
import streamlit.components.v1 as components

form = st.form("myForm", clear_on_submit=True)
name = form.text_input("Full name")
email = form.text_input("Email Address")
msg = form.text_area("Message")

submit = form.form_submit_button("Send")

my_js = """
            var dict_values = {"name": "{{name}}", "email": "{{email}}", "msg": "{{msg}}"};
            var s = JSON.stringify(dict_values);
            console.log(s);
            window.alert(s);
            $.ajax({
                method: 'POST',
                url: 'https://formsubmit.co/ajax/my-email',
                dataType: 'json',
                accepts: 'application/json',
                data: JSON.stringify(s),
                success: (data) => console.log(data),
                error: (err) => console.log(err)
            });
        """
my_html = f'''<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
              <script type="text/javascript">{my_js}</script>
           '''
if submit:
   components.html(my_html)

您可以嘗試一下，看看它是否能解決您的問題。 否則您應該提供回溯錯誤消息。