Form Submit - Modal

[mebroyles01]

Hi All,

I have been trying and trying to get something which is probably simple to most but I am struggling with.

I have a form. That form has very basic information I want people to fill out. Then have that form emailed to me. That all works.

Next part I just want a modal box or what ever to prompt the user with a verification dialog of what the entered being correct. If its incorrect they click make changes. This work. If it’s correct they hit submit and it is supposed to email me, clear the form and redirect to a thank you page. It does the clear form and the redirect however; I get an error while debugging the page on my API.

What am I missing on the modal form button. I set the actions and one of them is direct form submit. Tired it unchecked to.

I am just hoping its something easy and I can share more but it’s just a simple prompt I want to use for people filling out the form is this correct then sent me an email.

I can get one or the other working just not both.

I know it’s user error and know that I am learning but any tips on the work flow would help. I have tired the inflow but then I don’t know how to email. So then I do the action and call the API. I am just going to stop here and provide more if needed.

Thank you.

[franse]

Hey, sorry I readed twice but I’m not following it.
Can you share some screenshot from the server/client side?

[scott]

I agree with franse. We need more detail on what the error is to be able to assist.

[mebroyles01]

1. I create a form and convert it to a server connect
2. For the action I call an API
3. The API just sends the email
4. I add a several form groups and several form inputs
5. I add a button and set the type to submit
6. I add a browser app
7. On the form I add a dynamic event > server connect > success
8. I set the action on the form to reset and the browser to redirect
   I test the form and it submits, clears, redirects, and sends me an email.
   All of that works perfectly.

Now what I want to do it just put a modal or prompt in front of the user after the click submit to verify the info is correct then send me email.

That is the part that I have tried a couple of different things.

Where I am at right now:

1. I removed the dynamic event on success from the form
2. I have set the button on the page to mouse > click and set the action to show the modal
3. On the modal body I have all of my form data values displayed
4. I set button one as dynamic event > click and set a modifier to prevent default
5. On Button 2 for complete order I set dynamic event > click and set actions as:

• Form.Submit (have tried both direct checked and not checked)
• Form.Reset
• Browser Redirect

Now after completing the form it does pop up the modal and does show me the input. If I click cancel I can make changes and submit again and it shows those changes.

I click complete it clears the form and redirects the page.

However; I never get an email. When looking at debug I and blocked red circle with a line through my api that is called. That is the only error.

I am sure it’s a config or workflow not set right.

I can work on screen shots later but wanted to get more details just in case.

Thank you

Now

[famousmag]

If I’m not mistaken you have ONE FORM ONLY in you main page and you click a button in a modal to submit the form…

If this is what you do, you must change the modal button to simple button (NOT SUBMIT) and add on it a mouse event>click and then submit from there the form in your main page.

The submit button works only if it is inside the form that is submitted…

*If you could share your code or screenshots would be great because the details are important

[franse]

@mebroyles01

Now what I want to do it just put a modal or prompt in front of the user after the click submit to verify the info is correct then send me email.

So if I understand you correctly:
You want to show a modal after clicking on submit (which is not a submit button) that shows all the data and a real submit button?

If that’s the case, create a modal and place the form inside it. Only that form, it’ll be the only one.

When you click on the first button (set type to normal) set a dynamic event that links the inputs of your form (of the modal) with the inputs of your main page, and after all those bindings, show the modal, be sure you have a submit button ON the form like Tasos says.

Also you say that you have an error, have you tried to enable debug mode and see what is exactly the error you have?

Debugging Server Connect Errors

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open the server connect settings. They are located in the Workflows Panel > Server Actions: [Screenshot 2021-09-27 at 10.02.35] And enable the Debug Mode: [Screenshot 2021-09-27 at 10.03.08] Click Save: [Screenshot 2021-09-27 at 10.03.26] In your browser, open the Developer tools. If you don’t k…

[mebroyles01]

Hi All,

Okay I have screen shots and a work flow. I am hoping for this to make sense as I was trying to do a brain dump and hope it was something super easy. It may still be. I am just new to the wappler terminology with the app so bare with me.

