Only Numeric Values ​​in Form Fields With JavaScript

Hi everyone! 

We use form fields almost in every web project. This fields often are different. For example, password field's type is password, text's type textfield. If you want users to sign up, you should develop e-mail fields on it. so, you have to confirm values of e-mail fields. In this article, we will create a textfield for only numeric values.

First, we create HTML form:

input name="" type="text" onChange="isNumeric(this)"

The code given above is a textfield in the HTML file. As you have seen, there is a onChange function, isNumeric. Let's do this JavaScript function:

function isNumeric(v) {
    var isNum = /^[0-9-'.']*$/;
    if (!isNum.test(v.value)) {
        alert('Only Numeric Values Dude!');
        v.value = v.value.replace(/[^0-9-'.']/g,"");
    }
}

When you run this page, you will see an alert on the screen if you write some string values.

How to Use JQuery UI Progress Bar

Hi! As you know, we wrote something about JQuery before. We'd talked about where and how to use it. 


In this article, we're going to learn using progress bar we all know. For using it, have to include the library about this. Like i said, this article is about showing load progress using JQuery UI.


I guess that we all need to load progress while our pages was loading on. All of expert of software think about that is the best way ever. For that reason, this is indispensable for us :)


Well, we'd talked about the libraries. If you learn how to use those, you can visit Jquery web site. 


Your Html Page should be like:

<div id="progressbar"></div>

When the script stars and loads, progress bar will work on the div layer which's id is progressbar.

This is my jquery document:

$(document).ready(function() {
 var count = 0;
 setInterval(function() {
  count = count + 0.5;
  $('#progressbar').progressbar({
   value : count         
  });
 }, 10);
});

As you see, setInterval function is counting our count and then load the page. I used to 0.5 value. If you want to load faster or slower, can change the 0.5 value, namely value of count.

If you want to see how the demo works, you can visit this page.

Just remember that is an open source project and if you see the code, you can see the code, if you want to get the code, you can get to code also. And libraries we used on the script are here.

We'll see you guys next article!

Form Validation Using AJAX and PHP

In this article, we'll show you something about form validation, namely form control solutions using AJAX and PHP. As you know, we can submit a form without refreshing page with Ajax. So, we should use this tech.

NOTE : Ajax is not one technology, but a group of technologies. Ajax uses HTML, JavaScript, CSS, XML etc.

This example, shows the relationship between getting data of form and checking:

Step 1 is, users type something or not!

Step 2 is, the system checks what the data is or, is there any typed data?

Well, let's do our pages. For that we create three files,

1. example.html
2. kitchen.php
3. lib.ajax.js

lib.ajax.js

// JavaScript Document
	//What does JaX stand for? is the function we use for ajax object
function JaX() {
	var httpObject = null;
	var httpBrowser = navigator.appName;
	
	if(httpBrowser == "Microsoft Internet Explorer") {
		httpObject = new ActiveXObject("Microsoft.XMLHTTP");	
	} else {
		httpObject = new XMLHttpRequest();	
	}
	return httpObject;
}

function UJaX(subject, method, path, more, func, statu) {
	//subject is object of ajax
	//method is the method of getting variables
	//path is the path of file
	//func is the function you use on it
	//statu can be true or false
	ajaxObject = JaX();
	
	if(method == 'POST') {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('POST', path, statu);
			header = "application/x-www-form-urlencoded";
			ajaxObject.setRequestHeader("Content-Type", header);
			ajaxObject.send(more);
		} else {
			alert("Error(1)->The System Cannot Be Opened!");	
		}
	} else {
		if(ajaxObject != null) {
			ajaxObject.onreadystatechange = func;
			ajaxObject.open('GET', path+'?'+more, statu);
			ajaxObject.send(null);
		} else {
			alert("Error(2)->The System Cannot Be Opened!");	
		}
	}
}

example.html

var ajaxObject;

function CheckItOut() {
	subject = ajaxObject;
	method = 'GET';
	path = 'kitchen.php';
	func = sonuc;
	dataMore = document.getElementById("data").value;
	more = 'data=' + dataMore;
	statu = "true";
	
	UJaX(subject, method, path, more, func, statu);
}

function sonuc() {
	if(ajaxObject.readyState == 4) {
		if(ajaxObject.status == 200) {
			DM = ajaxObject.responseText;
			//DM = document.form1.data.value;
			if(DM == "You must write something!")
				document.getElementById("MyButton").disabled = true;	
			else
				document.getElementById("MyButton").disabled = false;	
		} else
			DM = "Error = Nu/1";	
	} else
		DM = "Loading...";	
		document.getElementById("MyLabel").innerHTML = DM;
}

< form name="form1" method="GET">
< input name="data" type="text" id="data" onChange="CheckItOut();">
< input name="MyButton" type="button" id="MyButton" value="I'm Ok!">
< /form>

Preview example.html page

And php page, kitchen.php

$DataOfForm = $_REQUEST["data"];
if(!$DataOfForm == 1) {
	print "You must write something!";
} else {
	print "You said:".$DataOfForm."";	
}

And yes! We just finished our script! go to example.html page and write something;

When you typing

If we don't type anything on this, we'll see like down here:


When you type none.


Like you see, "Button" is disabled when you type none. Because of it is DM variable of javascript.

If you want to see this project, you can click Demo!

We'll see you next article!