示例`preventDefault`

Question

我正在尝试在单击变量上的提交按钮时存储html表单的文本值。单击提交按钮后，该值将立即存储一秒，然后再次变为空白。为什么会这样？

var userSearch = "";

$(document).ready(function() {
  $("#buttonA").click(function() {
    userSearch = document.getElementById("userSearch").value;
    console.log(userSearch);

  });
  console.log(userSearch);
});

<!DOCTYPE>
<head>
  <link rel="stylesheet" href="stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container text-center">
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a>
    <div id="searchBox">
      <form>
        <input type="text" id="userSearch" name="userSearch">
        <button id="buttonA">Submit</button>
      </form>
    </div>

    <div id="resultsBox"></div>
  </div>
</body>

Answer 1

按form内的按钮默认提交表单。因此，您的页面将被重新加载，并且您将丢失客户端变量的任何状态。

为了防止这种情况，您可以：

通过在侦听器中传递的事件对象上调用e.preventDefault()来阻止提交
使用其他机制（例如cookies）将变量从一个页面加载传递到另一个

示例`preventDefault`

＆＃13;

var userSearch = "";

$(document).ready(function() {
  $("#buttonA").click(function(e) {
    e.preventDefault();
    userSearch = document.getElementById("userSearch").value;
    console.log(userSearch);

  });
  console.log(userSearch);
});

＆＃13;

<!DOCTYPE>
<head>
  <link rel="stylesheet" href="stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container text-center">
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a>
    <div id="searchBox">
      <form>
        <input type="text" id="userSearch" name="userSearch">
        <button id="buttonA" type="button">Submit</button>
      </form>
    </div>

    <div id="resultsBox"></div>
  </div>
</body>

＆＃13;

Answer 2

当您单击提交时，按性质（按钮），页面将重新加载。这会重置现有的表单值。理想情况下，您可以将用户带到一个新页面，该页面将由服务器端语言（如PHP）提供服务。如果您希望数据保持您输入的方式，请将<button id="buttonA">Submit</button>更改为<input type="button" value="submit">。

或者，使用cookie在页面重新加载之间存储表单值。

但请注意，您现有的脚本在代码段中运行正常。因此，您的机器上可能会出现其他问题（在您的最后）。

存储点击事件的价值

2 个答案:

示例`preventDefault`

存储点击事件的价值

2 个答案:

示例preventDefault

示例`preventDefault`