HTML onsubmit 事件不返回元素

Question

我无法通过在表单上使用 onsubmit 事件获取输入文本怎么办？请指导我。这是代码。在此代码中，我添加了一个输入元素和一个提交元素。我想在提交表单后获取输入元素的值，但是我不能。

<!DOCTYPE html>
<html lang="en">

<body>

    <form onsubmit="myfunction()">
        Text Input: <input type="text" id="tableInput">
        <input type="submit" value="get text input">
    </form>

</body>
<script>


function myfunction() {
      var num = document.getElementById("tableInput").value;
      alert(num);

    }
</script>

</html>

Answer 1

您需要修复选择器。 input的id是"tableInput"，所以需要传入"tableInput"给getElementById：

function myfunction() {
      var num = document.getElementById("tableInput").value;
      alert(num);
}

<!DOCTYPE html>
<html lang="en">

<body>

    <form onsubmit="myfunction()">
        Text Input: <input type="text" id="tableInput">
        <input type="submit" value="get text input">
    </form>

</body>
<script>


function myfunction() {
      var num = document.getElementById("tableInput").value;
      alert(num);
}
</script>

</html>

Answer 2

    function myfunction() {
          var id = document.getElementById("idOfTheField").value;
          var name = document.getElementById("cars").value;
          var t = document.getElementById("cars");
var selectedText = t.options[t.selectedIndex].text;
          alert('id is : ' + id + ' name is : ' + name + 'car : ' + selectedText);

     }

    <form onsubmit='myfunction()'>
    <label>id: </label><br>

    <input type='text' value='' id='idOfTheField' name='idField' /><br>

    <label>name: </label><br>

    <input type='text' value='' id='idOfTheNameField' name='nameField'/><br>
    <label>select a car : </label><br>
   <select name="cars" id='cars'>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

    <input type='submit' value='submit' />
    </form>

问题是 document.getElementById javascript 方法生成字段的 ID。所以你只需要提供id。 id='thisIsID' 那么id就是thisIsID ..

在我的回答中也显示了您应该如何使用 jquery 执行此操作
希望这有帮助

function myfunction() {
      let num = $('#tableInput').val();
      alert(num);

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<body>

    <form onsubmit="myfunction()">
        Text Input: <input type="text" id="tableInput">
        <input type="submit" value="get text input">
    </form>

</body>


</html>

HTML onsubmit 事件不返回元素

HTML onsubmit event not returning elements

javascript

onsubmit