我是 Javascript 新手,正在自学。我的页面上的表单有问题。我只想用一个简单的 javascript 代码进行测试,我可以通过在提交表单时向 console.log 添加一个函数来操作我的输入“type=submit”(我在视频上观看了它,我想做我自己做的)。
这是我的代码:
(function() {
"use strict";
document.getElementById('enviar').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
这是我的 HTML 代码:
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>
我在这里遇到的问题是根本不起作用..我的 ID 元素选择正确,但我不知道我的代码有什么问题。我创建了一个变量并控制台选择了我的 ID,以查看我是否从 DOM 中获取了正确的元素,并且在控制台中获取了正确的输入元素。如果有人知道为什么不起作用,请。
加:在我的文本输入字段上,我有一个正则表达式,但我没有得到我想要的输出..目标是用户必须写至少两个名字(名字和姓氏),所以当他们写只有一个它是不正确的..如果有人写了两个以上的名字(名字、中间名和姓氏),我就遇到了这个正则表达式的问题,我不想让它成为一个错误的答案,因为从技术上讲是正确的。因此,我需要制作一个更好的正则表达式来获得该结果(当用户写入两个或多个名称,而不仅仅是两个时),但我对正则表达式了解不多。
最佳答案
您正在获取带有 id
enviar
的元素,这是提交按钮元素。您需要根据表单的元素id
(即escribenos
)进行查询。尝试运行下面的代码片段,您可以看到它具有预期的结果。
(function() {
"use strict";
document.getElementById('escribenos').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>
关于javascript - 带有表单元素的 addEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48482988/