问题描述
我正在使用以下 JavaScript 代码来验证表单。我想添加的内容是从表单中获取所有值并将它们提交到列表中。它们消失得如此之快，我真的不明白为什么。
function validateForm()
{
//chercher les elements de la formes
var nom = document.getElementById("nom").value;
var prenom = document.getElementById("prenom").value;
var dateNaissance = document.getElementById("date").value;
alert(nom +" "+prenom+" "+dateNaissance);
//ajouter etudiant à la liste
select = document.getElementById('select');
var opt = document.createElement('option');
opt.value = 0;
opt.innerHTML = nom +" "+prenom+" "+dateNaissance;
select.appendChild(opt);
}
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="etudiant.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<div>
<table border="1" >
<tr>
<th>
Ajouter/Editer des étudiants
</th>
</tr>
<tr>
<td>
<form id = "myForm" action = "" method = "get" onsubmit = "validateForm();">
Nom:<input id = "nom" type = "text" name = "nom" placeholder = "tapez votre nom" required/><br></br>
Prénom:<input id = "prenom" type = "text" name = "prenom" placeholder = "tapez votre prenom" required/><br></br>
Date de naissance:<input id = "date" type = "text" name = "date" placeholder = "tapez votre date de naissance" required/><br></br>
<input id = "submit" type = "submit" name = "valider" value = "Valider" />
</form>
</td>
</tr>
<tr>
<th>
Liste des étudiants
</th>
</tr>
<tr>
<td>
<select id="select" name="etudiants" size="1">
</select>
</td>
</tr>
</table>
最佳答案
您必须告诉浏览器是否应该提交表单。为此，您可以调用返回其值的函数:
<form id = "myForm" action = "" method = "get" onsubmit = "return validateForm();">
并且，在 validateForm 函数中，无论表单是否有效，您都必须返回 true 或 false。
关于javascript - 为什么从表单提交并添加到列表中的值会消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40087249/