Hello,
Second site with couch. loving it so far but have become stuck.
If anyone can point me in the right direction i'll be incredibly grateful.

I have a single page site, using the method described in
https://www.couchcms.com/forum/viewtopic.php?f=2&t=7731

It uses the technique from
https://www.couchcms.com/forum/viewtopic.php?f=8&t=11459&p=30496&hilit=ajax+form#p30493
to submit form without page reload.

The form uses client side validation for live checking, and cheesypoofs html5 input technique from
https://www.couchcms.com/forum/viewtopic.php?p=13095#p13095

The Problem
The form validates & submits perfectly. I just can't for the life of me figure out how to display success errors, either within form div#success2 or outside div#success1. Preferably they would be in div#success1 in form, not require an id, and lose div#success2.

The contact form is a DBF using form-repair__data.php:

Code: Select all

<?php require_once( '../cms.php' ); ?>
<cms:template title='Repair Booking Form Data' zname='repair_form' clonable='1' zexecutable='0'>
    <cms:editable name='contact_form__name'    required='1' type='text' />
    <cms:editable name='contact_form__email'   zrequired='1' type='text' validator='email' />
    <cms:editable name='contact_form__number'  zrequired='1' type='text' />
    <cms:editable name='contact_form__type'    zrequired='1' type='dropdown'
        opt_values='Please choose=- | Bike | Scooter | Skateboard | Pram | Wheelchair | Other' />
    <cms:editable name='contact_form__desc'    zrequired='1' type='textarea' />
    <cms:editable name='contact_form__detail'  zrequired='1' type='textarea' />
    <cms:editable name='contact_form__when'    zrequired='1' type='dropdown'
        opt_values='Please choose=- | Now | Today | Tomorrow | This week | Next week | Whenever' />
    <cms:editable name='contact_form__consent' zrequired='1' type='checkbox'
        opt_values='I agree' />
</cms:template>
<?php COUCH::invoke(); ?>

and form-repair__form.php (simplified):

Code: Select all

<?php require_once( '../cms.php' ); ?>
<cms:template title='Repair Booking Form Form t' executable='0'>
    <cms:editable type='group' name='grp_form' label='Form'>
   
        <cms:form title='Repair Booking Form Form'
              masterpage='c/templates/form-repair__data.php'
              mode='create'
              enctype='multipart/form-data'
              method='post'
              anchor='0'
              target='transFrame'
              action="<cms:show k_template_link />"
              class='b-form' 
              data-validate=''>
            
            <div id="success1" style="display:none;" class="alert -bgc-Positive -c-White">
                <strong>Success#1:</strong> Your application has been submitted.
                <cms:each k_success sep='\n'>
                    <cms:show item /><br>
                </cms:each>
            </div>
            
            <cms:if k_success>
                                
                <cms:db_persist_form
                    _invalidate_cache='0'
                    _auto_title='1'
                    contact_form__name   = frm_contact_form__name />
                
                <div id="success2" class="alert -bgc-Positive -c-White">
                    <strong>Success#2:</strong> Your application has been submitted.
                    <cms:each k_success sep='\n'>
                        <cms:show item /><br>
                    </cms:each>
                </div>
                
            </cms:if>
            
            <cms:if k_success>
                <cms:abort>
                    <script>console.log(this); window.parent.document.getElementById('success1').style = "display: block;";</script>
                </cms:abort>
            </cms:if>

            <cms:hide>
                <cms:input name='contact_form__name'    type='bound' />
            </cms:hide>            
            
            <fieldset class="b-form__fieldset">
                <legend>About you</legend>
                <div class="b-form__group">
                    <label class="b-form__label">
                        Name
                        <input required type="text" name="f_contact_form__name" placeholder="Your name" class="b-input b-form__item">
                        <span class="b-input__help">What would you like to be called.</span>
                    </label>
                </div>
            </fieldset>
            <cms:input type='submit' name='submit' value='Submit'/>

        </cms:form>
    </cms:editable>
 </cms:template>
<?php COUCH::invoke(); ?>

All pulled into index.php (snippet):

Code: Select all

               <iframe style="display:none;" name="transFrame" id="transFrame"></iframe>

                <article id="formBooking" class="b-contentItem -form">

                    
                    <header>
                        <cms:pages masterpage='c/templates/form-repair__header.php'>
                            <cms:lazy_load>
                                <h1 class="b-contentItem__heading"><cms:show main_heading /></h1>
                                <h3 class="b-contentItem__heading -bdBottom -stuntman__bd z-c-White z-bgc-Neutral"><cms:show contact_text />&nbsp;<a class="b-btn -link" href="tel:<cms:get_custom_field 'contact_number_repair' masterpage='c/templates/globals.php' />"><cms:get_custom_field 'contact_number_repair' masterpage='c/templates/globals.php' /></a></h3>
                                <br>
                                <p class="b-contentItem__text"><cms:show description /></p>
                            </cms:lazy_load>
                        </cms:pages>                        
                    </header>
                    <cms:pages masterpage='c/templates/form-repair__form.php'>
                        <cms:lazy_load>
                            <cms:show grp_form />
                        </cms:lazy_load>
                    </cms:pages> 
            </article>

[trendoman]

Before any deep investigation: placing a form into a richtext region and outputting it as richtext editable is, very probably, a source of trouble.

Thanks for the response trendoman.
I'd forgotten I'd done that with the richtext region.
I couldn't figure out how to show the form from the template otherwise. I'm sure I'm missing something, so will have another hunt around.
Unless anyone can point me in the right direction.

Edited initial post to show now using editable group to enclose form.
Don't know if that is any better than a richtext, thought at least its not a nested editable region (I now know this is a no no).
Thanks again

[trendoman]

Hey, this is a total mess. Result-wise it is best someone codes it for you. Alternatively, some other saint soul would take time to re-teach you several concepts of CouchCMS that seem to be missing. At least review section "Embedding snippets" from tutorials http://docs.couchcms.com/tutorials/port ... /blog.html

Thanks for the honest words. Am feeling a little lost.
Will read link, (and a lot else I expect) and try to work a better solution again.
Cheers

Just for info, I inherited one page site which use js to duplicate a form for use in a modal dialog.
I was hoping to use couchcms to replace the js, but got a bit flummoxed.
If anyone reads this, would a clonable template be the best option?

trendoman, a million thanks. Your honesty and pointer saved my frazzled mind.

swapped template for snippet; made sense of iframe and k_success issues, found about 100 bugs/typos in js; etc.

now all seems to be working perfectly. emails sent, form data persisted, success/erro messages displayed, validation client&server done.

[trendoman]

Wholeheartedly welcome. Seems you got talent and fixed things in no time. Keep posting more issues