CODEWITHSUNDEEP
javascript
dwwilson66
dwwilson66

Reputation: 7066

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 announcing the result. The code below allows me to make my selections on the html form and press the "submit" button, but no results are returned.

I'm having a hard time debugging because I don't understand how to get periodic output on screen (document.write doesn't seem to work) to interpret program flow. I'm not even sure if the js is running...do I somehow need to call my js from within the HTML? Do I need to store my js in an external file and call that external file?

Thanks!

<html>
<head>
    <SCRIPT type="text\Javascript" EVENT="onclick">
    var valueCS ;
    var valueV ;
    var valueVCS ;
    var valueStorm ;
    var finalValue = valueCS + valueV + valueVCS + valueStorm;
    var startOutage ;
    var outageEnd ;

    document.write="total is "+finalValue;
    if(finalValue==0000) {startOutage="28"; outageEnd="1";} else
      (finalValue==0001) {startOutage="27"; outageEnd="1";} else
      (finalValue==1110) {startOutage="22"; outageEnd="4";} else
      (finalValue==1111) {startOutage="24"; outageEnd="4";} else
      document.write("Invalid entries")
    document.write("Start Outage: "+startOutage<br>"Outage End: "+outageEnd)
    </SCRIPT>
</head>
<body>
<form id = "outageSelector" method="post contServer=1000&vistaServer=100&vistaCSServer=10&storm=1&submitServerStatus=View+Outage+Groups">
    <fieldset>
        <legend><h1>Please choose the status of each system</h1></legend>
        <label>Is the contact server up?</label>
        <select id="contServer" name="contServer">
            <option valueCS=1000>Up</option>
            <option valueCS=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option valueV=100>Up</option>
            <option valueV=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option valueVCS=10>Up</option>
            <option valueVCS=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option valueStorm=1>Yes</option>
            <option valueStorm=0>No</option>
        </select><br>
        <input type="submit" name="submitServerStatus" value="View Outage Groups" />
    </fieldset>
</form>
</body>
</html>

Upvotes: 0

Views: 1367

Answers (4)

ltiong_dbl
ltiong_dbl

Reputation: 3216

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

<form id="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>
        <select id="contServer" name="contServer">
            <option value=1000>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the Vista server up?</label>
        <select id="vistaServer" name="vistaServer">
            <option value=100>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is VistaCS up?</label>
        <select id="vistaCSServer" name="vistaCSServer">
            <option value=10>Up</option>
            <option value=0>Down</option>
        </select><br>
        <label>Is the outage due to a storm?</label>
        <select id="storm" name="storm">
            <option value=1>Yes</option>
            <option value=0>No</option>
        </select><br>
        <input type="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>
  function checkValues(){
    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";
    } else if (finalValue == 1) {
      startOutage = "27";
      outageEnd = "1";
    } else if (finalValue == 1110) {
      startOutage = "22";
      outageEnd = "4";
    } else if (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()"> ...

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 1

Bergi
Bergi

Reputation: 664513

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

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 :-)

Upvotes: 1

Brian Hoover
Brian Hoover

Reputation: 7991

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");

Upvotes: 0

Related Questions