Solved

How would I write this function?

Posted on 2014-03-04
8
270 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

867 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

12 Experts available now in Live!

Get 1:1 Help Now