Question

我有一个javascript函数如下：

function userNameEntered() {
var user = document.forms["user"] ["name"].value;
document.getElementById("Name").innerHTML = "Hello " + text + "!";
}

它访问此<form>：

<form method="get" name="user" onsubmit="userNameEntered()">
<p>Name:</p>
<input type="text" name="name" autocomplete="off" id="username">
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>

当我试用它时，我看到文本工具少于一秒然后消失。有任何想法吗？我认为可能是因为user不在全局范围内，所以我尝试在函数之前声明它，它甚至根本没有显示。我有点困惑，因为我看不到任何可能的问题。

Answer 1

通过从onsubmit处理程序（false）返回onsubmit="return userNameEntered()"来阻止默认表单操作（通过页面重新加载提交）。您还需要return false函数中的userNameEntered。

然后，请记住删除多余的onclick处理程序（避免使用onclick进行表单提交）并在某处添加id =“Name”的元素。

function userNameEntered() {
  var user = document.forms["user"]["name"].value;
  document.getElementById("Name").innerHTML = "Hello " + user + "!";
  return false;
}

<form method="get" name="user" onsubmit="return userNameEntered()">
  <p>Name: <span id="Name"></span></p>
  <input type="text" name="name" autocomplete="off" id="username">
  <input type="submit" value="Submit" id="usersubmit">
</form>

另请注意，您可能希望"Hello " + user + "!";不是text。

Answer 2

在函数中使用return false

    function userNameEntered() {
    var user = document.forms["user"] ["name"].value;
    document.getElementById("enter code hereName").innerHTML = "Hello " + text + "!";
    return false;
     }

Answer 3

您需要停止提交表单，因为正在重新加载页面的是帖子。这就是为什么你简单地看到它，然后它“消失”。

要停止此操作，您需要停止提交的表单：

function userNameEntered()  {
    var text = document.forms["user"]["name"].value;
    document.getElementById("name").innerHTML = "Hello " + text + "!"; 
    return false;
}

您还有一些错误：您的表单元素为name，但您引用Name，指定var user但使用text。

Answer 4

它正在消失，因为在提交表单后页面正在重新加载。

要停止尝试：

function userNameEntered() {
  var user = document.forms["user"] ["name"].value;
  document.getElementById("Name").innerHTML = "Hello " + text + "!";
  return false;
}

和

<form method="get" name="user" onsubmit="return userNameEntered()">
  <p>Name:</p>
  <input type="text" name="name" autocomplete="off" id="username">
  <input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>

Answer 5

单击“提交”按钮，防止未发生默认表单操作。由于此值可能会消失

<form method="get" name="user" onsubmit="userNameEntered();return false;">
<p>Name:</p>
<input type="text" name="name" autocomplete="off" id="username">
<input type="submit" onclick="userNameEntered()" value="Submit" id="usersubmit">
</form>


        <script>
            function userNameEntered() {
                debugger;
                var user = document.forms["user"]["name"].value;
                document.getElementById("username").innerHTML = "Hello " + user + "!";
            }
        </script>
or

  $('#usersubmit').click(function (e) {
    e.preventDefault();
    var user = document.forms["user"]["name"].value;
    document.getElementById("username").innerHTML = "Hello " + user + "!";
    });

document.getElementById（＆＃34;＃＆＃34;）。innerHTML =＆＃34; Hello＆＃34; +用户+＆＃34;！＆＃34 ;;不工作

5 个答案: