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

Question

我的 HTML 页面出现问题。我的程序旨在使用表单收集名称，然后将其输出到表单下方的表中。当页面不重新加载时，它能够做到这一点。

我第一次输入特定名称时，页面会重新加载。页面重新加载后，并且我输入了相同的名称，因此在以后按回车键时不会重新加载。我不知道这是为什么，或者如何解决。

这是链接的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

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

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

或

删除输入标签上的onclick="project62Part2()"，然后移至表单标签onsubmit="return project62Part2()"

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

Answer 3

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

1。添加Event.preventDefault()方法

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

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

怎么运行的？

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

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

• 然后将event参数添加到project62Part2()方法中。

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

这是基于前面的解释。如果<input>类型的submit元素触发了提交调用，那么如果您将其替换为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>

Answer 4

尝试在project62Part2上添加事件参数，然后在其中执行event.preventDefault（）