Solved

How would I write this function?

Posted on 2014-03-04
8
268 Views
Last Modified: 2014-03-06
What follows is a single challenge, but some "comments" that I've thrown in in an attempt to understand why it works and not just that it works. Not that I've got it working, but I want to do more than copy and paste.

Here's what I've got:

<td width='78' $rclass><span class='info'><div id='comparison_$i' style='color:#656363;'>&nbsp;".$allocatedlist[$i]["totalcost"]."</div></span></td>
                    <td width='75' $rclass><span class='info'><input type='text' size='10' class='cer' name='allocated' value='".$allocatedlist[$i]["totalcost"]."' 
                    onchange='visibility(\"$i\", \"."$allocatedlist[$i]["totalcost"]".\", );'></span><!-- hidden field in order to facility comparison of what's available to what user is documenting --><input type='hidden' value='".$allocatedlist[$i]["totalcost"]."' name='total_cost_comparison' id='total_cost_comparison_$i'></td>
                    <td width='20' $rclass>&nbsp;<div id='save_$i' style='visibility:hidden; display:inline; vertical-align:center;'>
                    <a href='capx.php?cm=change&appliedcapxid$i=".$allocatedlist[$i]["cercapxid"]."'><img src='images/save_icon.gif' width='15' border='0'></a></div> 

Open in new window


