JavaScript:提交后在表单下显示元素

JavaScript是一种广泛应用于前端开发的编程语言，它可以通过在网页中嵌入脚本代码来实现动态交互和数据处理。在表单提交后，在表单下显示元素可以通过以下步骤实现：

首先，需要在HTML中定义一个表单元素，可以使用<form>标签来创建一个表单，并设置相应的属性，如action和method。

<form action="submit.php" method="post">
  <!-- 表单内容 -->
</form>

在表单中添加需要显示的元素，可以使用<input>、<textarea>等标签来创建输入框或文本域。

<form action="submit.php" method="post">
  <input type="text" name="name" placeholder="姓名">
  <textarea name="message" placeholder="留言"></textarea>
  <input type="submit" value="提交">
</form>

接下来，使用JavaScript来处理表单的提交事件。可以通过给表单元素添加onsubmit事件来触发相应的函数。

<form action="submit.php" method="post" onsubmit="showElement(event)">
  <!-- 表单内容 -->
</form>

<script>
  function showElement(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var name = document.getElementsByName("name")[0].value;
    var message = document.getElementsByName("message")[0].value;

    // 创建新的元素并显示表单数据
    var element = document.createElement("div");
    element.innerHTML = "姓名：" + name + "<br>留言：" + message;
    document.body.appendChild(element);
  }
</script>

在上述代码中，showElement函数会在表单提交时被调用。首先，通过event.preventDefault()阻止表单的默认提交行为。然后，使用document.getElementsByName方法获取表单中输入框和文本域的值，并将其显示在一个新创建的<div>元素中，最后将该元素添加到页面的<body>中。

这样，当用户点击表单的提交按钮时，表单数据将被获取并以指定的格式显示在页面中。

推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款全托管的云原生应用开发平台，提供了前端开发、后端开发、数据库、存储等一体化的解决方案，可帮助开发者快速构建和部署应用。了解更多信息，请访问腾讯云云开发官网：https://cloud.tencent.com/product/tcb。

相关·内容

JavaScript 事件加载有哪些应用场景？

JavaScript是一种常用的脚本语言，具有丰富的事件处理机制。通过在页面加载过程中绑定和触发各种事件，可以实现丰富的交互功能和用户体验改善。本文将介绍JavaScript事件加载的概念和应用场景，并提供一些实例演示，帮助读者深入理解和应用事件加载。

IT课程 HTML基础 015_HTML5新特性

~~ 图像超链接 targrt="_blank""_self" <href=""> ~~ 属性介绍标签属性 <id ="two"> 属性介绍注释标签字符空格符 < < > > & & ￥ ¥ © © ® ® ° ° -+ ± * × 表格标签展示/显示数据定义表格的标签定义表格行 html表头部分定义表格行定义单元格/内容加粗定义单元格/内容 </tobdy>
……
…… ……
left center right border 边框 1 "" 默认没有边框像素值 cellpadding 默认1像素 <-> cellspacing 默认2像素 >-< width 宽度 height 高度合并单元格 rowspan 跨行合并数量最上侧 colspan 跨列合并数量最左侧列表标签《布局》有序

无序

03