Question

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

<!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事件未返回元素

2 个答案: