PDA

View Full Version : Browser(s) acting slow



dovid
Nov 10th, 2014, 01:59 AM
Hi,

I am writing a basic app for a client where the customer puts in their order ID and phone number and press submit. When testing it on my PC it worked flawlessly. When I tested on a desktop PC where the screen was a touch screen as well as on Android devices, it seems the browser is a bit slow to respond. If you press each number slowly (waiting 0.5 second per press) it works fine. However if use it normal to fast then the browser does not catch every button press. Any and all advice is appreciated to heklp make this work.



<title>DLUX Order alert system</title>
<head>
<center><font color="blue"><b>DLUX Order alert system</b></font></center></br></br>
<body onload="empty_to_do();">

<script type="text/javascript">

function addOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = order_id.value + key;
}

function setToDo(key){
var to_do = document.forms[0].to_do;
to_do.value = key;
setTimeout(submitForm,100);
}

function addPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number.value = phone_number.value + key;
phone_number_real.value = phone_number_real.value + key;
phone_number_real.value = phone_number_real.value.substr(0,10);
if(phone_number_real.value.length <1){
phone_number.value = '';
}
if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
}
if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
}
if(phone_number_real.value.length > 5){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
}
}

function delOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = order_id.value.substring(0, order_id.value.length - 1);
}

function delPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number_real.value = phone_number_real.value.substring(0, phone_number_real.value.length - 1);
if(phone_number_real.value.length <1){
phone_number.value = '';
}
if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
}
if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
}
if(phone_number_real.value.length > 5){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
}


}

function resetOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = '';
}

function resetPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number.value = '';
phone_number_real.value = '';
}

function submitForm(){
document.forms[0].submit();
}

function emptyCode(){
document.forms[0].order_id.value = "";
document.forms[0].to_do.value = "";
document.forms[0].phone_number.value = "";
document.forms[0].phone_number_real.value = "";
}

function empty_to_do(){
document.forms[0].to_do.value = "";
}

function empty_order_id(){
document.forms[0].order_id.value = "";
}

function empty_phone_number(){
document.forms[0].phone_number.value = "";
document.forms[0].phone_number_real.value = "";
}

</script>

<style>
body {
text-align:center;
background-color:#D3D3D3;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#keypad {margin:auto; margin-top:20px;}

#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:180px;
height:160px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC
}

#keypad tr td:hover {background-color:#999999; color:#FFFF00;}

.display {
width:130px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:18px;
border:1px solid #999999;
}

#message {
text-align:center;
color:#009900;
font-size:14px;
font-weight:bold;
display:none;
}

#submit {
width: 10em;
height: 5em;
}
</style>

<form action="" method="post">
<font color="red"><b>Order ID: </b></font> <input type="text" name="order_id" value="9" maxlength="10" class="display"/>
<table id="DOVID_keypad" cellpadding="15" cellspacing="5">
<tr>
<td><input type="button" style="width:75;height:75" value="1" onclick="addOrderID('1');"></td>
<td><input type="button" style="width:75;height:75" value="2" onclick="addOrderID('2');"></td>
<td><input type="button" style="width:75;height:75" value="3" onclick="addOrderID('3');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="4" onclick="addOrderID('4');"></td>
<td><input type="button" style="width:75;height:75" value="5" onclick="addOrderID('5');"></td>
<td><input type="button" style="width:75;height:75" value="6" onclick="addOrderID('6');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="7" onclick="addOrderID('7');"></td>
<td><input type="button" style="width:75;height:75" value="8" onclick="addOrderID('8');"></td>
<td><input type="button" style="width:75;height:75" value="9" onclick="addOrderID('9');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="RESET" onclick="resetOrderID('');"></td>
<td><input type="button" style="width:75;height:75" value="0" onclick="addOrderID('0');"></td>
<td><input type="button" style="width:75;height:75" value="BACK" onclick="delOrderID('');"></td>
</tr>

</table>
<br/>
<font color="red"><b>Phone Number: </b></font> <input type="text" name="phone_number" value="" maxlength="15" class="display"/><input type="hidden" name="phone_number_real" value="" maxlength="10" class="display"/></tr>
<table id="keypad" cellpadding="5" cellspacing="3">
<tr>
<td onclick="addPhoneNumber('1');">1</td>
<td onclick="addPhoneNumber('2');">2</td>
<td onclick="addPhoneNumber('3');">3</td>
</tr>
<tr>
<td onclick="addPhoneNumber('4');">4</td>
<td onclick="addPhoneNumber('5');">5</td>
<td onclick="addPhoneNumber('6');">6</td>
</tr>
<tr>
<td onclick="addPhoneNumber('7');">7</td>
<td onclick="addPhoneNumber('8');">8</td>
<td onclick="addPhoneNumber('9');">9</td>
</tr>
<tr>
<td onclick="resetPhoneNumber('');">RESET</td>
<td onclick="addPhoneNumber('0');">0</td>
<td onclick="delPhoneNumber('');">Back</br>Space</td>
</tr>
</table>
<br>
<table id="keypad" cellpadding="10" cellspacing="3">
<td onclick="setToDo('submit');">Submit</td>
</table>
<input type="hidden" name="to_do" value="" maxlength="100" readonly="readonly" /></tr>
</form>

</html>