表单提交时的 HTML 输出更新

html output update on form submit

本文关键字：输出 更新 HTML 表单提交      更新时间：2023-09-26
这

应该是一个非常简单的问题，但我似乎无法在任何地方明确找到解决方案。我希望做一个javascript计算（从一个表单中的一堆输入），我得到了两个数字。然后，这些数字将更新同一表单中两个 html 输出元素的值。这是我正在尝试做的事情的最小工作示例（如果有更好的方法，我会全听）：

<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<head>
<script>
function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    var outarr = [];
    outarr.push(out1);
    outarr.push(out2);
    return outarr;
}
</script>
</head>
<body>
  <form name="form1">
    <table>
      <tr>
        <td>
          Head1
        </td>
        <td>
          Head2
        </td>
        <td>
          Head3
        </td>
        <td>
          Head4
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

当按下"运行"按钮时，如何让outarr的第一个元素填充 out1，同样，当按下"运行"按钮时，outarr的第二个元素更新 out2？

您可以通过 value 属性设置 out1 和 out2 的值。

function somecalc() {
    var a = parseFloat(document.forms["form1"]["id1"].value);
    var b = parseFloat(document.forms["form1"]["id2"].value);
    var c = parseFloat(document.forms["form1"]["id3"].value);
    var d = parseFloat(document.forms["form1"]["id4"].value);
    var out1 = a-b-c-d;
    var out2 = a+b+c+d;
    document.forms["form1"]["out1"].value = out1;
    document.forms["form1"]["out2"].value = out2;
    return [out1, out2];
}
<!DOCTYPE HTML PUBLIC "~//IETF//DTD HTML//EN">
<html>
<body>
  <form name="form1">
    <table>
      <tr>
        <td>Head1</td><td>Head2</td><td>Head3</td><td>Head4</td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" placeholder="Enter 1" id="id1" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="2" placeholder="Enter 2" id="id2" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="3" placeholder="Enter 3" id="id3" size="10" maxlength="10" />
        </td>
        <td>
          <input type="text" name="4" placeholder="Enter 4" id="id4" size="10" maxlength="10"/>
        </td>
      </tr>
    </table>
    <p><input type="submit" value="Run" onclick="somecalc();"></p>
    <table border="1">
      <tr>
        <td>
          Out1 = <output name="out1" for=""></output>
        </td>
      </tr>
      <tr>
        <td>
          Out2 =<output name="out2" for=""></output>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

function somecalc() {
    var a, b, c, d, out1, out2;
    a= parseFloat(document.forms["form1"]["id1"].value);
    b = parseFloat(document.forms["form1"]["id2"].value);
    c = parseFloat(document.forms["form1"]["id3"].value);
    d = parseFloat(document.forms["form1"]["id4"].value);
    out1 = a-b-c-d;
    out2 = a+b+c+d;
    document.querySelector("output[name=out1]").innerHTML = out1
    document.querySelector("output[name=out2]").innerHTML = out2
}

试试这个，或者你可以在你的html中"id"s，比如

<output id="out1" .. >和document.getElementById("out1").innerHTML = out1

你也可以

做这样的事情。您可以使用document.querySelector或您使用的方法代替document.getElementById 在尝试完成代码时，我只是为了简单起见而这样做。

通常，javascript文件链接到外部文件，而不是在脚本标签中声明，但我想你可以这样做是为了家庭作业，或者将它们全部放在HTML中会让它更简单一些。如果您确实将其分离出来，则必须创建一个单击处理程序，例如在我的代码中，这是btnRun.addEventListener('click', runClick); 此外，e.preventDefault()会阻止提交按钮的默认操作，该按钮通过声明的任何操作（GET，POST等）提交表单。

此外，Mozilla Developer Network 也有很多关于 JavaScript 语法和示例的资源，如果你不知道的话 https://developer.mozilla.org/en-US/docs/Web/JavaScript

var btnRun = document.getElementById('run');
var out2 = document.getElementById('out2');
var out1 = document.getElementById('out1');
function runClick(e){
  e.preventDefault();   
  var output1, output2;
  var a = parseFloat(document.getElementById('id1').value);
  var b = parseFloat(document.getElementById('id2').value);
  var c = parseFloat(document.getElementById('id3').value);
  var d = parseFloat(document.getElementById('id4').value);

  output1 = a + b + c + d;
  output2= a - b - c - d;
  out1.innerText= output1;
  out2.innerHTML = output2;
}
btnRun.addEventListener('click',  runClick);
相关文章：