CMS Made Simple Forums

Code: Select all

{content}

Code: Select all

{FormBuilder form='contact'}

Code: Select all

<div id="ajax_form_wrap">
<div class="throbber"><img src="uploads/images/throbber.gif" alt="Sending..." /></div>
{FormBuilder form='contact'}
</div>

Code: Select all

jQuery(document).ready(function(){

// create a jquery object so you don't have to do multiple searches for the same element
var contact_form = $('#ajax_form_wrap form');

 // pre-submit callback 
  function formValidate(formData, jqForm, options) { 
  
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    // var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    // alert('About to submit: \n\n' + queryString); 
 
    
    // if it validates Insert Throbber
    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});

   // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
 
    return true;
  };

  // Prepare form
    var options = { 
        target: '#ajax_form_wrap',  // target element(s) to be updated with server response 
        beforeSubmit: formValidate,  // pre-submit callback 
        type: 'post'
        // there are more options available, see jquery form plugin documentation
  	};
 
// IMPORTANT  use the Page ID for the "form" page on YOUR SITE. Mine was 81, yours is different
 // Change return page in hidden input to use the FORM ajax page (id=81)
 $('#ajax_form_wrap form input[name*=returnid]').attr('value','81');
// IMPORTANT use the page alias for the "form" page of YOUR SITE.  Mine was "form", your might be different.
 $('#ajax_form_wrap form input[name=page]').attr('value','form');
 
 // Change Form Action URL  and call AjaxForm
// Don't forget to change the domain and the page alias to match your website
 contact_form.attr('action','http://yourwebsite.com/index.php?page=form').ajaxForm(options);

});

Code: Select all

.throbber { display:none; margin:40px auto; }

Code: Select all

{literal}
<__script__ type="text/javascript" src="/uploads/JS/jquery.form.js"></__script>

<__script__ type="text/javascript">
jQuery(document).ready(function(){

var contact_form = $('#ajax_form_wrap form');
  function formValidate(formData, jqForm, options) { 
    // var queryString = $.param(formData);
    // var formElement = jqForm[0];
    // alert('About to submit: \n\n' + queryString);
    contact_form.fadeOut("slow", function(){$(".throbber").fadeIn("slow")});
    return true;
  };

  // Prepare form
    var options = {
        target: '#ajax_form_wrap',  
        beforeSubmit: formValidate,  
        type: 'post'
     };

$('#ajax_form_wrap form input[name*=returnid]').attr('value','{/literal}{$content_id}{literal}');
$('#ajax_form_wrap form input[name=page]').attr('value','{/literal}{$page_alias}{literal}');

contact_form.attr('action','{/literal}{$cgsimple->self_url()}{literal}?showtemplate=false').ajaxForm(options);

});
</__script>
{/literal}

Code: Select all

$('#mysubmitbutton').click(function(e) {
e.preventDefault();
// do what you want to do before the post
// then do your ajax post
// then on success, do want you want next, eg replace a <div> with the result or redirect, whatever.

});