How to set custom form input field for “Price”?

Question

I have a basic html form that adds some data to the page using PHP. I want to make this form field a "Price" field. My html is:

<input class="bids" name="comment" id="comment" tabindex="4" />

How can I fix this field so that users can't enter random letters, dollar signs, dashes, or other weird formats. I want the output to be whole dollars. Sorry I'm a complete programming moron. :)

Answer 1

Use javascript with regex to only allow digits for the client side. You should also do a server side check using php & regex to make sure the post data only contains digits.

Here is a javascript function that checks to make sure that a particular field input contains only numbers.

function IsNumeric(numstr)
{
    if (numstr.match(/^\d+$/ ) ) {

        alert("Valid number");
    }
    else
    {
        alert("Only numeric values are allowed");
    }
}

Take a look at this javascript regex guide to help you.

Don't forget to do the PHP checking on the server side as well...

The PHP regex function would look something like:

preg_match('/[0-9]+/', $numstr);

Answer 2

You can use below code to restrict input box input to number and a decimal point. It uses jquery plugin caret to get current position of the input as well as length of selection. You can fix number of digits as well as number of decimal points

$("#mPrice").live(
"keydown keyup",function(event) {
checkNumberDecimal(event,'mPrice',2,7);});


function checkNumberDecimal(event,element,noDecimal,noDigit)
{

var number = $('#'+element).val();
var caretlength = $('#'+element).caret().text.length;
var position = $('#'+element).caret().start;
var flagDecimal=0;
var flagDigit=0;


if(number.indexOf('.') != -1)
{
var n = number.substring(number.indexOf('.')+1);
if(caretlength <=1 )
  {
   if(n.length >= noDecimal &&  (number.length - position) < (noDecimal+1))
   flagDecimal=1;

if(noDigit > -1)
{
 if(number.length >= (noDigit+1))
 flagDigit = 1;
} 
} else if(position == (number.length - (n.length+1)))
{ 
    if(noDigit > -1)
      {
       if(number.length >= (noDigit+1))
         flagDigit = 1;
      } 
}
 }
 else
{
 if(caretlength <=1)
  if(noDigit > -1) 
   {
    if(number.length  >= (noDigit - noDecimal))
           { flagDigit = 1;}
 } 
 }


 // Allow: backspace (8), delete (46), tab (9), escape (27), enter (13), decimal (110),         period (190), 0-9 (48-57), 0-9 (96-105)
 // keypad: 0-9 (48-57), a-z (65-90) period (190)
 // numpad: 0-9 (96-105), decimal (110)
 // capslock (20)
 // end (35), home (36) left arrow (37), up arrow (38), right arrow (39), down arrow (   (40)

    if ((number.indexOf('.') < 0 && noDecimal > 0 && (event.keyCode ==110 ||    event.keyCode == 190)) || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9  || event.keyCode == 27 || event.keyCode == 13 || 
         // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
         // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
     else{
        // Ensure that it is a number and stop the keypress
        if (flagDecimal === 1 || flagDigit === 1 || event.shiftKey || (event.keyCode <  48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    } 
 } 

Answer 3

give the form the onsubmit event

<form blah ... onsubmit="return proof(this)">

your proof function does something like:

var proof = function(form){
    value = form.comment;
    var strReg = "^([0-9\.\-])";
    var regex = new RegExp(strReg);

    return(regex.test(value));
}