Developing (v7+)

Using AJAX to check database for valid value

Permalink January 23, 2013 at 12:38 AM

Hey all... I have been trying to do this for way too long, and it seems like it shouldn't be this big of an issue.

I have 1 field on a form in a single page. I would like the user to be able to enter a "code" into the field, submit it, and then without changing the page, check if that code is in a database, and if so, load the next page, if not, display a message somewhere on the same page indicating so.

Can someone please help point me in the right direction? I have tried using an ajax call for when the form submits, and then from there calling the single page's controller method of choice, but it will return the entire html page, rather than a true or false.

Any direction would help! Thanks!

mkly replied on Jan 23, 2013 at 1:31 am Permalink Best Answer Reply

Hello,
When working wih AJAX-y stuff, the "concrete5 way" these days is to create yourself a tools file. The big perk of a tools file is that you get concrete5 all bootstrapped with all the libraries etc loaded up and ready to go.

Let's create a tools file
/tools/check_it_out.php

In that file let's find something in the database and return a result.

<?php
defined('C5_EXECUTE') or die('Access Denied');
$db = Loader::db();
header("Content-Type: text/javascript; charset=utf-8");
if(
  $db->GetOne(
    'SELECT id FROM some_table WHERE code=?',
     array($_REQUEST['code'])
  )
) {
  header(' ', true, 200);
} else {
  header(' ', true, 404);
}

Ok, we have our new fancy database checked loaded up with a couple HTTP reposonse codes.

Let's write some javascript!
Now the tricky part here is that we don't have a javascript way of grabbing our tool's location. If you just have a single site at the root of the domain you can get away with just linking straight to it. Otherwise you will need to inject some php in there with a concrete5 library call to get the tools directory. Let's just pretend this is a one off for a site we're building to make things easier.

$(function() {
  var ajax_request = false;
  $('#my-form').submit(function(e) {
    if(ajax_request) {
      return true;
    }
    e.preventDefault();
    $.ajax({
      // This tools call only works if we
      // are not running concrete5 out of
      // a subdirecory etc
      url: '/index.php/tools/check_it_out',
      statusCode: {
        200: function() {
          ajax_request = true;

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

 
$(function() {
  var ajax_request = false;
  $('#my-form').submit(function(e) {
    if(ajax_request) {
      return true;
    }
    e.preventDefault();
    $.ajax({
      // This tools call only works if we
      // are not running concrete5 out of
      // a subdirecory etc
      url: '/index.php/tools/check_it_out',
      statusCode: {
        200: function() {
          ajax_request = true;
          $('#my-form').submit();
        },
        404: function() {
          $('#form-error').text('Not Found!').show();
        },
      },
      type: 'POST',
      data: {
        "code": $('#code-field').val()
      }
    });
  });
});

Anyhow, probably a typo in there. Hope it helps.

Best Wishes,
Mike

ecerney replied on Jan 23, 2013 at 2:49 am Permalink Reply

Awesome mkly! that helped me a lot!

A couple questions if you could help.. The it works doing it this way, when the code is found, and you do

$(".theForm").submit();

It starts a loop because submitting the form also calls the ajax again, thus it keeps happening over and over again. What could I do to submit the form without calling the ajax function again?

That could be it for now, I will have to figure out how to do the whole finding the tools folder instead of just hardcoding it like I am right now in a local dev environment, but that's future me problems :)

mkly replied on Jan 23, 2013 at 3:22 am Permalink Reply

Indeed, I updated the above to account for a loop. Oops.

Best Wishes,
Mike

ecerney replied on Jan 23, 2013 at 4:15 am Permalink Reply

I believe you meant to have it as

if (ajax_request) {
       return true;
    } else {
       ajax_request = true;
    }

So that the next time it will run the default submit, but I am running into a problem still. With my code, when submitting, if it finds the code, it will submit again, but it isn't actually submitting. You have to physically press submit again for it to go (in which case it works fine).

Here is my code

$(function() {
   var ajax_request = false;
  $(".theForm").submit(function(e) {  
    if (ajax_request) {
       return true;
    } else {
       ajax_request = true;
    }
     e.preventDefault();
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           //alert('Found Code!');
           ajax_request = true;

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

 
$(function() {
   var ajax_request = false;
  $(".theForm").submit(function(e) {  
    if (ajax_request) {
       return true;
    } else {
       ajax_request = true;
    }
     e.preventDefault();
 
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           //alert('Found Code!');
           ajax_request = true;
           $(".formerror").hide();
             $(".theForm").submit();
        },
        204: function() {
           //alert('No Code Matches');
           ajax_request = false;
           $(".formerror").show();
        },
        404: function() {
          alert('Page Not Found');
        }
      },
      type: 'POST',
      data: {
        "code": $('#code').val()
      }
    });
  });  
});

JohntheFish replied on Jan 23, 2013 at 4:51 am Permalink Reply

Untested code, but you could probably also do the state handling by using on/off event handler binding, something like below.

$(function() {
  $(".theForm").on('submit',function(e) {  
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           $(".formerror").hide();
           $(".theForm").off('submit').submit();
        },
        204: function() {
            $(".formerror").show();
        },
        404: function() {
          alert('Page Not Found');
        }

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

 
$(function() {
  $(".theForm").on('submit',function(e) {  
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           $(".formerror").hide();
           $(".theForm").off('submit').submit();
        },
        204: function() {
            $(".formerror").show();
        },
        404: function() {
          alert('Page Not Found');
        }
      },
      type: 'POST',
      data: {
        "code": $('#code').val()
      }
    });
  });  
});

ecerney replied on Jan 23, 2013 at 4:59 am Permalink Reply

That also does a similar thing. It's like calling submit from the script does in fact call the submit script again, but even though it returns true it doesn't continue with the form submittal. It's only if you manually submit it the second time where the return true actually does something...

ecerney replied on Jan 23, 2013 at 2:21 pm Permalink Reply

Ok I figured it out... Apparently calling submit on my form, which had a field called submit was causing the issue (are you kidding me!?!?).. below is my working code for future reference.

<script>
$(function() {
  $(".theForm").submit(function(e) {
      e.preventDefault();
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           $(".formerror").hide();
           $(".theForm").unbind().submit(); 
        },
        204: function() {
           $(".formerror").show();
        },
        404: function() {

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

 
<script>
$(function() {
  $(".theForm").submit(function(e) {
      e.preventDefault();
 
     $.ajax({
      url: 'http://localhost:8888/concrete5.6.0.2/index.php/tools/ajax_code_check',
      statusCode: {
        200: function() {
           $(".formerror").hide();
           $(".theForm").unbind().submit(); 
        },
        204: function() {
           $(".formerror").show();
        },
        404: function() {
          alert('Page Not Found');
        }
      },
      type: 'POST',
      data: {
        "code": $('#code').val()
      }
    });
  });  
});  
</script>

Forums

Developing (v7+)

Using AJAX to check database for valid value

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?