process form var

[Matthew Crouch]

Please give this code a look. I'm not a JS programmer at all, but I
can't figure out why identical lines in essentially the same context
work in one place but in the other, it causes the entire interface to
disappear.

This is for a tabbed interface, and I'm just trying to pass the
options_total value around among the JS fxns. I get no error output in
the Javascript Console ... just a blank screen without tabs, panels, or
forms.

Working code: called with the line

updateOptionsTotal({$optionset_id},{$productoption _id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value);

....

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);
....
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

[Lee]

Matthew Crouch said:

Please give this code a look. I'm not a JS programmer at all, but I
can't figure out why identical lines in essentially the same context
work in one place but in the other, it causes the entire interface to
disappear.

This is for a tabbed interface, and I'm just trying to pass the
options_total value around among the JS fxns. I get no error output in
the Javascript Console ... just a blank screen without tabs, panels, or
forms.

Working code: called with the line

updateOptionsTotal({$optionset_id},{$productoptio n_id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value);

...

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

Using eval() on two different values isn't even close to doing the same thing
twice. What sort of value are you expecting, and why are you executing text
entered by the user?

[Matthew Crouch]

Lee wrote:

Matthew Crouch said:

Please give this code a look. I'm not a JS programmer at all, but I
can't figure out why identical lines in essentially the same context
work in one place but in the other, it causes the entire interface to
disappear.

This is for a tabbed interface, and I'm just trying to pass the
options_total value around among the JS fxns. I get no error output in
the Javascript Console ... just a blank screen without tabs, panels, or
forms.

Working code: called with the line

updateOptionsTotal({$optionset_id},{$productopti on_id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value);

...

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

Using eval() on two different values isn't even close to doing the same thing
twice. What sort of value are you expecting, and why are you executing text
entered by the user?

This is a basic shopping cart thingy, and the items have options, etc.
that carry an "upcharge". options_total is the sum of all these
upcharges. the first fxn, updateOptionsTotal, is successfully changing
this sum to reflect a change in selections (radio buttons) on the form.

Does that clarify?

Does eval() execute code and not evaluate it? Like I said, the first fxn
seems to be working fine.

[Lee]

Matthew Crouch said:

Lee wrote:

Matthew Crouch said:

Please give this code a look. I'm not a JS programmer at all, but I
can't figure out why identical lines in essentially the same context
work in one place but in the other, it causes the entire interface to
disappear.

This is for a tabbed interface, and I'm just trying to pass the
options_total value around among the JS fxns. I get no error output in
the Javascript Console ... just a blank screen without tabs, panels, or
forms.

Working code: called with the line

updateOptionsTotal({$optionset_id},{$productopt ion_id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value);

...

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

Using eval() on two different values isn't even close to doing the same thing
twice. What sort of value are you expecting, and why are you executing text
entered by the user?

This is a basic shopping cart thingy, and the items have options, etc.
that carry an "upcharge". options_total is the sum of all these
upcharges. the first fxn, updateOptionsTotal, is successfully changing
this sum to reflect a change in selections (radio buttons) on the form.

Does that clarify?

Does eval() execute code and not evaluate it? Like I said, the first fxn
seems to be working fine.

The eval() method evaluates the string argument as a Javascript expression.
In other words, it compiles and executes it. That's a very dangerous thing to
do with user input. If you just want the numeric value of the options_total
field, use:

options_total = +form.options_total.value;

[Matthew Crouch]

Lee wrote:

Matthew Crouch said:

Lee wrote:

Matthew Crouch said:
Please give this code a look. I'm not a JS programmer at all, but I
can't figure out why identical lines in essentially the same context
work in one place but in the other, it causes the entire interface to
disappear.

This is for a tabbed interface, and I'm just trying to pass the
options_total value around among the JS fxns. I get no error output in
the Javascript Console ... just a blank screen without tabs, panels, or
forms.

Working code: called with the line

updateOptionsTotal({$optionset_id},{$productop tion_id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value);

...

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.
Using eval() on two different values isn't even close to doing the same thing
twice. What sort of value are you expecting, and why are you executing text
entered by the user?

This is a basic shopping cart thingy, and the items have options, etc.
that carry an "upcharge". options_total is the sum of all these
upcharges. the first fxn, updateOptionsTotal, is successfully changing
this sum to reflect a change in selections (radio buttons) on the form.

Does that clarify?

Does eval() execute code and not evaluate it? Like I said, the first fxn
seems to be working fine.

The eval() method evaluates the string argument as a Javascript expression.
In other words, it compiles and executes it. That's a very dangerous thing to
do with user input. If you just want the numeric value of the options_total
field, use:

options_total = +form.options_total.value;

Thanks. I haven't seen the syntax with the plus-sign before, but I'm
using an old book. What exactly does it mean?

[Mick White]

Matthew Crouch wrote:
[snip}

options_total = +form.options_total.value;

Thanks. I haven't seen the syntax with the plus-sign before, but I'm
using an old book. What exactly does it mean?

same as:
options_total = Number(form.options_total.value);

Converts a string to a number, if possible.

Mick

[Richard Cornford]

Matthew Crouch wrote:
<snip>

Does eval() execute code and not evaluate it?
What does the documentation for - eval - say? But how would you expect
javascript source code to be evaluated except by executing it?
Like I
said, the first fxn seems to be working fine.

What an - eval - call does is entirely determined by the value passed as
the argument to the function call, and the result can be, literally,
anything. If the argument is a variable, or a value provided externally,
looking at the actual - eval - call tells you nothing about what is
happening. It is this aspect of - eval - that makes it particularly hard
to debug code that uses it, and one of the many reasons that the use
of - eval - is strongly discouraged by informed javascript authors
(combined with the observation that it is almost never necessary to
use - eval - ).

Richard.

[Matthew Crouch]

The eval() method evaluates the string argument as a Javascript expression.
In other words, it compiles and executes it. That's a very dangerous thing to
do with user input. If you just want the numeric value of the options_total
field, use:

options_total = +form.options_total.value;

This gives me the same result: no output

[Matthew Crouch]

updateOptionsTotal({$optionset_id},{$productop tion_id},this.form)
function updateOptionsTotal(set_id,new_option_id,form) {
former_option_id = selected_options[set_id];
selected_options[set_id] = new_option_id;

options_total=eval(form.options_total.value); changed to
options_total = +form.options_total.value;

works fine, i.e. as before

...

Breaking: (called with the line:
writeTabPanel(this.form);
function writeTabPanel(form){
var tpText = '';
tpText += '<div id="';
tpText += this.tab.id;
tpText += '" class="tab" style="top:';
tpText += this.tab.top;
tpText += ';left:';
tpText += this.tab.left;
tpText += ';width:';
tpText += this.tab.width;
tpText += '" onClick="showPanel(\'';
tpText += this.tab.id + '\',\'' + this.panel.id;
options_total = eval(form.options_total.value);

changed to
options_total = +form.options_total.value;

Same problem. Other ideas?

[Michael Winter]

On 06/10/2005 21:29, Matthew Crouch wrote:

[snip]

options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

You're expecting us to fix code that you haven't shown. Furthermore,
you've provided little in the way of a description: we don't know what
is supposed to happen, what does happen, and why the observed behaviour
is unacceptable.

Please post a URL to an example (minimised, if possible) and a decent
description of the issue so that readers can help you properly.

Mike

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Matthew Crouch]

Michael Winter wrote:

On 06/10/2005 21:29, Matthew Crouch wrote:

[snip]

options_total = eval(form.options_total.value);
...
If I comment out this last line, everything works great -- except that
the value obviously isn't passed.

You're expecting us to fix code that you haven't shown. Furthermore,
you've provided little in the way of a description: we don't know what
is supposed to happen, what does happen, and why the observed behaviour
is unacceptable.

Please post a URL to an example (minimised, if possible) and a decent
description of the issue so that readers can help you properly.

Mike

The interface can be previewed here:
http://phc-online.com/phc1.12/store/...product_id=111

what i'm trying to accomplish is that the "options" and "total" values
persist as you change tabs (from "appearance" to "construction"). My
present strategy is to have the onclick for those radio buttons include
the current total...

view the source of that big inline frame (with the form inside) and the
applicable JS is near the top.

the panels and tabs drawing functions are in
http://www.phc-online.com/phc1.12/js...opTabbedUI2.js

there are other scripts involved. it's kinda complicated. i'm trying to
learn a few basic techniques; i hope you don't think i'm trying to make
you do my code.

Thanks again,
M

[Michael Winter]

On 07/10/2005 20:26, Matthew Crouch wrote:

The interface can be previewed here:
http://phc-online.com/phc1.12/store/...product_id=111

You need to review how to access form controls[1]. You should also make
write consistent code: sometimes you access controls via a form object
(though only once using the reference you pass), but other times you try
to use the name attribute value like a global. If you must do one, do
the former; the latter is nonsense[2].

Preferably, you should use the forms and elements collections, and save
references to these to minimise the number of property accesses.

function updateOptionsTotal(set, option, form) {
var elem = form.elements,
optionsTotal = +elem.options_total.value
- options[selected_options[set]]
+ options[option],
total = +elem.base_price.value + optionsTotal;

elem.options_total.value = optionsTotal;
elem.grand_total.value = total;
elem.info.value = 'Total: ' + total;
}

function totalonly(optionsTotal, form) {
form.elements.options_total.value = optionsTotal;
}

You should also review the markup generated server-side. It mixes XHTML
and HTML (use the latter, only) and generates invalid markup (there's
more than one HTML, HEAD and BODY element). There might be other errors,
too.

[snip]

Mike
[1] <URL:http://www.jibbering.com/faq/faq_notes/form_access.html>
[2] It's something that Microsoft seemed to introduce. Don't use it
as relatively few browsers support it.

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Matthew Crouch]

Michael Winter wrote:

On 07/10/2005 20:26, Matthew Crouch wrote:

The interface can be previewed here:
http://phc-online.com/phc1.12/store/...product_id=111

You need to review how to access form controls[1]. You should also make
write consistent code: sometimes you access controls via a form object
(though only once using the reference you pass), but other times you try
to use the name attribute value like a global. If you must do one, do
the former; the latter is nonsense[2].

Preferably, you should use the forms and elements collections, and save
references to these to minimise the number of property accesses.

function updateOptionsTotal(set, option, form) {
var elem = form.elements,
optionsTotal = +elem.options_total.value
- options[selected_options[set]]
+ options[option],
total = +elem.base_price.value + optionsTotal;

elem.options_total.value = optionsTotal;
elem.grand_total.value = total;
elem.info.value = 'Total: ' + total;
}

function totalonly(optionsTotal, form) {
form.elements.options_total.value = optionsTotal;
}

You should also review the markup generated server-side. It mixes XHTML
and HTML (use the latter, only) and generates invalid markup (there's
more than one HTML, HEAD and BODY element). There might be other errors,
too.

[snip]

Mike
[1] <URL:http://www.jibbering.com/faq/faq_notes/form_access.html>
[2] It's something that Microsoft seemed to introduce. Don't use it
as relatively few browsers support it.

I appreciate all this. Was hesitant to even show the code, since as you
noticed it's cobbled together from assorted tutorials.

I'm the PHP guy on this project, and I should learn better JS. But I
wonder if you could clean this up for a fee, as I need to get this out
the door and don't have time to study up just now.

Email me if interested. "spamless" shouldn't be in the address, of course.

Matt