Developing (v7+)

External form with Ajax to prevent page reload. Need Help

Permalink August 03, 2011 at 8:48 PM

Im trying to create and external form that uses ajax to submit the form without reloading the page. I need an external form so that I can process the data and insert into a separate database, so i cant use the regular form block. Below are my code blocks for each page. I shortened the code to keep it simple. The form submits, but then in the main content section a whole new instance of my page appears. SO i have the main page, and withing the body, i get "thanks" for submission completion, but below it a whole new duplicate webpage within the content block. Can anyone help with this.

ajax_form.php

<?php 
$form = Loader::helper('form');
defined('C5_EXECUTE') or die("Access Denied.");
?>
<form  action="<?php echo $this->action('ajax_search')?>" method="post" id="ajax_search">
<div class="form2"><label for="fn">*First Name: </label> <?php echo $form->text('fn')?> &nbsp;
<label for="mn">M: </label> <input maxLength=50 size=2 name=mn id=mn class="font11"> &nbsp;
 <label for="ln">*Last Name: </label> <?php echo $form->text('ln')?></div>
<div class="form1"><label for="emai">*Email: </label> 
<?php echo $form->text('email')?> </div>
 <div class="form1"><input type="submit" name="submit" value="Submit" /></div>
</form>

controller/ajax_form.php

<?php 
defined('C5_EXECUTE') or die("Access Denied.");
class AjaxFormExternalFormBlockController extends BlockController {
      public function on_page_view() {
         $html = Loader::helper('html');
         $this->addHeaderItem($html->javascript('ajax_form.js'));
      }
   public function action_ajax_search() {
   $form = Loader::helper('form');
   $txt = Loader::helper('text');
   $fname = $txt->sanitize($_POST['fn']);    
   $mname = $txt->sanitize($_POST['mn']);    
   $lname = $txt->sanitize($_POST['ln']);  
   $email = $txt->sanitize($_POST['email']);  
   $db = Loader::db();

Viewing 15 lines of 21 lines. View entire code block.

<?php 
defined('C5_EXECUTE') or die("Access Denied.");
class AjaxFormExternalFormBlockController extends BlockController {
 
      public function on_page_view() {
         $html = Loader::helper('html');
         $this->addHeaderItem($html->javascript('ajax_form.js'));
      }
 
   public function action_ajax_search() {
 
 
   $form = Loader::helper('form');
   $txt = Loader::helper('text');
 
   $fname = $txt->sanitize($_POST['fn']);    
   $mname = $txt->sanitize($_POST['mn']);    
   $lname = $txt->sanitize($_POST['ln']);  
   $email = $txt->sanitize($_POST['email']);  
 
 
   $db = Loader::db();
   $v = array('','$fname', '$mname', '$lname', '$email' );
   $q = "INSERT INTO my_table (id,  fname, mname, lname, email) VALUES (?,?,?,?,?)";
   $ok = $db->Execute($q, $v);
 
   echo "thanks";
    }    
 
 
}

ajax_form.js

jQuery(document).ready(function(){
   $('#ajax_search').submit(function(){              
      var action = $(this).attr('action');
      $.post(action, { 
         actio: $('#actio').val(),
         fn: $('#fn').val(),
         ln: $('#ln').val(),
         mn: $('#mn').val(),
         email: $('#email').val(),
      },
         function(data){
            $('#ajax_search #submit').attr('disabled','');
            $('.response').remove();
            $('#ajax_search').before('<p class="response">'+data+'</p>');
             $('#ajax_search').slideUp();

Viewing 15 lines of 20 lines. View entire code block.

jQuery(document).ready(function(){
   $('#ajax_search').submit(function(){              
      var action = $(this).attr('action');
      $.post(action, { 
         actio: $('#actio').val(),
         fn: $('#fn').val(),
         ln: $('#ln').val(),
         mn: $('#mn').val(),
         email: $('#email').val(),
 
      },
         function(data){
            $('#ajax_search #submit').attr('disabled','');
            $('.response').remove();
            $('#ajax_search').before('<p class="response">'+data+'</p>');
 
             $('#ajax_search').slideUp();
         }
      ); 
      return false;
   });
});