- 
  Notifications
 
You must be signed in to change notification settings  - Fork 908
 
Adjusted html & JS files to handle multiple form submissions on one page #228
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
Thanks for opening the PR @Confidenceiskey !
Re: iife version, I would prefer having a move like this to its own commit, in the same file. We don't want two files with the same code. I am totally game with moving code into an IIFE since that doesn't pollute the global state.
Since we would be breaking assumptions on class vs id "gform", I would also suggest moving that change into its own commit. This will need to be highlighted in the readme.
Those two changes above are kind of separate from the multiple forms addition. They should be in separate commits, and they could be in a separate PR too (though for your sake, not a hard requirement).
For the sake of the tutorial, I think we want the main HTML form to just be one form - it should mostly stay the same I think. A new folder for "examples" or "advanced" examples could be made, and just link your HTML form in the readme as an example of two forms working together. That'd be a great addition! 👍
Nice work! Let me know if you are interested in any of that, otherwise I can take it on and adjust your changes on another branch into new PRs.
I can go back to the original js code version, simply change that to an IIFE and do a PR. No problem.
If you are keeping the multiple form submissions as a link in 'examples' or placed in an advanced section, then would your second paragraph even be necessary to do?
I hope that can be added to the readme (the action url just needs to be stripped out so I don't get random e-mails). I'm not 100% where to place it in the readme file, so maybe it is best if you could do that?
Thanks and hopefully someone will find it helpful in the future.
Edit: Excuse my ignorance/lack of knowledge of git, but I'm unable to fork the project twice. What is the best way to go about getting the original files, so I can make the changes & push a new PR?
If you are keeping the multiple form submissions as a link in 'examples' or placed in an advanced section, then would your second paragraph even be necessary to do?
I believe so, ideally the advanced example still uses the one js file. :) Hope that makes sense! I'd be happy to whip up the example with something working easily enough (and I also just disable the emails when I deploy for that reason!).
Edit: Excuse my ignorance/lack of knowledge of git, but I'm unable to fork the project twice. What is the best way to go about getting the original files, so I can make the changes & push a new PR?
By all means, happy to help! You are absolutely right, you can only fork the project once. In git, you can create multiple branches and each pull request can come from a different branch. You can give them descriptive names, e.g. use-an-iife for that other branch/PR. git makes branching super easy to do clientside, and I believe it can be done from github's interface possibly. If it is a a bit tricky, no worries, we can create another issue for it and I can open a PR for that when I get around to cleaning up our backlog at some point soon!
Thank you @mckennapsean!
Yes that makes sense! Only way to do that if you just want a link to 1 JS file. I can also do that.
Awesome, thank you for that explanation! That helps me a lot. It is good to know that I was on the right track as I had created a master_iife branch, but wasn't sure if this was the correct way to go about it.
 
 
 
 GBressler
 
 
 
 commented
 Jun 18, 2018 
 
 
 
Thanks for this! I’ve found this PR to be very helpful, but I was wondering if there was a good way to make the Thank you Message (line 128) and the submitted gform (line 121) revert back to display: none and display: block (respectively). I tried to play with a setTimeout function, but had no success.
As this PR allows us to submit forms multiple times it seems problematic that after someone submits the form and tries to access the same form (or a different one) that they are greeted by the Thank you Message, instead of a blank form. Hopefully there is a simple way to retain the Thank You Message and have the form reload, but it has escaped me thus far. I am relatively new to programming/js and would greatly appreciate any help that could be provided.
@Confidenceiskey - I created a separate PR for just the IIFE #235 so no need for that file.
I also feel like this is not quite what we want. Should we really be packaging up data for both forms when you submit one? It makes the code have an extra layer of trickiness, and form names could collide and cause issues with storing/saving the data. Why even have two forms if you want them submitted together? Why not architect that as a single form?
I do think we should leave our index.html as a simple, single form example, but we could have an advanced multi-form example linked from the readme, basically your index.html here as its own file..
My thought was that we should be just calling our form submission logic on each gform on the page. Then the PR is actually quite small just to loop adding the logic. @Confidenceiskey does this make sense? do you have the time to make those changes? if not, I can look at this and whip up something sometime.
@GBressler glad to hear this has been a help - you can do anything you want, make the thank-you message appear for a certain number of milliseconds or just have it appear after submission. there are plenty of UI libraries out there to consider that may make it easier for you to use some JS and call that in place of our thank-you div hiding/showing functionality. if you have more questions, I would encourage you to seek a Q&A help site for more assistance, but if you have any problems or issues feel free to open an issue for that. these PRs are more for finalizing discussion on the code to get it merged.
Thank you for your contribution & for getting the ball rolling on this one @Confidenceiskey !
After digging into the issue, the desired solution for the tutorial is a little bit different, see #179
Basically, we want to use the class-name instead, and run the listener on each gform class. That way, each form has its own submission handled separately, rather than all in one request. Also, the thank-you divs and such will be made customizable by the form as well.
Since the desired solution differs from this PR, I am closing this. Feel free to open a new PR tackling some of the solution in #179 ^ but no worries if not, it's on our roadmap. Thanks for bringing some ideas to the table and helping us narrow down the solution, it's been very helpful!
I updated the HTML file so that there are 2 forms on there for testing purposes.
I changed the JS file so it can now handle multiple form submits. I also added an IIFE version of the JS file.
Note that I only thoroughly tested it with 2 forms and I assume that it would work with 3 or more forms. I couldn't justify testing it with 3 or more forms.
All fields must be complete in order for the form to be submitted. This might need to be changed so that only the e-mail field is required.
Open to feedback and thoughts.