Ajax Username Check

I don't know about you, but I love cool ajaxy stuff. A lot of times, it's really simple to add this to a form. All I'm doing is checking to see if the requested username is in use or not.

So first, the html is the simple part. Just give your input box and id and add a section after it to hold the results:

<input type="text" name="uname" id="uname"><span id="checkuname">

Then I make a little php file with the to check for the username.

$u = $_GET['u'];
require_once('db.php');
if($u <> ""){ //we don't want to display anything if the field is blank
  $checkname = query("SELECT * FROM table WHERE username = '".$u."'");
  if(num_rows($checkname) <> 0){
    $desc = 'Already in use';
  }else{
    $desc = 'Ok to use!';
  }
}
echo $desc;

I style $desc to be something nice looking, or use an image of a checkbox or something, depending on how the rest of the form looks.

So then in the scripts, I look in the uname id and display in the checkuname id.

$('#uname').keyup(function(){
  $('checkuname').load('checkuser.php?u='+$(this).val(), function(response, status, xhr){
   if(status == "error"){
    var msg = "There was an error: ";
    $('#checkuname').html(msg + xhr.status + " " + xhr.statusText);
   }
  });
});

Style a button as a link

I have an invisible form that I want the user to submit with a link, keeping the illusion that it's not a form. I know you could submit the form with javascript (onclick="document.formName.submit();), but then if the user doesn't have javascript enabled, I'd still have to use a noscript tag and they'd see it as a form button. The solution is to style the button with CSS. something like:

.sublink {
color: #00f;
background-color: transparent;
text-decoration: underline;
border: none;
cursor: pointer;
}

Then the html would be:

<input type="submit" class="sublink" value="Click this">

Valid Dates

OMG, two in one day!

A user uses the datepicker to enter a date, but it's still a text field, they could type in some nonexistent date. JQuery validation checks to make sure it's a correct date format, but not whether it's a valid date. ie: 30/30/2009 is a valid date.

Php checkdate() will make sure it's a valid date. Easy if your date comes in in separate variables, but mine came in from datepicker or from the database, so it looks like either 11/30/2010 or Nov 30, 2010.

So first of all, if the date comes in from the database, I make sure to format it before I echo it. I could do this with the sql query, but it's long and I don't want to. So I do:

if($row['indate'] == "Jan 01 1900 12:00AM") echo "";
else echo date("n/d/Y", strtotime($row['indate']));

This also takes care of MSSql's default dates, we just don't want those to show up at all.

Then when submitting the form, the validation is:

if($_POST['indate'] <> ''){  
   $arr=split("/",$_POST['indate']);  
   $mm=$arr[0];  
   $dd=$arr[1];  
   $yy=$arr[2];  
   if(!checkdate($mm,$dd,$yy)){     
     $errormsg = 'Input is an invalid date: '.$_POST['indate'];  
   }
}

References:
php.net
plus2net.com

Validate Integer Input

Php has an is_int() function, but it doesn't work with strings, unlike is_numeric() which will validate a numeric string. This was a big problem for me. The database required an int. My original solution was to force a numeric string to be an int with intval(), but the QA tester felt the integrity loss of data was too severe.

Finally found a solution in a php function I'd never seen before: filter_var(). This can validate a number of data types, but the important one for me was FILTER_VALIDATE_INT. So my validation function became:

if(!filter_var($_POST['input'], FILTER_VALIDATE_INT)){
  echo "validation failed, input must be an integer";
}

Datepicker with Dynamic Fields

Previously, I added rows to an input table. I realised later, the datepicker fields I added didn't work on these dynamic fields. Looking at the form details with the firefox web developer toolbar, I noticed the original datepicker fields had an id assigned to them of dp+randomnumber, but the new ones didn't.

I added a single line to my row adding function that solved this.

$('.datepicker').not('.hasDatePicker').datepicker();

255 varchar limit

Again, I have to use an MSSql database with php. I was having a problem: I'd insert a large amount of text into a varchar(1000) field, but when I tried to display it, only 255 characters came out. The problem has something to do with the drivers linux uses for php to connect to MSSql. There were two ways to handle this.

If I didn't have access to the database, I can cast the data as a text.

SELECT CAST(details as TEXT) from table

But since I had access to the database, I just changed the datatype of that field to text. Now all 1000 (even up to 2^31-1) characters will display.

Add Rows with Unique Name

A table of input boxes will be put into a database. The user may need to add more to the table.

HTML:

<table id="infotable">
<tr>
<th>Individual Name</th>
<th>Type</th>
<th>Number</th>
<th>Expires</th>
</tr>
<tr>
<td><input type='text' name='info[0][indname]' /></td>
<td><input type='text' name='info[0][type]' /></td>
<td><input type='text' name='info[0][num]' /></td>
<td><input type='text' name='info[0][exp]' /></td>
</tr>
<tr>
<td><input type='text' name='info[1][indname]' /></td>
<td><input type='text' name='info[1][type]' /></td>
<td><input type='text' name='info[1][num]' /></td>
<td><input type='text' name='info[1][exp]' /></td>
</tr>
</table>

JQuery:

$('#addinfo').click(function(){
  var getcount = $('input[name^="info"]:last').attr('name');
  var ncount = parseInt(getcount.substring(4,getcount.length-6))+1;
  $("#infotable > tbody").append("<tr><td><input type='text'   name='info["+ncount+"][indname]' size='28' /></td><td><input type='text' name='info["+ncount+"][type]' </td><td><input type='text' name='info["+ncount+"][num]' /></td><td><input type='text' name='info["+ncount+"][exp]' class='datepicker' /></td></tr>");
});

The added tr has to be all on one like because javascript doesn't like like breaks.