@All, Greetings from India!!!

I have a contact form in a modal. What I need to do is this:
1. Open the Form in a Modal : DONE
2. Fill the form:
2.1: Check for Errors, if errors are encountered, allow the person to correct them.
2.2: If no errors, submit the form and display success message

I referred to the post: viewtopic.php?f=4&t=7417, but I feel I am doing something wrong.
Here is my form code:

Code: Select all

<!-- Button to open the form -->
<button class="btn btn-danger button genxcoders-fc-white" type="button" data-toggle="modal" data-target="#site-visit">
                            <i class="fa fa-map-marker"></i> Request Site Visit
                        </button>
<!-- Button to open the form -->

<!-- Site Visit Form -->
        <div class="modal fade" id="site-visit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
            <div class="modal-content">
                   <cms:form action='' name="site-visit" id="site-visit-pp">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel" class="no-margin">VISIT PROJECT: <cms:show k_page_title /></h4>
                        </div>
                  
                        <div class="modal-body">                     
                     <cms:capture into='my_buffer'>
                     <div class="row">
                        <div class="col-md-4">
                           <label>First Name * <cms:if k_error_first-name><small><span id='first-name_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                           <div class="ptop-10"></div>
                        </div>
                        <div class="col-md-8">
                           <cms:input name="first-name" id="first-name" type="text" class="input" required='1' />
                           <div class="ptop-10"></div>
                        </div>
   
                        <div class="col-md-4">
                           <label>Last Name * <cms:if k_error_last-name><small><span id='lastname_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>     
                           <div class="ptop-10"></div>
                        </div>
                        <div class="col-md-8">
                           <cms:input name="last-name" id="last-name" type="text" class="input"  required='1'/>
                           <div class="ptop-10"></div>
                        </div>
                        
                        <div class="col-md-4">
                           <label>Mobile * <cms:if k_error_mobile><small><span id='mobile_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                           <div class="ptop-10"></div>
                        </div>
                        <div class="col-md-8">
                           <cms:input name="mobile" id="mobile" type="text" class="input" required='1' />
                           <div class="ptop-10"></div>
                        </div>
                           
                        <div class="col-md-4">
                           <label>Visit Date * <cms:if k_error_vdate><small><span id='vdate_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                           <div class="ptop-10"></div>
                        </div>
                        <div class="col-md-8">
                           <cms:input name="vdate" id="vdate" type="datetime" class="input" required='1' />
                           <div class="ptop-10"></div>
                        </div>
                     </div>
                     </cms:capture>
                        </div>
                  
                  
                  <cms:if k_success >   
                     <p id='mail_success' class='success'>Thank you. We will get back to you as soon as possible.</p>

                     <cms:send_mail debug='1' from=k_email_from to=k_email_to subject='Project Visit Request - <cms:show k_page_title />'>
                     The following is an email sent by a visitor to your site:
                     <cms:show k_success />
                     </cms:send_mail>

                  <cms:else />
                     <cms:show my_buffer />
                  </cms:if>
                        
                  <div class="modal-footer">
                     <cms:if "<cms:not k_success />" >
                            <input type="submit" id="send" class="btn btn-danger button genxcoders-fc-white" value="<i class="fa fa-send"></i> Submit Request" />
                     </cms:if>
                        </div>
               </cms:form>
                </div>
            </div>
        </div>

Also, I feel i should mention this. My form is on the Page View (Blog Page View, from the tutorials). So when I submit the form, it redirectes to the list view.

Thanks in advance.

Regards,
GenXCoders

@All...

BUMP!!!

Oops!!!

Any idea? anyone!!!

[KK]

Try this working example -

