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

在前端开发中，使用JavaScript可以通过表单提交来实现交互和数据传输。当用户填写完表单并点击提交按钮时，可以使用JavaScript来处理表单提交事件，并显示相应的消息。

首先，需要在HTML页面中编写一个表单元素，并包含一个提交按钮。可以使用HTML的<form>元素和<input>元素来创建表单，以及一个按钮元素用于提交。

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

接下来，可以使用JavaScript来监听表单的提交事件，并在提交时执行相应的操作。可以使用addEventListener方法来绑定提交事件，并使用回调函数来处理提交操作。

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  // 获取表单数据
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  // 执行提交后的操作
  showMessage("Form submitted successfully! Name: " + name + ", Email: " + email);
});

在上面的代码中，我们使用preventDefault()方法阻止了表单的默认提交行为，以便在JavaScript代码中进行处理。然后，通过getElementById()方法获取表单中的输入值，并保存到相应的变量中。最后，调用showMessage()函数来显示提交成功的消息。

function showMessage(message) {
  // 创建一个新的消息元素
  var newMessage = document.createElement("div");
  newMessage.textContent = message;

  // 添加到页面中
  document.body.appendChild(newMessage);
}

showMessage()函数用于创建一个新的消息元素，并将其添加到页面中显示。

这样，当用户在表单中填写完数据并点击提交按钮后，JavaScript代码将捕获提交事件，并执行相应的操作，最终显示提交成功的消息。

在腾讯云的产品中，推荐使用云函数 SCF（Serverless Cloud Function）来处理表单提交后的数据处理和消息显示。云函数 SCF 是一种无服务器的事件驱动计算服务，能够实现按需计算，无需关心服务器运维等问题。

腾讯云云函数 SCF产品介绍链接：https://cloud.tencent.com/product/scf