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

修复the problem Sreekanth MK pointed out后，您将遇到一个新问题：

没有什么可以阻止表单提交的默认操作，即将表单数据发送到action 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>结束标记之前，at the end of the page。

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

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

您需要在此处使用事件对象来防止使用Default，因为页面会在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 个答案: