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:
and form-repair__form.php (simplified):
All pulled into index.php (snippet):
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 /> <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>