What causes a Streamlit form to refresh after clicking the submit button and how can I fix it?

Question

I have a streamlit form that takes user input in the st.input_text widget. However, everytime I click submit, the form refreshes and all the input is lost before the submission logic is implemented.

As such, nothing is ever submitted to my google sheet.

with st.form(key="payments"):

    st.markdown(
        "**Hi foo, please choose the month and year for which you are entering data**")

    month, year = st.columns(2)

    with month:
        selected_month = st.selectbox("Month", months)

    with year:
        selected_year = st.selectbox("Year", years)

    status, name_column, amount = st.columns(3)

    
    name_column.markdown("_Name_")
    amount.markdown("_Amount (ugx)_")

    name_input = dict()
    input_amounts = dict()

    for name in names:

        amount_key = str(fx.create_guid())

        name_input[name] = amount_key

        with name_column:
            st.write(name)
            st.write("")
        with amount:
            input_amounts[amount_key] = st.text_input(
                placeholder="ugx", label=" ", label_visibility="collapsed", disabled=False, key=amount_key)

    submitted = st.form_submit_button("Save")
    
    if submitted:
    
       'Open google sheet'
    
        for k, v in name_input.items():
    
            amount_entered = input_amounts[v]
    
            if amount_entered.strip() != "" and int(amount_entered) > 0:
              
                all_values = worksheet.get_all_values()
                next_row_index = len(all_values) + 1
    
               # data to insert
                data = [selected_month, k, amount_entered, selected_year]
    
                print(data)
    
                # insert data in the next row
                worksheet.append_row(
                    data,
                    value_input_option='user_entered',
                    insert_data_option='insert_rows',
                    table_range= #table_range)

However when I put a default value for the st.input_text widgets, the insertion works.

Asked By: Arnold_CK

||

Source

Answer 1

I figured out the problem. It was never the form refreshing.

There is no need to store the values of the different input boxes using the input_amounts dictionary. It gets loaded with blank values when the form loads which never get updated after the user clicks submit.

Instead, I just leveraged the keys of the input boxes and used session state to retrieve the values entered. This is shown in the corrected code below;

with st.form(key="payments"):

st.markdown("**Hi foo, please choose the month and year for which you are entering data**")

month, year = st.columns(2)

with month:
    selected_month = st.selectbox("Month", months)

with year:
    selected_year = st.selectbox("Year", years)

st.write("---")

st.markdown("**Member payments**")

name_column, amount = st.columns(2)

name_column.markdown("_Name_")
amount.markdown("_Amount (ugx)_")

name_input = dict()

counter = 1

for name in names:

    amount_key = f"key{counter}"

    name_input[name] = amount_key

    with name_column:
        st.write(name)
        st.write("")
    with amount:
            st.text_input(
            placeholder="ugx", 
            label=" ", 
            label_visibility="collapsed", 
            disabled=False, 
            key=amount_key)
            
    counter += 1

submitted = st.form_submit_button("Save")

if submitted:
    
    payments_for_insertion=[]
   
    for name, amount_key in name_input.items():
        
        amount_entered = st.session_state.get(amount_key,"")

        if amount_entered.strip() != "" and int(amount_entered) > 0:
            
            data = [selected_month, name, amount_entered, selected_year]

            payments_for_insertion.append(data)

    if payments_for_insertion:
            
        'Open Worksheet'

        all_values = worksheet.get_all_values()
    
        next_row_index = len(all_values) + 1

        worksheet.append_rows(
                payments_for_insertion,
                value_input_option='user_entered',
                insert_data_option='insert_rows',
                table_range='your table_range'"
            )

Answered By: Arnold_CK

What causes a Streamlit form to refresh after clicking the submit button and how can I fix it?

Question:

Answers: