Javascript total onChange fields by calling function

[andybid]

Hi

Got a problem

I am writing my own sign up page and have one problem that is driving me nuts, may be wood for the trees I dont know.

I have user inputs on a form that return via ajax a subtotal in the relevent row. so row1 row2 etc

I need to total all these and and take off a %

so when the user selects options OnChange fires the function to get total. I have added a second function to fire after the value is returned to total the subtotals to a grans total.

The problem is that it totals the subtotal that was previously in the box before the user selected a different option.

So when the user first selects an option and 1.99 shows in row1 subtotal the grand total is 0

when the user reselects and it changes to 2.99 the grand total shows 1.99

I am doin something wrong but am going in circles.

Anyone lead me out of this blind spot I am in.

Gotta be simple, what have I missed.

Find the code running at

http://madandi.gotdns.com/test/php_3.html

html at

http://madandi.gotdns.com/test/script.html

untidy but its my play script to get this damn thing working..

Thank you all

 

[BillyRayPreachersSon]

"onchange", you are calling sendData() then calculate() immediately afterwards without waiting for the response.

Don't call calculate() until you get the response back.

Hope this help,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[BillyRayPreachersSon]

In fact, you were misleading yourself:

so when the user selects options OnChange fires the function to get total. I have added a second function [!]to fire after the value is returned[/!] to total the subtotals to a grans (sic) total.

AJAX calls are asynchronous ([!]A[/!]synchronous [!]J[/!]avaScript [!]A[/!]nd [!]X[/!]ML), so in fact calculate() is being run before the value is returned, not after. It is therefore using the previous form values, which matches the behaviour you are seeing.

As mentioned, one way of resolving this is not to call calculate() until you have returned the value (not hard given you are already testing readyState == 4).

Another way would be to switch AJAX for SJAX by passing "false" as the third parameter to ajaxRequest.open() instead of true.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[andybid]

Thank you.

Tried both and as easy as that.

Wood for trees. Bl**dy trees!!

Now I can get on with it.

 

[andybid]

OK -NEW problem

Hi guys.

OK, I have got that previous page in include in another on an option select, problem is it will now not operate correctly.

how do i get over this.

(USE OPTION 2)
select page

http://madandi.gotdns.com/site-test/index.php

included page

http://madandi.gotdns.com/site-test/php_3.html

all in same folder?

Thanks

 

[BillyRayPreachersSon]

I suspect it's due to the error "sendData is not defined" (if you don't use Firefox for development, I can recommend it - it's far better than IE, and the error console and add-ons such as Firebug make it the tool of choice).

This is most likely because the JS being returned by the AJAX call isn't being evaluated (a common problem).

Personally, I'd simply include the JS normally using a common-or-garden <script> element and avoid the issue altogether.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[andybid]

Yep, thats it.

I added the functions to the index and it worked. (only added for first row if any1 goes there)

Why does it not import the functions when including? would you be kind enough to explain as I dont understand. It seems basic that it SHOULD. but it doesnt.

So the way you're thinking is to include all option elements in script on the index code instead of calling additional pages
(I need to have 1 - 5 option pages with each page giving a seperate discount)

I thought I'd chosen the simplest - maybe not.

 

[andybid]

ah - use an iframe

 

[andybid]

done, used a div that dynamiclly updates. thatll do

 

[BillyRayPreachersSon]

Glad to see you got it sorted.

To answer your previous question about evaluating scripts, try this small test:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] dir="ltr" lang="en-GB">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />

	<script type="text/javascript">
	//<![CDATA[

		var theScript = 'alert("Hello world!");';

		function runMe1() {
			var theDiv = document.getElementById('placeholder');
			theDiv.innerHTML = '<script type="text/javascript">' + theScript + '<' + '/script>';
		}

		function runMe2() {
			eval(theScript);
		}

	//]]>
	</script>
</head>

<body>
	<div id="placeholder"></div>

	<a href="javascript:runMe1();">Run script 1</a>
	<a href="javascript:runMe2();">Run script 2</a>
</body>
</html>

Clicking "Run script 1" sets the innerHTML of the <div> to contain the script, but nothing happens.

Clicking "Run script 2" evaluates the script and it runs.

This is analogous to what happens with JS in AJAX responses when adding it to the DOM using .innerHTML - it doesn't get parsed or run. For this reason, some JS frameworks will actually strip <script> elements from an AJAX response to avoid confusion. Some will have an option to evaluate JS, and pretty much they simply run it through a call to eval (it's one of the few times I'd advise using eval - normally I avoid it like the plague).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[andybid]

Thanks Dan for your help.


Ill have a play with that one when I get time.

Do you know where I can find a tutorial or code to 'float' images on a page?
You know like the "live chat' you get on a few sites now where the image seems to float on the page.

Thats my next bit to learn

ta

 

[BillyRayPreachersSon]

When you say 'float', do you mean that as you scroll the page, the element follows you (so it is always visible)?

If so, this is known as 'fixed positioning', and can be done with CSS in most modern browsers.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[andybid]

yep sort of, I was looking inton having an image float accross the page from bottom left to bottom right say and then stay there when scrolled.

See, this is what you get when using wysiwyg for years. Come to do it yourself and there is just so much more to it - but it is fun nevertheless!