View Full Version : User Friendly

05-04-2006, 09:55 PM
Hey guys can you help me make this a little more user friendly?
What happens is when the user enters their figures into the form, they're checked using an httprequest call triggered by the onchange event of the text box. The form is then replaced with the same form again but with validated values and calculated results
now, onchange only takes effect when the text box loses focus, which is often caused by the user tabbing or clicking on the next form control, however when the form is replaced, this focus is lost.
So, how can I get around this problem to make the it more intuitive and user friendly. - and please talk to me like a n00b, I'm no javascript pro ;)
You can see what I've tried to do, numerically assign ids to the form controls and then when the form is reloaded focus on the control that is +1 numerically from the last one that was clicked on but that doesnt seem to be working reliably.

I hope someone can help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<title>WeQuote Windows</title>
<style type="text/css">
@import url("style/style.css");
<script type = "text/javascript">

onload= function()
focused = "";
xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
// do non ajax here
document.getElementById('updateButton').innerHTML = "";
function registerEvents()
if(focused != "")

//obj = document.forms[0].elements;
// for(var i = 0; i<obj.length; i++)
// {
// if(obj[i].name)
// {
// if(obj[i].name.indexOf('[]'))
// {
// obj[i].onchange = refreshForm;
// if (obj[i].captureEvents) obj[i].captureEvents(Event.CHANGE);
//obj[i].onclick = function() {setFocus(this.name);}
// if (obj[i].captureEvents) obj[i].captureEvents(Event.CLICK);
// }
// }
// }
function setFocused(obj)
focused = obj+1;
function loadURL(url, args)
xmlhttp.open("GET", url+"?"+args);
xmlhttp.onreadystatechange = handleResponse;
function handleResponse()
if(xmlhttp.readyState == 4 &&xmlhttp.status ==200)
document.getElementById("quote").innerHTML = xmlhttp.responseText;

function refreshForm()
obj = document.forms[0].elements;
var args = "";
for(var i =0; i<obj.length; i++)
if(obj[i].name && obj[i].name != 'getQuote')
loadURL('procquote.php', args);

<div id = "main">
<h1 class = "banner"><a href = "index.php"><span>WeQuote Windows</span><img src = "images/wequote.jpg" alt = "We Quote Windows" /></a></h1>
<img src = "images/crumb2.jpg" />
<form id = "quote" method = "get" action ="quote.php">
<fieldset><legend>Windows</legend><div class = "row">Qty <input onfocus="setFocused(1);" id = "1" onchange ="refreshForm();" type = "text" name = "Wqty[]" size = "2" value = "1" /> x Width(cms) <input onfocus="setFocused(2);" id = "2" onchange ="refreshForm();" type = "text" name = "Wwidth[]" size = "3" /> x Height(cms) <input onfocus="setFocused(3);" id = "3" onchange ="refreshForm();" type = "text" name = "Wheight[]" size = "3" /> = </strong></div></fieldset><input type = "hidden" name = "qid" value = "" /><fieldset><legend>Doors</legend><div class = "row">Qty <input onfocus="setFocused(4);" id = "4" onchange ="refreshForm();" type = "text" name = "Dqty[]" size = "2" value = "1" /> x Width(cms) <input onfocus="setFocused(5);" id = "5" onchange ="refreshForm();" type = "text" name = "Dwidth[]" size = "3" /> x Height(cms) <input onfocus="setFocused(6);" id = "6" onchange ="refreshForm();" type = "text" name = "Dheight[]" size = "3" /> = </strong></div></fieldset><input type = "hidden" name = "qid" value = "" /> <span id = "updateButton"><fieldset><input type = "submit" value = "update" class = "getQuote" /></fieldset></span>

<br class = "clear" />
<div id = "footer">Important links go here</div>

05-04-2006, 09:59 PM
I wouldn't reload the form. That's way too much work just for one field.

Just keep track of which field your validating, and when you get the result back, replace that one field.

05-05-2006, 12:36 AM
In terms of coding its a lot more work to replace individual parts -- its not just 1 field that is changed, its the calculations too.

05-05-2006, 08:39 AM
So I've found that this code acually works in properly in firefox, however it doesnt work in ie unless I alert(focused) just after the if(focused !=""), so I tried adding a delay in and that didnt work, any ideas guys?

05-05-2006, 04:24 PM
try declaring your global variables outside of any function body with the var keyword.

it's really not all that much work to replace individual fields and their calculations. You just need to get data in a specific format, and parse it. example you could receive xml that looks like:

<field id="something" value="somethingelse" />
<field id="Nsomething" value="somethingnew" />
<subtotal value="5.00" />
<tax value="1.02" />
<total value="6.02" />
<gratuity value="2.00" />

Then your javascript receiving that would just loop over the specific sections. Grab all the nodes in fields, loop over them, get the id, document.getElementById().value = and you're done.

Much better than reloading the entire form while your user is doing more input. If they're faster than their internet connection, they'll manage to type something into a field before you refresh the form and they'll lost the data they just typed. Worse yet, they could actually be fast enough to fire off TWO calls for validation before one returns, which would result in two steps of the client state being saved, then two refreshes.

It can get really bad the way you're doing it. Just think of someone on dial-up and all the things they could do between calls.