Form values being suppressed within modaal popup

[ankuj]

Hello,

I am facing a issue while submitting a form from within a modaal pop-up. While the form submits in normal circumstances if placed on an independent page, its values (namely name, email and message) are empty on submitting the from from within a modaal pop-up:

`

                                                    <div id="modaal">
                                                        <div class="row no-margin content-section">
                                                            <div class="text">
                                                                <h2 class="margin-bottom-null title left"></h2>
                                                                <div class="row padding-onlytop-md">
                                                                    <div class="col-md-12" id="1">
                                                                    </div>
                                                                </div>
                                                                <div class="row padding-onlytop-sm">
                                                        <div class="col-md-5 padding-leftright-null">
                                                            <div class="text padding-md-top-null">
                                                                <div class="box-form">
                                                                    <form id="contact-form" action="/send" method="POST">
                                                                        <div class="row no-margin">
                                                                            <div class="col-md-12 padding-leftright-null">
                                                                                <div class="control-group">
                                                                                    <label for="name">Name<sup>*</sup></label>
                                                                                    <!-- <input type="text" class="form-control" id="recipient-name"> -->
                                                                                    <input class="form-field" name="name" id="name" type="text" placeholder="Your Name"/>
                                                                                </div>
                                                                            </div>
                                                                            <div class="col-md-12 padding-leftright-null">
                                                                                <div class="control-group">
                                                                                    <label for="mail">Email<sup>*</sup></label>
                                                                                    <input class="form-field" name="mail" id="mail" type="text" placeholder="Your Email"/>
                                                                                    <!-- <input type="text" class="form-control" id="recipient-email"> -->
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="row no-margin">
                                                                            <div class="col-md-12 padding-leftright-null">
                                                                                <label for="messageForm">Message<sup>*</sup></label>
                                                                                <!-- <textarea class="form-control" id="message-text"></textarea> -->
                                                                                <textarea class="form-field" name="messageForm" id="messageForm" rows="6" placeholder="Your Message"></textarea>
                                                                                <div class="submit-area padding-onlytop-sm">
                                                                                    <div class="control-group">
                                                                                        <!-- <button type="submit" class="btn btn-primary">Send message</button> -->
                                                                                        <input type="submit" id="submit-contact" class="btn-alt active shadow" value="Send Message"/>
                                                                                        <div id="msg" class="message"></div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--  END Contact Form  -->
                                                       </div>
                                                            </div>
                                                        </div>
                                                    </div>

`

Hoping someone has some bright ideas :) Thanks in advance!

[krosenk729]

Could you use a confirm modal like this?

    <script type="text/javascript">
        $('.showmodal').modaal({
            type: 'confirm',
            confirm_button_text: 'Send message',
            confirm_cancel_button_text: '',
            confirm_title: 'Confirm Action XYZ',
            confirm_content: `
            <form>
            <div class="row no-margin">
            <div class="col-md-12 padding-leftright-null">
            <div class="control-group">
            <label for="name">Name<sup>*</sup></label>
            <input class="form-field" name="name" id="name" type="text" placeholder="Your Name"/>
            </div>
            </div>
            <div class="col-md-12 padding-leftright-null">
            <div class="control-group">
            <label for="mail">Email<sup>*</sup></label>
            <input class="form-field" name="mail" id="mail" type="text" placeholder="Your Email"/>
            </div>
            </div>
            </div>
            <div class="row no-margin">
            <div class="col-md-12 padding-leftright-null">
            <label for="messageForm">Message<sup>*</sup></label>
            <textarea class="form-field" name="messageForm" id="messageForm" rows="6" placeholder="Your Message"></textarea>
            </div>
            </div>
            </div>
            </form>`,
            confirm_callback: function() {
                var name = $("#name").val(), mail = $("#mail").val(), messageForm = $("#messageForm").val();
                $.post("/send", {name, mail, messageForm},
                function(){
                    $("input, textarea").val("");
                });
            },
            confirm_cancel_callback: function() {
                $("input, textarea").val("");
            }
        });
    </script>

[danhumaan]

hi @ankuj, were you able to resolve your issue? Apologies for the delayed reply. Without directly testing your example (due to lack of time) I can't say we've experienced similar issues ourselves and we've extensively used Modaal in our own projects with forms.

[danhumaan]

Hi @ankuj, spent a little time trying to replicate this but without luck. I'm going to close this given the age and inability to replicate. Please comment if you are able to provide more information or even a demo to show your working implementation.