If you look at the Word doc that I have attached, you'll "see" what I'm trying to do (forgive the dual screen thing. It's the screen on the right that you want to be looking at).

So my user access the first screen and he's given the option of changing the values in the text field. Right now I have a script that's activate on the "onchange" event in that a little "save" icon pops up. You see that in the JavaScript that I've got here:

function visibility(row, user_cost, total_cost) {
    eval('document.getElementById(\'save_'+row+'\').style.visibility = \'visible\';');
    eval('user_total = window.parent.dataform.'+item+'id.value;');
    eval('document.getElementById(\'comparison_'+row+'\').style.color = \'red\';')  
}

What I need to have happen is that when the user makes the mistake of inputting a dollar amount that is greater than the value in the hidden "total_cost_comparison" field, the value in the "comparison$i" cell becomes red.

I've been studying what's been done with these kinds of situations before on the project that I'm working on and I want to honor their convention. Here's an example of something similar...

        function addtolist(item, id, name) {
      eval('checkid = window.parent.dataform.'+item+'id.value;'); //grab the value that's been passed via php into a JavaScript zone so I can make some comparisons
      eval('checkname = window.parent.dataform.'+item+'.value;');
      if (checkid != '') //make my comparison
            {
            checkid = checkid+', '+id; // do something
            checkname = checkname+'; '+name;
            }
      else
            {
            checkid = id;
            checkname = name;
            }
      eval('objid = parent.document.dataform.'+item+'id;');
      objid.value = checkid;
      eval('objname = parent.document.dataform.'+item+';');
      objname.value = checkname;
      eval('objdispname = parent.'+item+'name;');
      objdispname.innerHTML = checkname;
      

How can I check to see what the user has entered and compare that to the allocated amount in a way where if they exceed the allocated amount, the dollar amount is displayed in red?
0
Comment
Question by:brucegust
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 42

Assisted Solution

by:Rob Jurd, EE MVE
Rob Jurd, EE MVE earned 50 total points
ID: 39905730
I'll look in more depth but the "eval()" jumps out at me.  Is this legacy code you're trying to maintain or was there a reason to use it? It's obsolete and a security risk so it would be worth your while to get rid of it if you can
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 100 total points
ID: 39906459
Your evals are hideous and unnecessary

You may mean this

function visibility(row, user_cost, total_cost) {
  document.getElementById('save_'+row).style.visibility = 'visible';
  var user_total = parseFloat(parent.dataform.elements[item+'id'].value);
  var comp = parseFloat(parent.dataform.total_cost_comparison.value);
  document.getElementById("comparison_"+row).style.color = user_total>comp?"red":"white";
}

Open in new window

0
 
LVL 33

Accepted Solution

by:
Slick812 earned 350 total points
ID: 39906899
greetings brucegust, The javascript you give is not at all effective for this kind of thing (my opinion), for instance you turn the max display to red if it goes OVER, but do not change it back if it is corrected to lower, a bad GUI. The user_cost, and the total_cost are never used in the function, Why are they there?

You can send the input to check in the onchange function with "this", a much better approach.

here is my suggestion -
<script>
function checkVal(row, inpt) {
  document.getElementById("save_"+row).style.visibility = "visible";
  var newValue = parseFloat(inpt.value);
  var maxValue = parseFloat(document.getElementById("total_cost_comparison"+row).value);
  if (newValue <= maxValue)
    document.getElementById("comparison_"+row).style.color = "#656363";
    else
    document.getElementById("comparison_"+row).style.color = "red";
}
</script>

<input type='text' size='10' class='cer' name='allocated' value='33.33' 
   onchange='checkVal(8, this);' />

Open in new window

The input above does not have the PHP just to show the html, but you need to have the 8 in function parameters replaced with the $i of the PHP,
Maybe I do not exactly GET what needs to be done, but this may work, or help.
0
 

Author Comment

by:brucegust
ID: 39906923
Thanks, folks!

I was able to get it working and I feel obligated to use the current infrastructure just because I'm part of a team dynamic and therefore a "guest" more so than someone who can just start flying solo.

Here's where I landed:

function show_visibility(form,row) {
//alert (row);
    eval('comparison = form.total_cost_comparison_'+row+'.value;');
    eval('user_value = form.allocated_'+row+'.value;');
    if(user_value>comparison)
    {
    eval('document.getElementById(\'view_comparison_'+row+'\').style.color = \'red\';')  
    alert("Your allocated amount cannot exceed what's been budgeted.");
    }
    else
    {
        eval('document.getElementById(\'view_comparison_'+row+'\').style.color = \'#656363\';')  
        eval('document.getElementById(\'save_'+row+'\').style.visibility = \'visible\';');
    }
}

Nice and simple, but I will look into the "eval" dynamic and try to better understand why some perceive it as a poison.

BTW: I have another dilemma and would welcome your insight. Take a look at http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28380916.html
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 33

Expert Comment

by:Slick812
ID: 39907035
it uses a BAD javascript call as -
eval('user_value = form.allocated_'+row+'.value;');

I feel that the -
user_value = getElementsByName("allocated_"+row)[0].value;

is better and correct javascript,
since the project is full of eval( ) any way, it's no use to change just your code section to not use eval( )
0
 

Author Comment

by:brucegust
ID: 39907158
Understood.

Thanks!

Would welcome your time and input on another JavaScript challenge at http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28380916.html

Thanks again, Slick!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39909853
I strongly recommend refactoring all evals. They are unnecessary, can be a security risk and inefficient

function show_visibility(form,row) {
    var comparison = parseInt(form["total_cost_comparison_"+row].value,10);
    var user_value = parseInt(form["allocated_"+row].value,10);
    var isGreater = user_value>comparison;
    document.getElementById("view_comparison_"+row).style.color = isGreater?"red":"#656363";
    document.getElementById("save_"+row).style.visibility = isGreater?"visible":"hidden";

    if (isGreater) {
      alert("Your allocated amount cannot exceed what's been budgeted.");
    }
}

Open in new window

0
 
LVL 33

Expert Comment

by:Slick812
ID: 39910223
I agree wid mplungjan to a point, and you have definitely crossed the line when you place an alert( ); in an eval("alert( 'ok');") as you did in the -
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28380916.html

I know that the reason for the eval( ) was the inability to write -
form.total_cost_comparison_+row+.value;
    and have it work in JS, but it can work in an eval()

you can not just keep compounding the crap JS code, but I know that if you are working for someone they make the rules, BUT bad code has got to stop somewhere.
Sorry, about my over generalized saying of "it's no use to change just your code section to not use eval( ) "
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now