Javascript Archives

Upload Images Using JS

I recently needed to update a form to update through AJAX so the page didn’t reload when submitted. The issue was that we had some images on this form. In the past I have used things like plupload, but that didn’t seem like the right approach in this instance.

At first I looked into the “fetch” api and saw a good post from Tania Rascia, but unfortunately the fetch API still isn’t fully adopted…DAMN YOU MICROSOFT!

Thankfully I was able to find a jQuery version of this same idea over on Makeitweb.com by Yogesh Singh.

I also needed to make sure I sent along post data with the FormData to update the rest of the form. Here is an example of the JS code I ended up using:

var $agentEditForm = $('#agent-edit-form');
$agentEditForm.submit(function(e){
	e.preventDefault();
        
        //disable our button so we don't submit twice
	$(this).find('button.save-form').prop('disabled', true);
        
        // Serialize our form into a usable object
	var formData = $(this).serializeObject();
        //our PHP script we are sending the info to
	var url = '/update-agent.php';
        //Create a FormData object
	var fd = new FormData();
        //get the files from our input[type=file]
	var files = $('#profile-image')[0].files[0];
        //if someone as uploaded an image let's attach it to our formdata
	if(files){
		fd.append('profile_image',files);
	}

	// Unfortunately we cannot attach an object to our form data, so lets loop through our formData and attach our variables
	for(var propertyName in formData) {
		fd.append(propertyName,formData[propertyName]);
	}

        // Send our data off to our server script
	$.ajax({
		url: url,
		type: 'post',
		data: fd,
		contentType: false,
		processData: false,
		success: function(response){

			if(response != 0){
				//success
			}else{
				//fail
			}
                        
                        // Remember to re-enable our submit button 
			$agentEditForm.find('button.save-form').prop('disabled', false);
		},
	});

	return false;
});

var $agentEditForm = $('#agent-edit-form');

$agentEditForm.submit(function(e){

e.preventDefault();

//disable our button so we don't submit twice

$(this).find('button.save-form').prop('disabled', true);

// Serialize our form into a usable object

var formData = $(this).serializeObject();

//our PHP script we are sending the info to

var url = '/update-agent.php';

//Create a FormData object

var fd = new FormData();

//get the files from our input[type=file]

var files = $('#profile-image')[0].files[0];

//if someone as uploaded an image let's attach it to our formdata

if(files){

fd.append('profile_image',files);

}

// Unfortunately we cannot attach an object to our form data, so lets loop through our formData and attach our variables

for(var propertyName in formData) {

fd.append(propertyName,formData[propertyName]);

}

// Send our data off to our server script

$.ajax({

url: url,

type: 'post',

data: fd,

contentType: false,

processData: false,

success: function(response){

if(response != 0){

//success

}else{

//fail

}

// Remember to re-enable our submit button

$agentEditForm.find('button.save-form').prop('disabled', false);

});

return false;

});

On the server script you can access this data just like any other form submission.

PHP

print_r($_FILES);
print_r($_POST);

1 2	print_r($_FILES); print_r($_POST);

There we go! Now we can submit our form, including images, to our server script!

NOTE: We are using a custom function to serialize our form data. You can find that function here.

Cross Browser HTML5 Date Input

I have been waiting for the day when using <input type=”date” /> would be common…alas, 3 years after the standards were written it is still not supported in IE or Safari.

UNFORTUNATELY we still have to support these browsers…

Traditionally I have been using a third party datepicker (jQuery UI, Bootstrap Datepicker, etc) but I REALLY wanted to just use the default type=”date” this time.

I found a great solution over on Stack Overflow from Kashif Latif.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {type: 'date'});
  webshims.setOptions('forms-ext', {type: 'time'});
  webshims.polyfill('forms forms-ext');
</script>

webshims.setOptions('waitReady', false);

webshims.setOptions('forms-ext', {type: 'date'});

webshims.setOptions('forms-ext', {type: 'time'});

webshims.polyfill('forms forms-ext');

</script>

BAM! We have a polyfill. As far as I can tell this does the trick.

Helpful Javascript Prototype Functions

Sometimes the built in functionality for various Javascript primitives is not enough. Here is an assortment of useful Prototype functions. Enjoy!

/**
 * Clean all non numeric characters. Also keeping "."
 * usage: str.cleanNumber()
 */
String.prototype.cleanNumber = function() {

	var returnValue = this.replace(/[^0-9.-]/g,'');

	//let's make sure we do not return a NaN value
	if(isNaN(returnValue) || returnValue == ""){
		returnValue = 0;
	}

    return returnValue;
}


/**
 * Create a default string function to allow replacing all characters in a string
 */
String.prototype.replaceAll = function(search, replacement) {
	return this.replace(new RegExp(search, 'g'), replacement);
};


/**
 * Format a float as currency
 * usage: floatvalue.formatMoney(0, '.', ',');
 */
