Forms Do Not Work in a Modal or Panel

OS info

  • Operating System : Mac OSX 17.5.0
  • Wappler Version : 1.0.1

Problem description

I have several forms in Modals or tab panels. They don’t submit when in a modal or tab panel. Work fine in a regular page. Can someone also confirm this is a bug?

Nevermind … user error. Didn’t have button type as Submit. Need more coffee.

Works in Modal anyways, still having an issue with forms in a Tab Panel but I will investigate that further as well.

I had the opposite in successes - I had no problems getting an insert form running in a tab group (see http://statecollegedev.com/FaithCentre-wap/index.html - visit the ‘donations.html’ page and click on the third tab “Donate Money”).

My first issue is, while I can get the dB insert to work, I can get only one of two email forms in the tab groups to work. The first form under the first tab (Donate Time) works but the second email form under the second tab (Donate Items) does not. See my vid showing what I’m trying to do:
mailer forms.mp4 (27.2 MB)

For my other issue (modal insert & email forms not working) I have tried several approaches but the modal form will not insert data nor confirm. Below are screen caps of my process.

I’ve setup all the server actions:

I added to the modal’s email form the Server Connection:

Or in the case of a modal’s insert form:

I added to the submit & reset buttons action (here’s where I am confused as to what I should select and need your advise:

Then I added the success:

1 Like

Randy,

If the Button with type = Submit is located within the Form element, then there should be no Submit action placed on it. A Submit button will do the submitting automatically.

A few notes of how I have gone about doing the Form thingy in a Modal

  • used the default modal buttons in the footer, placing a Submit action on the Save Changes button
  • placed the Reset Form action on hiding the modal, great whenever the modal is closed
  • given the modals and forms meaningful names, less confusing when there are multiple modals and forms

Hmmm… Yes this helps. Could you also upload a screen shot of your Dynamic Events/Click/Action screen? I’d like to see how/what you selected on that screen.

For the Modal Hide event -> Reset the Form

For the Form Action Success event -> Hide the Modal + (re)Load the Data

And because it’s outside of the Form, the Button Click event -> Submit the Form