Dynamically update web content in real-time 3

[Geates]

Hi Guys,

I'm a PHP programmer that uses JavaScript for tasks that PHP is incapable of doing (because it's server-side). This is one of those cases.

I have an equation containing several variables. I would like to create a form where users can alter the values of the various variables and update the results in real-time.

A good example of what I'm looking for would be like the Brightness/Contract slider found in most image editors.

I hope this makes sense.

-Geates

 

[vicvirk]

An even better example would be sample code so we can fully understand exactly what it is that you are trying to acheive. Perhaps what you've written so far...



--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

--------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc

 

[Geates]

What I've written is nothing. I've only conceptualized the process. I figure, I'll need to monitor a field for a value change. Perhaps with .onChange? Then reprocess the equation and udpates the results. I'm looking for the infrastructure code. I could accomplish this easily with just PHP and a postback, but I want to avoid reloading the entire page (I assume this is what "postback" refers to)

Crude Example:

equation = "(a + b) * c"
<input name="a" onChange="updateResults();">
<input name="b" onChange="updateResults();">
<input name="c" onChange="updateResults();">

The results of the equation are: <div id="results"> [some number] </div>

Hopefully, this is enough to extrapolate from.

-Geates

 

[vacunita]

Assuming your inputs have ID's: how about something simple like:

function updateResults(){
var a=document.getElementById('a');
var b=document.getElementById('b');
var c=document.getElementById('c');

var results_var=document.getElementById('results');

results_var.innerHTML=(a.value+b.value)*c.value;

}

Keeping your onChange calls in every input.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[feherke]

Hi

Or something like this :

[highlight][b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]""[/i][/green][b]>[/b][/highlight]
equation = "(a + b) * c"
[b]<input[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"a"[/i][/green] [maroon][highlight]onkeyup[/highlight][/maroon][teal]=[/teal][green][i]"updateResults();"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"b"[/i][/green] [maroon][highlight]onkeyup[/highlight][/maroon][teal]=[/teal][green][i]"updateResults();"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]name[/maroon][teal]=[/teal][green][i]"c"[/i][/green] [maroon][highlight]onkeyup[/highlight][/maroon][teal]=[/teal][green][i]"updateResults();"[/i][/green][b]>[/b]

The results of the equation are: [b]<div[/b] [maroon]id[/maroon][teal]=[/teal][green][i]"results"[/i][/green][b]>[/b] [some number] [b]</div>[/b]
[highlight][b]</form>[/b][/highlight]

[b]function[/b] [COLOR=darkgoldenrod]updateResults[/color][teal]()[/teal]
[teal]{[/teal]
  document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'results'[/i][/green][teal]).[/teal]innerHTML [teal]=[/teal] [teal]([/teal][COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]document[teal].[/teal]forms[teal][[/teal][purple]0[/purple][teal]].[/teal]a[teal].[/teal]value[teal])[/teal] [teal]+[/teal] [COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]document[teal].[/teal]forms[teal][[/teal][purple]0[/purple][teal]].[/teal]b[teal].[/teal]value[teal]))[/teal] [teal]*[/teal] [COLOR=darkgoldenrod]parseFloat[/color][teal]([/teal]document[teal].[/teal]forms[teal][[/teal][purple]0[/purple][teal]].[/teal]c[teal].[/teal]value[teal])[/teal]
[teal]}[/teal]

Phil, you better add some [tt]parseInt()[/tt] or [tt]parseFloat()[/tt] calls for the [tt]value[/tt]s.

Feherke.

http://rootshell.be/~feherke/

 

[vacunita]

Good point. Being a PHP programmer I keep forgetting JS needs to turn variables into numbers before any operations.

results_var.innerHTML=(parseFloat(a.value)+parseFloat(b.value))*parseFloat(c.value);

And yes onkeyup may be a more instantaneous option than onChange.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Geates]

That is precisely what I'm looking for. I initially thought it would be more complicated until I understood what I'm actually doing.

Thanks Vancunita!

-Geates

 

[Geates]

Feherke, I discovered this several years aog when implementing an XML HTTP Request into a PHP Photo Gallery program. I'm glad you brought this to my attention.

-Geates