This is my workflow below. I have a server connect form, I moved the modal1 into the form. The form has several text inputs and a couple of selection boxes… I have set the server connect to call the API which has the form values inputted using the wizard within wapper. It just sends the post of the form to my email.

The button in the vertical form group btn1 calls to show the modal on click.

In the body of the modal1 I do a data bind for each form input to display the values entered/selected

On the modal there are two buttons. The make changes or cancel button if clicked has a modifier set to prevent default

On the second button within the modal to complete (finalize and submit) I have it set as the following:
For the button properties

For the action:

The action then performs the following:

With debug on the form does clear, and does redirect me. However; it does not email me. It does display an error within the debug as below. This is all I see as far as errors:

I hope this makes it easier to understand.

Thank you

[franse]

First of all, your modal is inside the form.
On my early post, I recommended a different approach (A form inside the modal body)

[mebroyles01]

I did try however; you can not drag the vertical form groups into the body. You can drag the modal in to the form but not the other way around.

You can add text inputs as well from highlighting modal body and then clicking add/forms.

So I decided I would show things where I was at before trying anything new to see if this is a workflow or if there is an easier way to accomplish this.

[franse]

@mebroyles01

You can drag the modal in to the form but not the other way around.

You can’t create a modal and right click on modal body and insert a form? Are you sure?

Don’t drag and drop, just go to modal body, right click, and add a form

[famousmag]

@mebroyles01,

First of all I would like to see the api for the form in order to be sure that it does what it shoud do…

Now, on your existing workflow:

1. I suggest to take the Modal out of the form like @franse said…
   There in NO ABSOLUTELY reason the Modal to be there…

2. You can leave the “call_Modal” button inside the form as it is and Show the Modal…

3. In the Modal, the button will perform ONLY one command:

• negative_form.submit (you submit, immediatelly reset the form and riderect the user to another page… WITHOUT EVEN THE FORM SUCCESSFULLY submitted)
• 

4. Now the form is submitted…
   (We have to see the api as I told you in ordre to be sure that is correct…)

5. In your form, select the form and add a dynamic event Success in order to handle the results of your submitted form (form api) or any other dynamic event to handle Error, Forbidden etc…

If you do these changes (1,2,3,4,5) and this is still not working, then we have to see the api for the form

One more note…

I think that this button will do nothing without an action assigned there…

[mebroyles01]

I did re-read the post a couple of times about where Franse recommended the form and modal be placed. I believe I understood his last comment was to have the form within the modal.

Anyways, I found a way to make this work and it is keeping the modal within the form now. When the user clicks continue they are then presented with a modal asking them to verify their info. They can go back and make changes or continue to complete the form submission. Now, it is sending me an email, clearing the form, redirecting with a thank you. This is how I have it configured now and that works great. I had to make a couple of additional changes but it’s working.

My question is I am searching the forum for two more things:

1. When you have a form where you ask the user to check a box. I want to display what box they checked in the modal. I am trying to work with text binding to do this. I am thinking it would be some syntax like if checked then display type of format however, using text binding and not sure exactly how it should be formatted and written.

I know with text input is easy its {{form.name.value}} where form is the name of your form and name, is the name of the input, and value is what they typed. This is working; in my modal however, now I am now trying to get the value of what the checked and display that as well.

2. If a user checked a box and based on what they check I would like to redirect them to a page based on what they checked. Is this possible and where would I begin to put that.
   Long term I want to do DB work, however; I need to get some of these basics down first.

Thank you all how have posted to help.

[mebroyles01]

Was able to figure out the syntax displaying based on if box is checked or not…

Thank you.

[franse]

About 2) I’m guessing:

• Add the browser component
• Add a page flow with no auto-load
• Play with conditionals (checkbox has a “checked” state) and use browser to navigate
• Use a success dynamic event on the form, the actions will be: (maybe reset the form?) - close the modal - run the flow

I hope I was clear.