Hi,

I have a tricky problem in my latest website that uses a contact from and a multi-tab page.

The website is single-page, and has three tabs, one of which is "Contact Us". This has a form that can be completed and send via email using the "Submit" button. However, once this is clicked, the page refreshes and returns the user to the first tab on the page, not the Contact Us page which is the third tab. Also, if there are any errors in the data supplied in the form, the user has to click back into the tab to see the errors.

Ideally, I would like the flow to work like this:
1. User enters data in the contact form
2. User clicks "Submit"
3a. (If data is OK) - Alert is displayed saying the data has been sent, and (optional) the fields are reset
3b. (If the data is not OK) - Alert is displayed saying that there are errors with the data and the erroneous fields are highlighted (I have got the highlighting to work).

Can this be done with Couch?

The site is bootstrap based and uses their multi-tab option.

Many thanks for your help.

Mark

[cheesypoof]

Place this code in the head after all your other scripts:

Code: Select all

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

This script prevents the page from refreshing on a contact form submission, posts the form, and replaces the contact content area with new html. It assumes your contact form has an 'id' of 'contact-form' and your contact content area can be found with a 'class' of 'tab-pane' and an 'id' of 'contact'. You can always change these selector values if you like. I'm no JavaScript expert, so there very well could be something I have not thought to account for in this script.

The Twitter Bootstrap tabs depend on JavaScript to work, so the solution I detailed above will have no effect for visitors with JavaScript disabled.

To display the alerts, try something like this:

Code: Select all

<cms:form name='contact-form' anchor='0' method='post'>
     <cms:if k_success >
          **SEND_MAIL TAG**
          Success Message
     <cms:else/>
          <cms:if k_error >
          Error Message
          </cms:if>
          **INPUTS/SUBMIT BUTTON**
     </cms:if>
</cms:form>

I hope all of this has made sense.

[KK]

cheesypoof's solution is definitely more elegant but as a quick-n-dirty non-AJAX method I suppose we can also try injecting into the page some JavaScript that shows the contact tab. This we do only when the form is submitted (regardless of whether the submission succeeds or fails) -

Code: Select all

<cms:form name='contact-form' anchor='0' method='post'>
   <cms:if k_submitted >
      <script type="text/javascript">
         $(document).ready(function() {
            $('#myTab a:last').tab('show'); // Select last tab
         });
      </script>
   </cms:if>
   
   ...
   
</cms:form>

As outlined in Bootstrap's documentation (http://twitter.github.com/bootstrap/jav ... .html#tabs),
the tab should have an anchor with href for this to work.

Thanks, both! I'll try your suggestions and let you know how I get on.

Mark

Hmmm... I still can't quite get it to work.

I added Cheesypoof's script to the document.ready function that I already had in place for activating the carousel, and updated the IDs to match his script, but it still doesn't quite work, or works only the second time you click it.

The javascript I have is:

Code: Select all

<script type="text/javascript">
    $(document).ready(function(){ 
         $('#mycarousel').carousel({interval: 4000});
      $('.accordion').on('show hide', function(e){
        $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-down icon-chevron-right', 200);
      });

    $("#contact-form").submit(function(event) {
          event.preventDefault();
      $.ajax({
         type: "POST",
         url: $(this).attr("action"),
         data: $(this).serialize(),
         success: function(data) {
            $(".tab-pane#lC").html($(data).find(".tab-pane#lC").children());
            }
          });
          });
      });

  </script>

(at the end of the document, where all my js is)

and the line for the Send button is:

Code: Select all

<button type="submit" class="btn btn-small btn-primary" id='send_message' value='Submit' name='submit'><i class=icon-envelope></i> Send</button>

My CMS form code is:

Code: Select all

<cms:form method="post">
              <cms:if k_success >
                <div class="alert alert-success">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                  Thanks for your email. We will get back to you shortly.
                </div>        
                <cms:send_mail from=k_email_from to=k_email_to subject='Feedback from your site'>
                The following is an email sent by a visitor to your site:
                <cms:show k_success />
        </cms:send_mail>
    </cms:if>

and the end of my URL transforms to:

?name=&number=&email=&comments=&submit=Submit&k_hid_kformname0=kformname0

Any idea what I am doing wrong please?

Thanks,

Mark

[cheesypoof]

I haven't confirmed this through testing, but you should try making these changes:

<button type="submit" class="btn btn-small btn-primary" id='send_message' value='Submit' name='submit'><i class="icon-envelope"></i> Send</button>

...

<cms:form method='post' name='contact-form' id='contact-form' anchor='0'>

Remove the name attribute from the <button> tag and add the name, id, and anchor attributes to the 'form' tag.

If this still doesn't work, I'll give it another look. Let me know.

Finally had some time to look at this again.

The issue was a javascript one. As per Bootstrap advice, I was calling all the .js files at the end of the file. Once I moved JQuery to the top of the page the issue was solved.

Many thanks,

Mark