Number.prototype.formatMoney = function(c, d, t){
  var n = this, 
      c = isNaN(c = Math.abs(c)) ? 2 : c, 
      d = d == undefined ? "." : d, 
      t = t == undefined ? "," : t, 
      s = n < 0 ? "-" : "", 
      i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
      j = (j = i.length) > 3 ? j % 3 : 0;
     return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
   };

/**

* Clean all non numeric characters. Also keeping "."

* usage: str.cleanNumber()

String.prototype.cleanNumber = function() {

var returnValue = this.replace(/[^0-9.-]/g,'');

//let's make sure we do not return a NaN value

if(isNaN(returnValue) || returnValue == ""){

returnValue = 0;

}

return returnValue;

}

/**

* Create a default string function to allow replacing all characters in a string

String.prototype.replaceAll = function(search, replacement) {

return this.replace(new RegExp(search, 'g'), replacement);

};

/**

* Format a float as currency

* usage: floatvalue.formatMoney(0, '.', ',');

Number.prototype.formatMoney = function(c, d, t){

var n = this,

c = isNaN(c = Math.abs(c)) ? 2 : c,

d = d == undefined ? "." : d,

t = t == undefined ? "," : t,

s = n < 0 ? "-" : "",

i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",

j = (j = i.length) > 3 ? j % 3 : 0;

return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");

};

JS Capitalize a String

Just a simple String prototype to capitalize the first letter of the string.

/**
 * Capitalize the first letter of a string
 * usage: str.capitalize()
 */
String.prototype.capitalize = function() {
	return this.charAt(0).toUpperCase() + this.slice(1);
}

/**

* Capitalize the first letter of a string

* usage: str.capitalize()

String.prototype.capitalize = function() {

return this.charAt(0).toUpperCase() + this.slice(1);

}

Convert Form to JS Object

This function will take your entire HTML form and convert all the inputs into a single JS object! Thanks to Dave over at Stack Overflow!

/**
 * Take a form and convert it into a Object for easy manipulation
 * 
 * @link https://stackoverflow.com/a/23315254
 * @link http://jsfiddle.net/akhildave/sxGtM/5002/
 */
$.fn.serializeObject = function() {
	var o = {};
	var a = this.serializeArray();
	$.each(a, function() {
		if (o[this.name] !== undefined) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
};

/**

* Take a form and convert it into a Object for easy manipulation

* @link https://stackoverflow.com/a/23315254

* @link http://jsfiddle.net/akhildave/sxGtM/5002/

$.fn.serializeObject = function() {

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (o[this.name] !== undefined) {

if (!o[this.name].push) {

o[this.name] = [o[this.name]];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

Usage is as simple as:

var formObject= $(‘form’).serializeObject();

Requires jQuery

Javascript Local and Cookie Storage

Just a couple functions to make working with Local Storage and Cookies a little easier.

 /**
  * SAVE any value to local storage
  * @param string Storage name
  * @param mixed Storage Value
  */
 function storeLocal(name, value){
	if (typeof(Storage) !== "undefined") {
		localStorage.setItem(name, JSON.stringify(value));
	}else{
		//if we do not have local storage for some reason try to use cookies
		//we are just saving for 1 day for now
		setCookie(name, JSON.stringify(value), 1);
	}
}

/**
 * GET any value to local storage
 * @param  string cname  Storage Name
 * @return string        Storage Value
 */
function getLocal(name){

	if (typeof(Storage) !== "undefined") {
		return JSON.parse(localStorage.getItem(name));
	}else{
		//if we do not have local storage for some reason try to use cookies
		return JSON.parse(getCookie(name));
	}

}

/**
 * Set a Cookie
 * @param string cname  Cookie Name
 * @param mixed cvalue  Cookie Value
 * @param int exdays How many days before expire
 */
function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires="+ d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/**
 * Get a cookie
 * @param  string cname  Cookie Name
 * @return string        Cookie Value
 */
function getCookie(cname) {
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i = 0; i <ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length,c.length);
		}
	}
	return "";
}

/**

* SAVE any value to local storage

* @param string Storage name

* @param mixed Storage Value

function storeLocal(name, value){

if (typeof(Storage) !== "undefined") {

localStorage.setItem(name, JSON.stringify(value));

}else{

//if we do not have local storage for some reason try to use cookies

//we are just saving for 1 day for now

setCookie(name, JSON.stringify(value), 1);

}

/**

* GET any value to local storage

* @param string cname Storage Name

* @return string Storage Value

function getLocal(name){

if (typeof(Storage) !== "undefined") {

return JSON.parse(localStorage.getItem(name));

}else{

//if we do not have local storage for some reason try to use cookies

return JSON.parse(getCookie(name));

}

/**

* Set a Cookie

* @param string cname Cookie Name

* @param mixed cvalue Cookie Value

* @param int exdays How many days before expire

function setCookie(cname, cvalue, exdays) {

var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires="+ d.toUTCString();

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}

/**

* Get a cookie

* @param string cname Cookie Name

* @return string Cookie Value

function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i = 0; i <ca.length; i++) {

var c = ca[i];

while (c.charAt(0)==' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

return c.substring(name.length,c.length);

}

return "";

}