JavaScript:当文本字段中的值发生变化时如何显示警告框

Question

我正在尝试添加一个复选框到我正在创建的html页面。

我试图实现的是:如果值在“Post调用卷”或"IVR调用卷“的任何文本框中更改，并且如果下面同一列(更改的文本框)中的任何文本框中的值与新值不同，则应显示一个警告框。

例如，如果绿色下的“后IVR调用量”被更改，那么我们应该在Green下的文本框中检查“Post调用卷”下的所有隐藏行的vale。这些隐藏的行是:阿拉巴马州，阿肯色州，亚利桑那州。

我将使用的警报框如下：

<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中实现检查的逻辑，以检测文本字段中的更改(单击submit按钮后)。下面给出了我使用的html代码，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>

​

注意:当我尝试使用浏览器时，当我单击“后IVR调用卷”或"IVR调用卷“时，html确实会展开和折叠，但不知怎的，从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();
});

这会向表单中添加一个类，这样它就可以在submit上检查更改。

JSFiddle演示