Need some direction

@jools68May 13.2009

I am developing a “calculator” of sorts that has several “sliders” that the user selects values with. The values they select are stored as javascript variables. After they complete all the sliders, and click a submit button, a function is called that runs the variables through some calculations which produce several calculated results. Right now those results are just stored as variables behind the scenes. I need to display the results of the calculations in a table like structure with labels across the top and left sides. I would prefer if after the user hits the submit button they are redirected to a new page that has the outputs in a table like structure.

Can I redirect the user to a new page after hitting submit and display the results of the calculations, or will all the results of the calculations be lost from the user’s browser memory when I redirect to a new page? Any recommendations are appreciated. A little background info on me: I’m very new to javascript but have an understanding of programming in general. I have not done very much web development at all so I’m unsure of the best way to handle this. I will provide more details upon request.

to post a comment

JavaScript

12 Comments(s) _↴

@infinityspiralMay 14.2009 — #Do you care if your variables are posted in the address bar as url parameters? If you don't want these values the visible and want to send the information to a new page I'd create the new page in php and have it collect your GET or SEND (depending on the method of the form) variables and then generate the table using those values with the echo or print commands in php.

If you don't mind the values being visible and don't mind staying on the same page you could keep everything in javascript by just setting the action of the form to a javascript function.

@jools68authorMay 14.2009 — #I'm not actually using a form. That's why I'm confused about how to handle this. I see lots of example for forms, but they don't really apply to what I'm doing so it's throwing me for a loop. Instead of a form I'm just using these sliders and the variables get set through functions when the user clicks a value on the slider bar. The submit button really isn't doing anything but calling a function that has an if then statement that performs calculations as long as the user has selected a value for each slider.

It seems like I may just have to pass the values collected from the sliders through to the new page through the url, and then perform the calculations when the second page loads, and then display the data produced. If anyone has any better ideas I'm open to suggestions. Also, if anyone has a good reference for passing variables through urls please let me know.

@javawebdogMay 14.2009 — #Why not use a form?

Using an HTML form:

You can have multiple entries elements that are used to calculate some values but can limit what is passed to the next page (only the calculated values) by [U]giving the entry elements only an id but no name attribute and then giving the calculated fields both an id and name attribute[/U]. Forms pass values based on name / value pair. Any element without a name attribute is not passed.

Then have the second page retrieve the passed values using javascript and redisplay them in the table you want.

@jools68authorMay 14.2009 — #I haven't figured out how to use sliders with forms and sliders are required. Can I use sliders to fill in a form? Like I said I'm very new to web development so thank you for your help and patience.

@javawebdogMay 14.2009 — #What are you using to create the sliders?

@jools68authorMay 14.2009 — #CSS is used to layout the background image of the slider, and javascript with mootools is used to handle the position of the slider thumb and to set the value selected as a javascript variable. I then use setHTML to display the value they selected in a box created with CSS underneath each slider.

@javawebdogMay 14.2009 — #Please show us your code.

@jools68authorMay 14.2009 — #Here is the code for one of the sliders. The page is basically just six of these:

[CODE]<div id="container">
 <div id="slideContainer1"><div id="slideHandle1"></div></div>
 <div id="pos1"></div>
 
 <script type="text/javascript">
 window.addEvent('domready', function(){
 
  var slider1 = new Slider('slideContainer1', 'slideHandle1', {
   snap: false,
 
  <!-- Animation Speed (Higher = Slower) -->
  onTick: function(pos)
   {
   this.knob.effect(this.p, {duration: 400, transition: Fx.Transitions.quadOut}).start(pos);
   },
 
  onComplete: 
   function(val)
   {
   Var1 = (20+(val*3));
   <!-- The Value selected is passed to the Value Box Here -->
   $('pos1').setHTML(20+(val*3));
   },
  steps: 3
  });
  }); 
 </script>
 </div>[/CODE]

@javawebdogMay 14.2009 — #Almost there. May I see the associated html.

@jools68authorMay 14.2009 — #This is it. If you need to see the slider.js or functions.js let me know. clickFunction() calls the calculations.

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Slider Calc</title>
 <link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
 <link href="slider.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="../_common/js/mootools.js"></script>
 <script type="text/javascript" src="slider.js"></script>
 <script type="text/javascript" src="functions.js"></script>
 </head>
 
 <body>
 
 <div id="container">
 <h3>Select a value below:</h3>
 
 <div id="slideContainer1"><div id="slideHandle1"></div></div>
 <div id="pos1"></div>
 
 <script type="text/javascript">
 window.addEvent('domready', function(){
 
  var slider1 = new Slider('slideContainer1', 'slideHandle1', {
   snap: false,
 
  <!-- Animation Speed (Higher = Slower) -->
  onTick: function(pos)
   {
   this.knob.effect(this.p, {duration: 400, transition: Fx.Transitions.quadOut}).start(pos);
   },
 
  onComplete: 
   function(val)
   {
   Var1 = (20+(val*3));
   <!-- The Value selected is passed to the Value Box Here -->
   $('pos1').setHTML(20+(val*3));
   },
  steps: 3
  });
  }); 
 </script>
 </div>
 
 <div id="submit">
 <INPUT TYPE="button" NAME="submit" VALUE="Submit" onClick=clickFunction()>
 </div>
 
 </body>
 </html>[/CODE]

@javawebdogMay 14.2009 — #Thanks. Please do.

If you wish send them to me directly via [email][email protected][/email] file attachments. I am setting the page up on my local server. I tend to work best with things I can see.

@jools68authorMay 14.2009 — #Files sent.

Also in #JavaScript _↴

BG change to tiled image on rollover question about image transforming onClick value setting problem

Success!

Help @jools68 spread the word by sharing this article on Twitter...

Tweet This

Need some direction

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need some direction

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