JavaScript：更改文本字段中的值时如何显示警报框

Question

I am trying to add a checkbox to the html page I am creating.

What I am trying to implement is: If value is changed in any textbox for "Post-IVR Call Volume" or "IVR Call Volume" AND if the value in any of text boxes in the same column below (the changed text box) are are different than the new value, then an alert box should be displayed.

For example, if "Post-IVR Call Volume" under Green is changed, then we should check vale in the text boxes under Green for all the hidden rows under "Post-IVR Call Volume". These hidden rows are: Alabama, Arkansas, Arizona.

The alert box I'll use will be something like:

<script type="text/javascript">
var x=window.confirm("You have set a unique threshold for one or more states below. Are you sure you want to reset them all?")
if (x)
    window.alert("Thresholds changed!(Form submitted)")
else
    window.alert("Thresholds not changed!(Form NOT submitted)")
</script>

But I am not able to figure out how to implement the logic in javascript for the check to detect change in text field (after submit button is clicked). The html code I am using is given below and the jsfiddle link is: jsfiddle

 $(document).ready(function() { $(".btn1").click(function() { $(".expand1").toggle(); }); $(".btn2").click(function() { $(".expand2").toggle(); }); }) 

 <style> .expand1 { display: none; } .expand2 { display: none; } body { background-color: AliceBlue; } span.note1 { float: left } span.note2 { font-size: 80% } table#t02, #t02 th, #t02 td { border: none; border-collapse: collapse; font-size: 80%; } #button1 { position: absolute; bottom: 10px; left: 50%; } </style> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post"> <div style="float:left; width:50%"> <table id="t02" class="table2"> <tr> <th></th> <th></th> <th style="color:green">Green</th> <th style="color:gold" , colspan="3">Yellow</th> <th></th> <th style="color:red">Red</th> </tr> <tr> <td class="btn1">Post-IVR Call Volume</td> <td>&lt</td> <td> <input type="text" , name="post_ivr_call_volume_good_high" , size="2" , maxlength="3"> </td> <td> <input type="text" , name="post_ivr_call_volume_warning_low" , size="2" , maxlength="3"> </td> <td>to</td> <td> <input type="text" , name="post_ivr_call_volume_warning_high" , size="2" , maxlength="3"> </td> <td>&gt</td> <td> <input type="text" , name="post_ivr_call_volume_critical_low" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Alabama</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_good_high_alabama" , size="2" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_low_alabama" , size="2" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_high_alabama" , size="2" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_critical_low_alabama" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Arkansas</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_good_high_arkansas" , size="2" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_low_arkansas" , size="2" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_high_arkansas" , size="2" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_critical_low_arkansas" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand1">Arizona</td> <td class="expand1">&lt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_good_high_arizona" , size="2" , maxlength="3"> </td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_low_arizona" , size="2" , maxlength="3"> </td> <td class="expand1">to</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_warning_high_arizona" , size="2" , maxlength="3"> </td> <td class="expand1">&gt</td> <td class="expand1"> <input type="text" , name="post_ivr_call_volume_critical_low_arizona" , size="2" , maxlength="3"> </td> </tr> <tr> <td class="btn2">IVR Call Volume</td> <td>&lt</td> <td> <input type="text" , name="ivr_call_volume_good_high" , size="2" , maxlength="3"> </td> <td> <input type="text" , name="ivr_call_volume_warning_low" , size="2" , maxlength="3"> </td> <td>to</td> <td> <input type="text" , name="ivr_call_volume_warning_high" , size="2" , maxlength="3"> </td> <td>&gt</td> <td> <input type="text" , name="ivr_call_volume_critical_low" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Alabama</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_good_high_alabama" , size="2" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_low_alabama" , size="2" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_high_alabama" , size="2" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_critical_low_alabama" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Arkansas</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_good_high_arkansas" , size="2" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_low_arkansas" , size="2" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_high_arkansas" , size="2" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_critical_low_arkansas" , size="2" , maxlength="3"> </td> </tr> <tr> <td align="center" class="expand2">Arizona</td> <td class="expand2">&lt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_good_high_arizona" , size="2" , maxlength="3"> </td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_low_arizona" , size="2" , maxlength="3"> </td> <td class="expand2">to</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_warning_high_arizona" , size="2" , maxlength="3"> </td> <td class="expand2">&gt</td> <td class="expand2"> <input type="text" , name="ivr_call_volume_critical_low_arizona" , size="2" , maxlength="3"> </td> </tr> </table> <input type="submit" value="Submit" id="button1" /> </div> </form> 

Note: html when I try from browser does expand and collapse when I click on "Post-IVR Call Volume" or "IVR Call Volume" but somehow from jsfiddle it doesn't work.

Can I get some help or direction on how to implement the check when text field is changed.

Answer 1

I've kept this short and sweet so you can see what's happening.

HTML:

<form class="my-form">
    <input type="text" class="my-input">
    <button type="submit">Submit</button>
</form>

jQuery:

$(document).on('input', '.my-input', function(){
    $(this).closest('form').addClass('changed');
});

$(document).on('submit', '.my-form', function(e){
    if($(this).hasClass('changed')){
        alert('submitted and changed');
    } else{
        alert('submitted and NOT changed');
    }
    e.preventDefault();
});

This adds a class to your form, so it can check for the change on submit.

JSFiddle demo