Question

Background
I have a form that PHP generates from my database. The page is a seat registration for a dinner event. Each [dinner] table receives a certain number of tickets to the reception. For example, a table of 10 seats, may have 7 tickets to the Gala reception, and 3 tickets to the Chairman’s reception.

Each row has a prefix value that stores the prefixes in an array for which I loop through to get my values out. Looks something like:

<select name='prefix[]'  onchange='prefixCheck(this.value)' >
    <option value=''>Select</option>
    <option value='Mr.'selected >Mr.</option>
    <option value='Ms.' >Ms.</option>
    <option value='Dr.' >Dr.</option>
    <option value='Sen.' >Sen.</option>
    <option value='Sec.' >Sec.</option>
    <option value='Rep.' >Rep.</option>
</select>

I’ll have a varying number of these prefix[] fields on my form. I also have at the top of my page a counter of how many Gala and Chairman reception tickets a table currently has:

<td align = left>
    Total Gala Reception Tickets Available:
</td>
<td align = center>
    <input  type='text' size='2' id='gala' name='gala' value=7 style='background-color:#C8C8C8  '>
    <input  type='hidden' size='2' id='gala_orig' name='gala' value=7 >
</td>
 </tr>
 <tr>
    <td align = left>
        Total Chairman's Reception Tickets Available
    </td>
    <td align = center>
        <input type='text' id='chairman' name='chairman' size='2' value=3 style='background-color:#C8C8C8  '>
        <input type='hidden' id='chairman_orig' name='chairman' size='2' value=3 >
    </td>
 </tr>

Objective
The prefix values of Sen., Sec., Rep. are special, meaning if the user selects either of these for each seat, I would like the count for the gala to decrement, and the number for the chairman to increment. I have this javascript function, but I seem to be a critical piece. If a user selects Sen., the action occurs, but if they select another qualifiying prefix, the action happens again; decrementing gala, and incrementing chair.

function prefixCheck(v){
                gala_limit = document.getElementById('gala').value;
                chair_limit = document.getElementById('chairman').value;

                if(v == 'Sec.' || v == 'Sen.' || v == 'Rep.'){
                    gala_limit--;
                    chair_limit++;

                    document.getElementById('gala').value = gala_limit;
                    document.getElementById('chairman').value = chair_limit;
                }
                else{
                    document.getElementById('gala').value = document.getElementById('gala_orig').value;
                    document.getElementById('chairman').value = document.getElementById('chair_orig').value
                }

            }

I’d prefer not to change the object structure of the prefix array. What am I missing?

Answer 1

What you’re not doing is tracking previous values that might have been selected. Your code can easily be altered to do so, however:

1. Change 'prefixCheck(this.value) to 'prefixCheck(this) to pass a reference to the element itself.

2. change your function a bit:

---

function prefixCheck(v)
{//v is now a reference to the changed elem:
    var wasSpecial = elem.oldValue || '';//if nothing was selected, it wasn't a special guest before
    //don't use globals, use var inside functions
    var gala_limit = document.getElementById('gala').value;
    var chair_limit = document.getElementById('chairman').value;
    if(v.value == 'Sec.' || v.value == 'Sen.' || v.value == 'Rep.')
    {
        if (wasSpecial === '')
        {
            gala_limit--;
            chair_limit++;
            if (gala_limit < 0)
            {
                alert ('No room for you '+ v.value);
            }
        }
        document.getElementById('gala').value = gala_limit;
        document.getElementById('chairman').value = chair_limit;
        v.oldValue = 'yes';//set some oldValue property, to mark that this element has been set to a special guest value
    }
    else
    {
        if (wasSpecial !== '')
        {
            document.getElementById('gala').value = ++gala_limit;
            document.getElementById('chairman').value = --chair_limit;
        }
        if (chair_limit < 0)
        {
            alert('erm... no more chairs?');
        }
        v.oldValue = '';//always set your oldValue to mark a non special value was selected
        //I see no real reason why you should reset your counters here, but you can
        //Though I'd suggest just setting the #gala and #chairman elements when the page loads and keep using the values herein.
        //document.getElementById('gala').value = document.getElementById('gala_orig').value;
        //document.getElementById('chairman').value = document.getElementById('chair_orig').value
    }
}

You could also pass the event itself to the function: prefixCheck(this,event) and, instead of alerting, catch it (e.preventDefault() or e.returnValue = false).
Another thing: instead of if ((v.value === 'Sen.'.... a regex v.value.match(/^[SR]e[cnp]\.$/ or even better: if (v.value.charAt(1) === 'e' will work just as well and is more readable…

Though I’m not sure this answers your question, I hope it was at least of some use.