Code: Select all

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
        <!-- Button to open the form -->
        <button class="btn btn-danger button genxcoders-fc-white" type="button" data-toggle="modal" data-target="#site-visit">
            <i class="fa fa-map-marker"></i> Request Site Visit
        </button>

        <!-- Site Visit Form -->
        <div class="modal fade" id="site-visit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <cms:capture into='my_form_buffer'>
                        <cms:form action='' name="site-visit" id="site-visit-pp" method='post' anchor='0'>
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel" class="no-margin">VISIT PROJECT: <cms:show k_page_title /></h4>
                            </div>

                            <div class="modal-body">                     
                                <cms:capture into='my_buffer'>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>First Name * <cms:if k_error_first-name><small><span id='first-name_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                                            <div class="ptop-10"></div>
                                        </div>
                                        <div class="col-md-8">
                                            <cms:input name="first-name" id="first-name" type="text" class="input" required='1' />
                                            <div class="ptop-10"></div>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Last Name * <cms:if k_error_last-name><small><span id='lastname_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>     
                                            <div class="ptop-10"></div>
                                        </div>
                                        <div class="col-md-8">
                                            <cms:input name="last-name" id="last-name" type="text" class="input"  required='1'/>
                                            <div class="ptop-10"></div>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Mobile * <cms:if k_error_mobile><small><span id='mobile_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                                            <div class="ptop-10"></div>
                                        </div>
                                        <div class="col-md-8">
                                            <cms:input name="mobile" id="mobile" type="text" class="input" required='1' />
                                            <div class="ptop-10"></div>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Visit Date * <cms:if k_error_vdate><small><span id='vdate_error' class="error" style="display: inline-block;">Required</span></small></cms:if></label>
                                            <div class="ptop-10"></div>
                                        </div>
                                        <div class="col-md-8">
                                            <cms:input name="vdate" id="vdate" type="datetime" class="input" required='1' />
                                            <div class="ptop-10"></div>
                                        </div>
                                    </div>
                                </cms:capture>
                            </div>


                            <cms:if k_success >   
                                <p id='mail_success' class='success'>Thank you. We will get back to you as soon as possible.</p>

                                <cms:send_mail debug='1' from=k_email_from to=k_email_to subject='Project Visit Request - <cms:show k_page_title />'>
                                    The following is an email sent by a visitor to your site:
                                    <cms:show k_success />
                                </cms:send_mail>

                            <cms:else />
                                <cms:show my_buffer />
                            </cms:if>

                            <div class="modal-footer">
                                <cms:if "<cms:not k_success />" >
                                    <input type="submit" id="send" class="btn btn-danger button genxcoders-fc-white" value="Submit Request" />
                                </cms:if>
                            </div>
                        </cms:form>
                    </cms:capture>

                    <cms:if "<cms:is_ajax />">
                        <cms:abort><cms:show my_form_buffer /></cms:abort>
                    <cms:else />
                        <cms:show my_form_buffer />
                    </cms:if>
                </div>
            </div>
        </div>

        <script type="text/javascript">
        $(document).ready(function() {
           $("#site-visit-pp").submit(function(event) {
              event.preventDefault();
              $.ajax({
                 type: "POST",
                 url: $(this).attr("action"),
                 data: $(this).serialize(),
                 success: function(data) {
                    $("#site-visit-pp").html($(data).children());
                 }
              });
           });
        });
        </script>
    </body>
</html>

The main difference between this and the solution mentioned at viewtopic.php?f=4&t=7417 is this -
The original solution retrieved the full HTML via AJAX and them parsed out the form block to update the screen

Code: Select all

success: function(data) {
    $("#contact_form").html($(data).find("#contact_form").children());
}

A possible drawback of this method was that any malformed markup in the full HTML could cause the JS above to fail (it was happening in your case).

In the adapted method I used above, we isolate and return only the form when called via AJAX - please note how we buffer the form and return only that portion id called via AJAX -

Code: Select all

<cms:capture into='my_form_buffer'>
    <cms:form action='' name="site-visit" id="site-visit-pp" method='post' anchor='0'>
        ..
        ..
    </cms:form>
</cms:capture>

<cms:if "<cms:is_ajax />">
    <cms:abort><cms:show my_form_buffer /></cms:abort>
<cms:else />
    <cms:show my_form_buffer />
</cms:if>

So now our JS becomes -

Code: Select all

success: function(data) {
    $("#site-visit-pp").html($(data).children());
}

I haven't anything about styling your code in any way so anybody using this code will have to do it himself.

Hope it helps.

@KK Sir,

I tried the code. It functions perfectly to what i required.
When i try it as an independent code it functions.
But when i try it with the entire page code, it does the following:
1. the modal opens when the button is clicked
2. if in a deliberate attempt of getting the errors i submit the form with all fields blank, the page reloads, and the modal is not displayed.
3. when i click the modal activation button, it pops up, with the errors displayed.
4. if i fill the form and submit it, the page reloads and i need to click the modal activation button. on doing so it displays the success message.

A possible drawback of this method was that any malformed markup in the full HTML could cause the JS above to fail (it was happening in your case).

i checked the complete code, there is nothing that i can find which makes the HTML malformed. Is it because of any other JS that this might happen?

Regards,
Aashsih

@KK Sir...

[KK]

Aashish, it appears to be a front-end issue and you are better placed to debug what you coded yourself.
If you still think you need my help, PM me the access creds to your site and I'll take a look.

@KK Sir,
I will do the debugging once again.

Thanks!