为什么onsubmit不起作用，并且如果我在控制台中调用该函数，它将运行？

Question

我有这个HTML：

<!doctype html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">

<script src="js/filename.js"></script>
</head>

<body>
    <form id = "dp5" action=""  method="POST" onsubmit="Write_Text()">
      <h3>5- Do you know any browsers?</h3>
      <input id = "No" type="radio" name="dp5N" value="false">
      <label for = "No">No </label>

      <input id = "yes" type="radio" name="dp5S" value="true">
      <label for = "yes">Yes</label>

      <label for = "text">6 - Which?</label>
      <input id = "text" type="text" name="dp5text" value="">
    </form>

    <div id="next">
      <input id="sub" type="submit" name="submit" value="Next">
    </div>
</body>
</html>

和这个JavaScript的“文件名”：

function Write_Text() {
let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

}

该文本框应开始禁用，并且仅在用户选择“是”选项时才可以。 该功能根本不起作用。

Answer 1

您的“提交”按钮不在表格中。 将其放在表单中，它将起作用。

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text(); return false">
  <h3>5- Do you know any browsers?</h3>
  <input id = "No" type="radio" name="dp5N" value="false">
  <label for = "No">No </label>

  <input id = "yes" type="radio" name="dp5S" value="true">
  <label for = "yes">Yes</label>

  <label for = "text">6 - Which?</label>
  <input id = "text" type="text" name="dp5text" value="">

  <div id="next">
    <input id="sub" type="submit" name="submit" value="Next">
  </div>
</form>

Answer 2

解决Sreekanth MK指出的问题后，您将遇到一个新问题：

没有什么可以阻止表单提交的默认操作，即将表单数据发送到action URL（在您的情况下，它将是页面自己的URL）并将当前页面替换为该URL返回的内容。

您需要阻止默认操作。 最小的方法是：

<form id = "dp5" action=""  method="POST" onsubmit="Write_Text(); return false">

要么

<form id = "dp5" action=""  method="POST" onsubmit="event.preventDefault(); Write_Text();">

...但是我建议使用现代事件处理，而不是删除onsubmit属性并像这样更改JavaScript：

function Write_Text(event) {
    event.preventDefault();
    let x = document.forms["dp5"]["No"].value;

    if (x === "false") {
        document.getElementById("text").disabled=true;
        document.getElementById("text").value="";
    } else {
        document.getElementById("text").disabled =false;
    }
}
document.getElementById("dp5").addEventListener("submit", Write_Text);

请注意，您需要移动script标记。 将script head是一种反模式。 脚本位于页面末尾，紧接</body>标记之前。

旁注：您可以在自己的代码中随意执行任何操作，但是FWIW，JavaScript中压倒性的约定是，函数名称以小写字母开头并使用camelCase ，而不是使用最初使用上限的CamelCase构造函数。 因此，使用writeText而不是Write_Text 。

Answer 3

首先，可以通过在表单中移动按钮并防止默认行为来轻松解决提交问题。

在提交问题中，我认为还可以通过解决以下问题来显着改善代码：您可以选择两个无线电输入：将它们包装到一个字段集中并为其使用相同的名称； 为什么？ 更容易获得所选答案，并且可以扩展到多个输入。

下面有一个我所说的工作示例。

干杯!

 function Write_Text(event) { event.preventDefault(); let x = document.querySelector('input[name="ans"]:checked').value console.log(x); if (x === "false") { document.getElementById("text").disabled=true; document.getElementById("text").value=""; } else { document.getElementById("text").disabled =false; } }

 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> </head> <body> <h3>5- Do you know any browsers?</h3> <form id="dp5" action="" method="POST" onsubmit="return Write_Text(event)"> <fieldset> <input id="No" type="radio" name="ans" value="false"> <label for="No">No </label> <input id="yes" type="radio" name="ans" value="true"> <label for="yes">Yes</label> </fieldset> <label for="text">6 - Which?</label> <input id="text" type="text" name="dp5text" disabled value=""> <div id="next"> <input id="sub" type="submit" name="submit" value="Next"> </div> </form> </body> </html>

Answer 4

您需要在此处使用事件对象来防止发生默认情况，因为页面会在onSubmit刷新，然后在函数Write_Text（）中提交表单

function Write_Text(event) {
//This will prevent Default Behaviour
event.preventDefault();

let x = document.forms["dp5"]["No"].value;

if (x === "false") {
    document.getElementById("text").disabled=true;
    document.getElementById("text").value="";
} else {
    document.getElementById("text").disabled =false;
}

// then submit using JS
}

为什么onsubmit不起作用，并且如果我在控制台中调用该函数，它将运行？

问题描述

4 个解决方案

解决方案1
2 2018-11-07 09:55:49

解决方案2
1

解决方案3
0 2018-11-07 10:59:48

解决方案4
-1 2018-11-07 09:58:01

为什么onsubmit不起作用，并且如果我在控制台中调用该函数，它将运行？

问题描述

4 个解决方案

解决方案1 2 2018-11-07 09:55:49

解决方案2 1

解决方案3 0 2018-11-07 10:59:48

解决方案4 -1 2018-11-07 09:58:01

解决方案1
2 2018-11-07 09:55:49

解决方案2
1

解决方案3
0 2018-11-07 10:59:48

解决方案4
-1 2018-11-07 09:58:01