Question

我有一个带有提交按钮的html表单。我在头文件中包含的文件中有一个js函数。我试图绑定按钮的onclick事件来调用该函数。但是，我尝试的所有方法都不起作用。

<!DOCTYPE html>
<html>
<body>
    <script src="popup.js" type="text/javascript"></script>
    <button type="button" onclick="displayFormContents();">
</button>

<p id="demo"></p>
First name:<br>
<input type="text" name="firstname" >
<br>
Name:<br>
<input type="text" name="name" >
<br>

<form>
    age : <input type="date" name="Age">
</form>

<form>
    Phone : <input type="number" name="Phone">
</form>

<form>
    email : <input type="email" name="mail">
</form>

<form>
    Student at UCLA? : <input type="checkbox" name="Doe">
</form>

<form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
</form>

<input type="submit">
</form>

</body>
</html>

Answer 1

确保在popup.js文件中创建了displayFormContents（）方法。然后不需要多次使用表单标记。将所有表单元素放在一个表单标记内。

<html>
<body>
<script src="popup.js" type="text/javascript"></script>
<form>
<p id="demo"></p>
 First name:<br>
  <input type="text" name="firstname" >
  <br>
  Name:<br>
  <input type="text" name="name" >
  <br>
  age :
  <input type="date" name="Age">
  Phone :
  <input type="number" name="Phone">
  email :
  <input type="email" name="mail">
  Student at UCLA? :

  <input type="checkbox" name="Doe">
    <input type="radio" name="gender" value="male" checked> Male<br>

  <input type="radio" name="gender" value="female"> Female<br>

  <input type="radio" name="gender" value="other"> Other

<button type="button"
onClick="displayFormContents();">Submit
</button>
</form>
</body>

</html>

Answer 2

仅使用单个表单标记。 popup.js应与包含此代码的文件位于同一文件夹中。 popup.js应该有displayFormContents（）函数。在表单提交上调用该函数。

<!DOCTYPE html>
<html>
<head>
    <script src="popup.js" type="text/javascript"></script>
</head>
<body>
<form onsubmit="displayFormContents()">
<p id="demo"></p>
First name:<br>
<input type="text" name="firstname" >
<br>
Name:<br>
<input type="text" name="name" >
<br>
    age : <input type="date" name="Age">
    Phone : <input type="number" name="Phone">
    email : <input type="email" name="mail">
    Student at UCLA? : <input type="checkbox" name="Doe">
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
<input type="submit" value="Submit"/>
</form>

</body>
</html>

表单提交按钮onclick不会调用JS文件中包含的JS函数

2 个答案: