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

Question

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

我想要实现的是：如果在＆＃34; Post-IVR Call Volume＆＃34;的任何文本框中更改了值。或者＆＃34; IVR通话量＆＃34;如果下面同一列（更改的文本框）中任何文本框中的值与新值不同，则应显示警告框。

例如，如果＆＃34; Post-IVR Call Volume＆＃34;在绿色下更改，然后我们应该检查绿色下的文本框中的vale，以查看＆＃34; Post-IVR Call Volume＆＃34;下的所有隐藏行。这些隐藏的行是：阿拉巴马州，阿肯色州，亚利桑那州。

我将使用的警告框将是：

<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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意：当我点击＆＃34; Post-IVR Call Volume＆＃34;当我从浏览器尝试时，html会扩展并崩溃或者＆＃34; IVR通话量＆＃34;但不知何故，从jsfiddle它不起作用。

我可以在更改文本字段时获得有关如何实施检查的帮助或指示。

Answer 1

我保持这么简短和甜蜜，所以你可以看到发生了什么。

HTML：

4

jQuery的：

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

这会在表单中添加一个类，因此可以检查提交时的更改。

JSFiddle demo