Question

I have a form that has a select menu(A) and 2 divs (B and C) and an input type of text (D).
I would like to have the select menu drop down(A) selections affect the value that get shown in div B.Then when a user enters a value in the text element D,the value is compared to the value in B and C would output (show) wether the value is big or small than that in B.

So far I have been using the jquery blur function and its proving inconsistent

$('.expCheck').blur(function() {
    var curr = $(this).val();
    var prevField = parseInt($(this).parent().prev('td').children('.getValue').text());
    var compField = $(this).parent().next('td').children('.compCheck');
    compField.css('background-color','#c00');

    if (curr < prevField) {
        compField.css('background-color','#c00').text('Failed');
    } else {
        compField.css('background-color','#0c0').text('Passed'); 
    }
});

the html structure

<form method="post" enctype="multipart/form-data" name="testForm" id="testForm" action="test_process.php">
    <select name="day_select" id="day_select" class="daychanger">
        <option value="0">--Please Select Days--</option>
        <option value="1">1- 7 Days</option>
        <option value="2">8-14 Days</option>
        <option value="3">15-21 Days</option>
    </select>

    <table class="mtbl">
        <tr class="head">
            <td width="297">&nbsp;</td>
            <td width="297">Required Days</td>
            <td width="246">Your Days</td>
            <td width="246">Status</td>
        </tr>
        <tr class="info'>
            <td>Days </td>
            <td>
                <div id="v1" class="getValue"></div>
            </td>
            <td align="left">
                <input class="expCheck" name="days" type="text" id="days" size="5"  maxlength="5" />
            </td>
            <td>
                <div class="compCheck"></div>
            </td>
        </tr>
    </table>
</form>

Answer 1

The business requirements are not clear enough…

1. What goes in the Required Days column?

2. Why not put the <select> control in that column?

3. Should the user’s days be compared against the range, that is be between 1 and 7, or 8 and 14, etc? (Right now, the logic just checks against the max.)

4. Will there always be just one form per page?

5. Will there always be just one line per form? The code can be simplified a fair bit, if so. Otherwise the logic and form structure will need to be tweaked.

Anyway, See this live demo, based on the best guess as the question stands now.

Note that the HTML is slightly changed: Fixed a couple typos and changed the <option> values to match business logic.

The adjusted HTML is:

<form method="post" enctype="multipart/form-data" name="testForm" id="testForm" action="test_process.php">
    <select name="day_select" id="day_select" class="daychanger">
        <option value="0">--Please Select Days--</option>
        <option value="7">1- 7 Days</option>
        <option value="14">8-14 Days</option>
        <option value="21">15-21 Days</option>
    </select>
    <table class="mtbl">
        <tr class="head">
            <td width="297">&nbsp;</td>
            <td width="297">Required Days</td>
            <td width="246">Your Days</td>
            <td width="246">Status</td>
        </tr>
        <tr class="info">
            <td>Days</td>
            <td><div id="v1" class="getValue"></div></td>
            <td align="left"><input class="expCheck" name="days" type="text" id="days" size="5" maxlength="5"/></td>
            <td><div class="compCheck"></div></td>
        </tr>
    </table>
</form>

The JS / jQuery is:

function updateStatus () {
    var maxReqDays  = parseInt ( $('#testForm table.mtbl tr.info div.getValue').text (), 10 );
    var minReqDays  = maxReqDays - 6;
    var userDays    = parseInt ( $('#days').val (), 10 );
    var statusNode  = $('#testForm > table.mtbl tr.info div.compCheck');

    if (userDays && maxReqDays) {
        if (userDays < maxReqDays) {
            statusNode.css ('background-color', '#c00').text ('Failed');
        } else {
            statusNode.css ('background-color', '#0c0').text ('Passed');
        }
    }
    else {
        statusNode.css ('background-color', '#ffc').text ('tbd');
    }
}

$("#day_select").change ( function () {
    var selectVal   = $(this).val ();
    if (selectVal == 0)
        selectVal   = '»select«';

    $('tr.info div.getValue').each ( function () { $(this).text (selectVal); } );
    updateStatus ();
} );

$('.expCheck').bind ('blur change keydown keyup mouseup', function () {
    updateStatus ();
} );

//--- Init the "Required days" cell.
$("#day_select").change ();