Store form data in MySQL with jQuery.ajax

Hi, I’m having problems processing a form so that I can save its data in my MySQL database. I’m using WordPress as CMS.

I’ve used this example: http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form

Read More

I’m pretty sure that the source of my problem is that I’m using the wrong url in the javascript. The error message only returns ‘undefined’ and Firebug reports a page not found 404 error.

So what would be the correct url?
Any help would be greatly appreciated.

This is my site structure:

Mywebsite (folder)      
  sl_register.tpl.php   
  includes    (folder)    
  storelocator (folder)
    process_frm_store.php
    frm_store.php
  js (folder)
    myscripts.js

And this is the logic of my site build up:

sl_register.tpl.php:

<?php
/*
  Template Name: SL - Register Store
*/  
  get_header();
  include_once 'includes/storeLocator/frm_store.php';
  get_footer();
?>

frm_store.php:

<form id="store_data_form" class="appnitro"  method="post" action="">
  <input id="store_active" name="store_active" type="hidden" value="pending" />
  <input id="store_name" name="store_name" type="text" value=""/> 
  <input id="store_street1" name="store_street1" type="text" value="" />
  <input id="saveForm" class="submitButton" type="submit" name="save" value="Save" />
</form>

process_frm_store.php:

<?php
  $myDB = new DAL(); 
  $myDB->connect();

  if (isset($_POST['save'])) 
  {
    $formData =  array(
      "name"=> mysql_real_escape_string($_POST['store_name']),
      "street1"=> mysql_real_escape_string($_POST['store_street1']),
      "zipcode"=> mysql_real_escape_string($_POST['store_zipcode']));

    $myDB->addNewStore($formData);
  }
?>

myscripts.js:

jQuery.processForms = function()
{
  jQuery('form#store_data_form').submit(function() 
  {
    var store_name = 'Test store'; //jQuery("input#store_name").val();
    var store_street1 = 'Sesamy street';//Set constant for testing
    var store_zipcode = '0574'; //Set constant for testing
    var dataString = 'name='+ store_name + '&street1=' + store_street1 + '&zipcode=' + store_zipcode;    
    jQuery.ajax(
    {   
      type: "POST",   
      url: "process_frm_store.php",   
      data: dataString,
      error: function(XMLHttpRequest, textStatus, errorThrown) 
      { 
        alert(errorThrown); // Just for debugging
        jQuery('#suggestNewStore div.error').fadeIn(); 
      },
      success: function() 
      {
        alert('It works!');
        jQuery('#suggestNewStore div.success').fadeIn();   
      }   
    });   
    return false;      
  });
}

Leave a Reply

2 comments

  1. It it simpler to user the absolute path like http://www.yourwebsite.com/storelocator/process_frm_store.php to be on the safe-side.

    Otherwise the url param of the .ajax method should be storelocator/process_frm_store.php because your ..js file is included and executed in your base path, outside the js or storelocator folders

  2. You have <?php tags wrapped around your include_once in sl_register.tpl.php when it is already inside of <?php tags …unless you’re doing something that I don’t understand this is probably breaking something.