为什么每次向表单中提交新条目时我的 HTML 页面都会重新加载？

Question

我的 HTML 页面有问题。我的程序旨在使用表单收集名称，然后将它们输出到表单下方的 table 中。它能够在页面不重新加载时执行此操作。

我第一次输入某个名称时，页面会重新加载。页面重新加载后，我输入了相同的名称，但在随后的任何时间按回车键时都不会重新加载。我不知道这是为什么，也不知道如何解决。

这是链接的 JS 文件

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() {
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

我对编码的理解充其量是最基本的，所以虽然我很感激任何答案，但我希望它保持简单！

Answer 1

<input type='submit'> 导致页面刷新。将其替换为 <input type='button'>.

阅读更多here。

        // Gloabal Variables
    var enteredName,
     countOutput,
     count,
        table,
     form,
     allNames = [];
    
    function project62Part2() {
        // Your code goes in here.
        function getElements() {
      form = document.getElementById("nameForm");
      countOutput = document.getElementById("numNames");
      table = document.getElementById("table");
     }
        
     function addName() {
      enteredName = form.name.value;
      allNames.push(enteredName);
     }
     
     function countNames() {
      // Reset count
      count = 0;
      
      // Loop through and count names
      for (i = 0; i < allNames.length; i++) {
       count++;
      }
     }
     
     function output() {
      // Reset table
      table.innerHTML = "<tr><th>Names</th></tr>";
      // Display count
      countOutput.innerHTML = "Total names entered: " + count;
      
      // Loop through and add to table display
      for (i = 0; i < allNames.length; i++) {
       table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
      }
     }
     
     // Call code
     getElements();
     addName();
     countNames();
     output();
    
     // Prevent page from reloading
     return false;
    }

    <form id="nameForm" action="6.2projectpart2.html#">
        <label class="formLabel" for="name">Name: </label>
        <input id="name" name="name" />
        
        <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
    </form>
    
    <div id="numNames">Total names entered: </div>
    
    <table id="table"></table>

Answer 2

尝试在 project62Part2 上添加事件参数，然后在

中执行 event.preventDefault()

Answer 3

您可以从 <input type="submit" name="runExample" /> 更改为

<input type="button" name="runExample" />

或

删除输入标签上的 onclick="project62Part2()" 并移动到表单标签 onsubmit="return project62Part2()"

<form id="nameForm" onsubmit="return project62Part2()">

Answer 4

有很多方法可以实现这一点，我将解释两种方法：

1。添加 `Event.preventDefault()` 方法

每当您单击 submit 类型的 <input> 元素时，用户代理都会尝试将表单提交给表单中的 URL 设置。

现在，preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样执行其默认操作。这意味着 Form 界面不会重新加载页面。

怎么运行的？

好吧，只需将事件变量添加到您的 submit 调用中，如下所示：

<input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />

然后在project62Part2()方法中添加event参数。

function project62Part2(event) {
   event.preventDefault();

   ...

}

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2(event) {
   event.preventDefault();
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="submit" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2(event)" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

2。将 `input` 替换为 `button`

这是根据前面的解释。如果 submit 类型的 <input> 元素触发提交调用，那么如果将其替换为 button 类型，则不会触发提交调用。如果您正在使用服务器调用，我建议您这样做以维护 submit。

怎么运行的？

好吧，只需将类型从 submit 替换为 button，如下所示：

<input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />

// Gloabal Variables
var enteredName,
  countOutput,
  count,
  table,
  form,
  allNames = [];

function project62Part2() {
  event.preventDefault();
  // Your code goes in here.
  function getElements() {
    form = document.getElementById("nameForm");
    countOutput = document.getElementById("numNames");
    table = document.getElementById("table");
  }

  function addName() {
    enteredName = form.name.value;
    allNames.push(enteredName);
  }

  function countNames() {
    // Reset count
    count = 0;

    // Loop through and count names
    for (i = 0; i < allNames.length; i++) {
      count++;
    }
  }

  function output() {
    // Reset table
    table.innerHTML = "<tr><th>Names</th></tr>";
    // Display count
    countOutput.innerHTML = "Total names entered: " + count;

    // Loop through and add to table display
    for (i = 0; i < allNames.length; i++) {
      table.innerHTML += "<tr><td>" + allNames[i] + "</td></tr>";
    }
  }

  // Call code
  getElements();
  addName();
  countNames();
  output();

  // Prevent page from reloading
  return false;
}

<form id="nameForm" action="#">
  <label class="formLabel" for="name">Name: </label>
  <input id="name" name="name" />

  <input type="button" name="runExample" value="Submit" class="formatSubmit" onclick="project62Part2()" />
</form>

<div id="numNames">Total names entered: </div>

<table id="table"></table>

为什么每次向表单中提交新条目时我的 HTML 页面都会重新加载？

Why is my HTML page reloading every time a new entry is submitted into a form?

html

javascript

forms

reload

1。添加 `Event.preventDefault()` 方法

2。将 `input` 替换为 `button`

为什么每次向表单中提交新条目时我的 HTML 页面都会重新加载？

Why is my HTML page reloading every time a new entry is submitted into a form?

html

javascript

forms

reload

1。添加 Event.preventDefault() 方法

2。将 input 替换为 button

1。添加 `Event.preventDefault()` 方法

2。将 `input` 替换为 `button`