<style>
  .btnNumber{
    font-family:Arial;
	font-size: 40px;
	width: 60px;
	height: 60px;
  }
  .btnNumber2{
    font-family:Arial;
	font-size: 40px;
	width: 120px;
	height: 60px;
  }
  .btnNumber3{
    font-family:Arial;
	font-size: 40px;
	width: 180px;
	height: 60px;
  }
  .txtNumber{
    background-color:#000000;
	color:#00FF00;
	font-family:Arial;
	font-size:40px;
	width:180px;
  }
	.boxKeys{
		box-shadow: 5px 5px 10px #888888;
	}

</style>
	  
<script>
  function getFocus(){
    focusCampo("txtNum");
  }
  function setNumber(pval){
    strNum = document.getElementById("txtNum").value;
	if(strNum.length <7 ){
	  document.getElementById("txtNum").value = strNum + pval;
	}
	focusCampo("txtNum");
  }
  function removeNumber(){
    strNum = document.getElementById("txtNum").value;
	if(strNum.length >0 ){
	  document.getElementById("txtNum").value = strNum.slice(0, -1);
	}
	focusCampo("txtNum");
  }
  
  function focusCampo(id){
    var inputField = document.getElementById(id);
    if (inputField != null && inputField.value.length != 0){
        if (inputField.createTextRange){
            var FieldRange = inputField.createTextRange();
            FieldRange.moveStart('character',inputField.value.length);
            FieldRange.collapse();
            FieldRange.select();
        }else if (inputField.selectionStart || inputField.selectionStart == '0') {
            var elemLen = inputField.value.length;
            inputField.selectionStart = elemLen;
            inputField.selectionEnd = elemLen;
            inputField.focus();
        }
    }else{
        inputField.focus();
    }
  }
</script>
	  
<?php
if( empty($_GET["pid"]) ){
	$enabled = "disabled";
}else{
	$enabled = "";
}
?>

	  <form action="addCart.php" method="post">
	  <input type="hidden" name="pid" value="<?= $_GET["pid"] ?>" />
	    <table style="border-style:double" class="boxKeys" bgcolor="#CCCCCC"><tr><td>
	      <table border="0">
		    <tr align="center">
		      <td colspan="3">
			    <input type="text" id="txtNum" name="pQtty" class="txtNumber" value="" maxlength="7" <?= $enabled ?>/>
		      </td>
		    </tr>
		    <tr>
		      <td><input type="button" class="btnNumber" value="1" onClick="setNumber(1)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="2" onClick="setNumber(2)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="3" onClick="setNumber(3)" <?= $enabled ?> /></td>
		    </tr>
		    <tr>
		      <td><input type="button" class="btnNumber" value="4" onClick="setNumber(4)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="5" onClick="setNumber(5)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="6" onClick="setNumber(6)" <?= $enabled ?> /></td>
		    </tr>
		    <tr>
		      <td><input type="button" class="btnNumber" value="7" onClick="setNumber(7)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="8" onClick="setNumber(8)" <?= $enabled ?> /></td>
		      <td><input type="button" class="btnNumber" value="9" onClick="setNumber(9)" <?= $enabled ?> /></td>
		    </tr>
		    <tr>
		      <td colspan="2"><input type="button" class="btnNumber2" value="0" <?= $enabled ?> onClick="setNumber(0)" /></td>
		      <td align="right"><input type="button" class="btnNumber" value="&larr;" onClick="removeNumber()" style="color:#FF0000" <?= $enabled ?> /></td>
		    </tr>
		    <tr>
		      <td colspan="3" align="center"><input type="submit" class="btnNumber3" value="ADD" style="color:#0000FF; font-size:34px" <?= $enabled ?> /></td>
		    </tr>
	      </table>
	  </td></tr></table>
	  </form>
