Javascript function for populating a field based on user input in another field

Question

This involves javascript in an HTML form. The problem I am having is populating a field in the same form based on user input of another field. WHen the user inputs a letter grade (Either A, B, or C) I am trying to get the percentage field to update to either 100 or 75 depending on the letter grade (A & B = 100, C=75). Below is what I haved tried so far, it doesn't seem to work correctly.

function PercentResult(grade)
{
  if (grade.equalsIgnoreCase("A"))
  {
    return 100;
  }
  if (grade.equalsIgnoreCase("B"))
    return 100;
  if (grade.equalsIgnoreCase("C"))
    return 75;
  return 0;
}

Pointy · Accepted Answer · 2010-11-08 17:07:09Z

2

There's no "equalsIgnoreCase" in Javascript; you may be confused by something from the entirely different language Java.

I'd just use a lookup:

function percentResult(grade) {
  var grds = { 'A': 100, 'B': 100, 'C': 75 };
  return grds[grade.toUpperCase()];
}

(There are ways to define the lookup that'd be a little more efficient but that's just an illustration.)

edit — googling around I did find a couple of sample implementations of doing "equalsIgnoreCase" for Javascript, but they're mostly simple wrappers around a comparison of upper- or lower-cased values. In this case there's no real need for it anyway.

edited Nov 8, 2010 at 17:07

answered Nov 8, 2010 at 17:01

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

lscoughlin · Accepted Answer · 2010-11-08 17:22:40Z

The simplest way to do it is with a constrained set -- combo box to input box

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>Combo Box</td>
                <td>
                    <select id="combo1" name="combo1" onchange="input1.value = combo1.value">
                        <option value="100">A</option>
                        <option value="75">B</option>
                        <option value="50">C</option>
                        <option value="25">D</option>
                        <option value="0"">E</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Input Box</td>
                <td>
                    <input type="text" name="input1" id="input1"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

beyond that, or if you really require event handlers, you should code them as such. Here's a little example that does what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
<script type="text/javascript">
    function eventHandler() {
        var target = document.getElementById('input1');
        var value = document.getElementById('input2').value;
        value = value.trim().toUpperCase();
        if( value == "A" ) {
            target.value = "100%";          
        }
        else if( value == "A" ) {
            target.value = "100%";          
        }
        else if( value == "B" ) {
            target.value = "75%";           
        }
        else if( value == "C" ) {
            target.value = "50%";           
        }
        else if( value == "D" ) {
            target.value = "25%";           
        }
        else if( value == "E" ) {
            target.value = "0%";            
        }
    }
</script>
</head>
<body>
<form>
<table>
    <tr>
        <td>Combo Box</td>
        <td><input type="text" name="input2" id="input2"
            onblur="eventHandler()" onchange="eventHandler" value="A" /></td>
    </tr>
    <tr>
        <td>Input Box</td>
        <td><input type="text" name="input1" id="input1" /></td>
    </tr>
</table>
</form>
</body>
</html>

Some of this stuff can be browser dependent pretty quick, so be sure check the js api document for the browser you're targeting.

Collectives™ on Stack Overflow

Javascript function for populating a field based on user input in another field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related