Question

我将按照教程学习一个简单的书签应用程序，因为我是javascript的初学者，因此使用java脚本。我使用custom.js文件将javascript代码分开保存，并将其链接到代码底部。我使用addEventListener来提交表单，并使用console.log来查看输出以检查其结果。但这并没有给我任何错误，也无法使用addEventListener。因为它没有给出错误消息，所以我的代码找不到问题。如果有人可以帮助我，我非常感谢您的帮助。谢谢。我有index.html和custom.js文件。

document.getElementById('myform').addEventListener('submit', saveBookmark);

//function saveBookmark
function saveBookmark(e) {
  console.log('Works');

  e.preventDefault();
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<main role="main" class="container" id="mainc">
  <div class="jumbotron">
    <h1 id="titlehead">App</h1>

    <!-- Form -->
    <form id="myform">
      <!--form field to input name-->
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" name="sitename" class="form-control" placeholder="Website Name">
      </div>

      <!--form field to input url-->
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" name="siteurl" class="form-control" placeholder="Website URL">
      </div>

      <input type="button" name="submit" class="btn btn-primary" value="SUBMIT">
    </form>
    <!-- Eof Form -->
  </div>
</main>

Answer 1

由于您尝试将函数附加到 submit 事件，并且您的按钮类型为 button ，因此该事件不会触发。将其更改为提交：

<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">

// Event for form Submission
document.getElementById('myform').addEventListener('submit', saveBookmark);

//function saveBookmark
function saveBookmark(e) {
  console.log('Works');

  e.preventDefault();
}

<main role="main" class="container" id="mainc">
  <div class="jumbotron">
    <h1 id="titlehead">App</h1>

    <!-- Form -->
    <form id="myform">
      <!--form field to input name-->
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" name="sitename" class="form-control" placeholder="Website Name">
      </div>

      <!--form field to input url-->
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" name="siteurl" class="form-control" placeholder="Website URL">
      </div>

      <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">
    </form>
    <!-- Eof Form -->
  </div>
</main>

Answer 2

您的输入类型是Button，将类型设置为Submit :)

// Event for form Submission
document.getElementById('myform').addEventListener('submit',function saveBookmark(e){
console.log('Works');

  e.preventDefault();
});

<main role="main" class="container" id="mainc">
  <div class="jumbotron">
    <h1 id="titlehead">App</h1>

    <!-- Form -->
    <form id="myform">
      <!--form field to input name-->
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" name="sitename" class="form-control" placeholder="Website Name">
      </div>

      <!--form field to input url-->
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" name="siteurl" class="form-control" placeholder="Website URL">
      </div>

      <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">
    </form>
    <!-- Eof Form -->
  </div>
</main>

Answer 3

您的输入类型必须为type=submit

在此处了解更多信息：https://javascript.info/forms-submit

var ele = document.getElementById('myform');
if(ele.addEventListener){
    ele.addEventListener("submit", saveBookmark, false);  
}


//function saveBookmark
function saveBookmark(e) {
  console.log('Works');
  e.preventDefault();
}

<main role="main" class="container" id="mainc">
  <div class="jumbotron">
    <h1 id="titlehead">App</h1>

    <!-- Form -->
    <form id="myform">
      <!--form field to input name-->
      <div class="form-group">
        <label>Site Name</label>
        <input type="text" name="sitename" class="form-control" placeholder="Website Name">
      </div>

      <!--form field to input url-->
      <div class="form-group">
        <label>Site URL</label>
        <input type="text" name="siteurl" class="form-control" placeholder="Website URL">
      </div>

      <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">
    </form>
    <!-- Eof Form -->
  </div>
</main>

Answer 4

尝试一下：

// Event for form Submission
document.getElementById('myform').addEventListener('submit', function saveBookmark(e) {
    e.preventDefault();
    console.log('Works');
});

JavaScript AddEventListener无法正常工作

4 个答案: