How can I input data to Javascript for client-side processing?

Question

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>

@ltiong_sh - IE8...it's the only one that I've got available to me here... :\ — dwwilson66
– dwwilson66, Commented May 17, 2012 at 15:47
Dang, a web developer that only has access to IE? Do you work at a prison or something? — Ruan Mendes
– Ruan Mendes, Commented May 17, 2012 at 15:55
@JuanMendes - lol...almost. I work in a user area. it's like coding with one letters f, s, and t taken away from the keyboard. — dwwilson66
– dwwilson66, Commented May 17, 2012 at 15:59
Hmm..interesting. Is there another page that this FORM is posting to? Or are you just using the js to pop something onscreen? — ltiong_dbl
– ltiong_dbl, Commented May 17, 2012 at 16:30

ltiong_dbl · Accepted Answer · 2012-05-17 16:53:36Z

1

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()"> ...

edited May 17, 2012 at 16:53

answered May 17, 2012 at 16:21

ltiong_dbl

3,21627 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

dwwilson66 Over a year ago

Aha. I can see the parameters in the address bar, changing as I change the dropdown options. I don't get a result back, however. No errors that I can SEE, but all the dropdown values return to their original states. I do not see my output... document.write("Start Outage: "+startOutage<br>"Outage End: "+outageEnd). :(

ltiong_dbl Over a year ago

if you're not really POSTing anywhere..you can leave the 'action' out.

dwwilson66 Over a year ago

Excellent, @ltiong_sh. I'm still having a few issues; the return value for finalValue keeps coming back as an object whose value displays as NaN; I suspect that I need something similar to Java's deepToString() to read it? Are you aware of anything like that? I'm going to post that as a separate question...

dwwilson66 Over a year ago

Follow-up question: stackoverflow.com/questions/10642582/…

Bergi · Accepted Answer · 2012-05-17 15:52:18Z

1

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

answered May 17, 2012 at 15:52

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:43:58Z

1

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered May 17, 2012 at 15:42

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

5 Comments

dwwilson66 Over a year ago

@ltiong_sh - findOutageGroups was from an earlier iteration...code updated

Ruan Mendes Over a year ago

There are plenty of other problems... I didn't mention them all. I figured I'll let the OP figure them out once they figure out how to use the dev tools.

dwwilson66 Over a year ago

Thanks for the == tip & the octal reminder. Completely spaced on that. I don't think that I should have problems with that; I'm generating a binary number to represent the four on/off positions of the yes/no switches...1000 or 0 for the first slot, 100 or 0 for the second, then adding them together. However, that begs the question: Will 1000+100+10 = 1110 or 13? that could be my problem....

dwwilson66 Over a year ago

@JuanMendes - Nor I. :) I meant to type 14 (1110 binary = 14 decimal)

Ruan Mendes Over a year ago

I see it more like assuming the numbers were binary. 1000 (8) + 100 + (4) + 10 (2) equals 14 though

Brian Hoover · Accepted Answer · 2012-05-17 15:47:52Z

0

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

answered May 17, 2012 at 15:47

Brian Hoover

7,9652 gold badges31 silver badges41 bronze badges

Collectives™ on Stack Overflow

How can I input data to Javascript for client-side processing?

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related