使用 javascript 提交表单后显示消息

Question

I'd like to show the message what I type for submitting after clicking submit button with javascript.我想显示我在单击带有 javascript 的提交按钮后输入的消息。 I wonder I have to use alert or modal for it with javascript.我想知道我必须对 javascript 使用警报或模式。 I just want to use Javascript instead of JQuery or Ajax.我只想使用 Javascript 而不是 JQuery 或 Ajax。

<body>

<form action="index.html" method="POST">
 <label for="FirstName">First Name:</label>
 <input type="text" id="FirstName" placeholder="First Name">
 <label for="LastName">Last Name:</label>
 <input type="text" id="LastName" placeholder="Last Name">
 <input type="Submit" value="Submit" />
</form>

</body>

Answer 1

You could do something like the following:您可以执行以下操作：

 let form = document.getElementsByTagName("form")[0]; form.addEventListener("submit", (e) => { e.preventDefault(); alert("Form Submitted;"); });

 <form action="index.html" method="POST"> <label for="FirstName">First Name:</label> <input type="text" id="FirstName" placeholder="First Name" /> <label for="LastName">Last Name:</label> <input type="text" id="LastName" placeholder="Last Name" /> <input type="Submit" value="Submit" /> </form>

Answer 2

I hope the following code will help.我希望下面的代码会有所帮助。

 let form = document.getElementById("form"); form.onsubmit = function(){ let inputs = Object.fromEntries([...form.children].filter(e=>e.localName=="input"&&e.placeholder).map(e=>[e.placeholder,e.value])); for(key in inputs) alert(key+": "+inputs[key]); }

 <body> <form id="form" action="index.html" method="POST"> <:--i've added an id --> <label for="FirstName">First Name:</label> <input type="text" id="FirstName" placeholder="First Name"> <label for="LastName">Last Name:</label> <input type="text" id="LastName" placeholder="Last Name"> <input type="Submit" value="Submit" /> </form> </body>

使用 javascript 提交表单后显示消息

问题描述

2 个解决方案

解决方案1
2 2020-04-22 06:33:53

解决方案2
1 2020-04-22 06:59:45

使用 javascript 提交表单后显示消息

问题描述

2 个解决方案

解决方案1 2 2020-04-22 06:33:53

解决方案2 1 2020-04-22 06:59:45

解决方案1
2 2020-04-22 06:33:53

解决方案2
1 2020-04-22 06:59:45