How Can I Input Data To Javascript For Client-side Processing?

I'm relatively new to JavaScript and I am working on a new application. Based on the results of four drop-down selections, I would like to calculate and display a text box announci

Solution 1:

The problem you're having is with your FORM. All of your dropdowns had the same name. Also your values were incorrect formatted.

<formid="outageSelector"method="post"action="[SOME_DESTINATION]"><fieldset><legend><h1>Please choose the status of each system</h1></legend><label>Is the contact server up?</label><selectid="contServer"name="contServer"><optionvalue=1000>Up</option><optionvalue=0>Down</option></select><br><label>Is the Vista server up?</label><selectid="vistaServer"name="vistaServer"><optionvalue=100>Up</option><optionvalue=0>Down</option></select><br><label>Is VistaCS up?</label><selectid="vistaCSServer"name="vistaCSServer"><optionvalue=10>Up</option><optionvalue=0>Down</option></select><br><label>Is the outage due to a storm?</label><selectid="storm"name="storm"><optionvalue=1>Yes</option><optionvalue=0>No</option></select><br><inputtype="submit"name="submitServerStatus"value="View Outage Groups" /></fieldset></form>

This is sent along w/ the POST behind the scenes:

contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups

EDIT: here's a revised js function.

<script>functioncheckValues(){
    var e;
    e = document.getElementById("contServer");
    var valueCS = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("vistaServer");
    var valueV = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("vistaCSServer");
    var valueVCS = parseInt(e.options[e.selectedIndex].value);

    e = document.getElementById("storm");
    var valueStorm = parseInt(e.options[e.selectedIndex].value);

    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage = -1;
    var outageEnd = -1;        

    if(finalValue == 0) {
      startOutage = "28";
      outageEnd = "1";
    } elseif (finalValue == 1) {
      startOutage = "27";
      outageEnd = "1";
    } elseif (finalValue == 1110) {
      startOutage = "22";
      outageEnd = "4";
    } elseif (finalValue == 1111) {
      startOutage = "24";
      outageEnd = "4";
    }

    var msg = "total: " + finalValue;        
    if(startOutage == -1){
      msg += " | Start Outage: " + startOutage + " | Outage End: " + outageEnd;
    }else{
      msg += " | Invalid entries";
    }

    alert(msg);
  }
</script>

You'll need to modify your form to use.

<form id="outageSelector" method="post" action="" onsubmit="checkValues()"> ...

Solution 2:

Don't use document.write at all, but DOM manipulation. Read theseintroductions.

Also, you will need to learn about event-driven programming. You'll need domevents (intro), but also asynchronous communication to the server is event-based. <SCRIPT type="text\Javascript" EVENT="onclick"> is not the way it works :-)

Solution 3:

To get output on the screen, you should use console.log along with Firebug, Chrome dev tools, or IE dev tools. See Is there a single HTML5, JavaScript, and CSS debugger?

One obvious problem in your code is

if(finalValue=1110)

Should be (double equals for comparison)

if(finalValue==1110)

But there's another problem, a number that starts with a zero is an octal. That is

010 == 8 // true

It seems like you're after a bitmask

var mask = 0;
var flagA = 1, flagB = 2, flagC = 4;

// Add flagA and flagB to the mask
mask = mask | flagA; // or mask |= flagA
mask |= flagB;

// Now you can test which flags are on using bit testing// is flagA set?console.log(mask & flagA) // truthy value// is flagC set?console.log(mask & flagC) // false (0)

https://developer.mozilla.org/en/JavaScript/Reference/Operators/Bitwise_Operators

Solution 4:

Juan already gave you console.log, which is very useful, and probably the best. Firebug, Chrome Dev and IE dev will also allow you to add break points and watch local and global variables.

Older styles of debugging from the dark ages would include using alert("some string here"); to get a popup or add a debug element to your page and then populating it with

document.getElementById("debugElement").innerHTML("some string here");