search

jonmbake / bootstrap3-contact-form

Bootstrap 3 Contact Form with Captcha
MIT License
169 stars 84 forks source link

Using Form in a Modal #29

Open purplegirldiana opened 7 years ago

purplegirldiana commented 7 years ago

Thanks for this wonderful contact form, Jon! :-)

I have the form working fine on a regular web page. However, I still can't get the form to work in a Bootstrap 4 modal after spending the better part of the last two days trying to find a solution. When attempting to submit the form when its displayed in a modal, everything works fine up to and including the reCaptcha, but then nothing happens upon clicking the send button. I'm learning, but at this point my knowledge of JS is rudimentary at best, so I haven't had any luck with troubleshooting the problem. Among the things I have tried is adding $("#myModal").on('shown.bs.modal', to the beginning of contact-form.js, but it made no difference. Any ideas on how I can make the form work in a modal?

jonmbake commented 7 years ago

Hmm... As long as you copied everything within the form tag in index.html to the modal body, it should work. Are there any errors in the console? If you open up the console when the modal is open, and run $("#feedbackSubmit") does it return the button w/i your modal? Also, make sure there is only one button on the page with an id of feedbackSubmit.

purplegirldiana commented 7 years ago

Yes, I copied everything within the form tag to the modal body. There is only one button on the page. There are no errors showing in the Firebug console. Running $("#feedbackSubmit") does return the button. If I intentionally leave a required field blank or skip the reCaptcha, clicking the button does produce the appropriate error message. But, if the form is filled out correctly, nothing happens when the button is clicked.

jonmbake commented 7 years ago

If you go to the Network tab, is it actually making a request on Submit?

If this is publicly available on the web, email me at jonmbake@gmail.com and we'll get it figured out.

purplegirldiana commented 7 years ago

It turns out that the problem was that I had carelessly created duplicate IDs in the modal and it took me a while to notice this really simple, dumb error! The form works great in my modal now. Thanks to Jon for helping me via email in my effort to troubleshoot what turned out to be a nonexistent reCaptcha problem.