JavaScript：更改文本字段中的值時如何顯示警報框

Question

我正在嘗試向正在創建的html頁面添加一個復選框。

我要實現的是：如果在“ IVR呼叫量”或“ IVR呼叫量”的任何文本框中更改了值，並且下面同一列（更改后的文本框中）的任何文本框中的值都為與新值不同，則應顯示一個警告框。

例如，如果更改了綠色下的“ IVR調用量”，那么我們應檢查“綠色”下文本框中的vale，以查看“ IVR調用量”下所有隱藏的行。 這些隱藏的行是：阿拉巴馬州，阿肯色州，亞利桑那州。

我將使用的警報框如下所示：

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

但是我無法弄清楚如何在javascript中實現邏輯以進行檢查以檢測文本字段的變化（單擊“提交”按鈕后）。 下面給出了我正在使用的html代碼，jsfiddle鏈接為： 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> 

注意：當我從瀏覽器嘗試時，html會在單擊“ IVR呼叫量”或“ IVR呼叫量”時展開並折疊，但是從jsfiddle中以某種方式它不起作用。

文本字段更改時，我是否可以獲得有關如何實施檢查的幫助或指導。

Answer 1

我把這個簡短而可愛，以便您可以看到發生了什么。

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();
});

這會將一個類添加到您的表單中，因此可以檢查提交時的更改。

JSFiddle演示