Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: User Friendly

  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts

    User Friendly

    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

    Code:
    <!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">
    	<head>
    		<title>WeQuote Windows</title>
    		<style type="text/css">
    			<!--
    			@import url("style/style.css");
    			-->
    		</style>
    		<script type = "text/javascript">
    		
    		onload= function()
    		{
    		  focused = "";
    		  try
    		  {
    		    xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    		   }
    		   catch(e)
    		   {
    		     // do non ajax here
    			}
    			registerEvents();
    			document.getElementById('updateButton').innerHTML = "";
    		  }
    		  function registerEvents()
    		  {
    		    if(focused != "")
    		    {
    		      if(document.getElementById(focused))
    		      {
    			    document.getElementById(focused).focus();
    			}
    			  
    			}
    		    //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;
    		  xmlhttp.send(null);
    		}
    		function handleResponse()
    		{
    		  if(xmlhttp.readyState == 4 &&xmlhttp.status ==200)
    		  {
    		    document.getElementById("quote").innerHTML = xmlhttp.responseText;
    		   registerEvents();
    
    		   }
    		}
    		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')
    		    {
    			  args+=obj[i].name+'='+obj[i].value+'&';
    			}  
    		  }
    		  loadURL('procquote.php', args);
    		}
    		</script>
    	</head>
    	<body>
    
    		<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>
    
    			</form>		
    			<br class = "clear" />
    		</div>
    		<div id = "footer">Important links go here</div>
    	</body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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.

  • #3
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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.

  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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?

  • #5
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    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:

    Code:
    <response>
      <fields>
        <field id="something" value="somethingelse" />
        <field id="Nsomething" value="somethingnew" />
      </fields>
      <calculations>
        <subtotal value="5.00" />
        <tax value="1.02" />
        <total value="6.02" />
        <gratuity value="2.00" />
      </calculations>
    </response>
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •