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

Question

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

我要实现的是:如果“Post-IVR Call Volume”或“IVR Call Volume”的任何文本框中的值发生变化，并且如果下面同一列中任何文本框中的值(更改后的文本框)与新值不同，则应显示警告框。

例如，如果更改了绿色下的“Post-IVR Call Volume”，那么我们应该检查“Post-IVR Call Volume”下所有隐藏行的绿色下文本框中的值。这些隐藏的行是:阿拉巴马州、阿肯色州、亚利桑那州。

我将使用的警告框类似于:

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

注意:当我在浏览器中尝试时，当我单击“Post-IVR Call Volume”或“IVR Call Volume”时，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();
});

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

JSFiddle demo