Question

我试图让它成为如果用户在优惠券代码字段中输入“idh4”，我的“booyah”div就会被提供的html填充。

我觉得问题是javascript只在加载页面时执行，所以即使idh4输入到字段中，它也不再检查它。也许if语句在这种情况下不适合使用？

根据要求，这里是jsbin代码：

  <div id="booyah"></div>
<form action="" method="POST">
        Coupon Code?<input id="couponcode" type="text" name="coupon code" value="idh4"><br>
        <input type="submit">
    </form>

$("#couponcode").change(function(){
if ($("#couponcode").val() === 'idh4') {
      console.log('it got called');
      $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
  }

  });

Answer 1

我不确定这是你想要的，但无论如何你都可以看看它：

$(document).ready(function(){
   $("#booyahInput").on('keyup', function(){
      if ($(this).val() == 'idh4') {
         console.log('it got called');
         $( "#booyah" ).html("<p>That code gets you free snappie stickers!</p>");
      }
    });
});

http://jsfiddle.net/rwxygptf/

Answer 2

此问题是您在文本框中使用了change事件：

$("#couponcode").change

在文本框change因失去焦点而被解雇。因此，在进入优惠券后，用户必须离开现场。

而是尝试input，keyup，keypress事件以立即响应。

$("#couponcode").on('input', function(){
    //
});

Answer 3

如果你想要提交它，你必须添加一个函数来触发提交，如果你想要触发字段中的文本更改 - 你需要听事件。理解事件监听器是理解javascript的关键。

以下是2篇参考文献：提交：

http://www.javascript-coder.com/html-form/html-form-tutorial-p1.phtml

监听器：

jQuery Listen For All Text Input Changes

Answer 4

您遇到的问题是，在提交表单时页面正在重新加载。要正确执行此操作，您需要通过AJAX提交表单并阻止页面刷新。但是根据您提供的代码，如果您正在执行此操作，则不清楚。

JSFiddle

$("#myform").on("submit", function(e) {
    e.preventDefault();
    if ($("#couponcode").val() === 'idh4') {
        console.log('it got called');
        $("#booyah").html("<p>That code gets you free snappie stickers!</p>");
    }
});

如果在页面加载后如何执行？

4 个答案: