如何获取表单输入的数据并显示到页面

最新推荐文章于 2022-08-15 15:52:31 发布
最新推荐文章于 2022-08-15 15:52:31 发布
阅读量5.5k 收藏 17
点赞数 2
文章标签： html jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37858942/article/details/97811950
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入jquery -->
    <script type="text/javascript" src="./js/jquery.js"></script>
    <!-- <script type="text/javascript">
      function showMsg(){
          //根据id取得对应的值
          var a=document.getElementById("username").value;
          var b=document.getElementById("password").value;
          var c=document.getElementsByName("sex");
          //getElementsByName与getElementById的不同：
           //首先名字就不同 一个绑定的是ID 一个绑定的是Name
           //js中规定了id不能重复 但是name可以有多个
           //所以name的绑定器中多了个s 为getElementsByName
           //而多的这个s 使得返回的是一个数组
           //所以要对这个数组的值进行处理
          var sexValue;
          for(var i=0;i<c.length;i++){
              if(c[i].checked == true){//这个checked指的是是否被选中
                  sexValue=c[i].value;
                  break;
              }
          }
          document.getElementById("getusername").innerHTML=a;//innerHTML可以改变dom值 在遇到输入不正确时显示提示语非常有用
          document.getElementById("getpassword").innerHTML=b;
          document.getElementById("getsex").innerHTML=sexValue
      }
    </script> -->
</head>
<body>
    username:<input type="text" id="username"><br>
    password:<input type="password" id="password"><br>
    sex:<input type="radio" value="男" name="sex">男<input type="radio" value="女" name="sex">女<br>
    <input type="button" value="提交" id="btn">
    <table border="1">
        <tr>
            <td id="getusername"></td>
            <td id=getpassword></td>
        </tr>
        <tr>
            <td id="getsex" colspan="2"></td>
        </tr>
    </table>
</body>
<script>
   $(document).ready(function(){
        $("#btn").click(function(){
            var a =$("#username").val();
            var b=$("#password").val();
            // $("#getpassowrd").val('');
            // $("#getusername").empty();
            if(b==''){
                $("#getpassword").append(b);
            }
            else{
                $("#getpassword").empty()
                $("#getpassword").append(b);
            }
            if(a==''){
                $("#getusername").append(a);
            }
            else{
                $("#getusername").empty()
                $("#getusername").append(a);
            }
            var sexValue=$(":radio:checked").val();
            if(sexValue==''){
                $("#getsex").append(sexValue)
            }
            else{
                $("#getsex").empty();
                $("#getsex").append(sexValue)
            }
           
        })
    })
</script>
</html>

注释部分为js 在使用时需要添加如下内容：

 <input type="button" value="提交" id="btn" onclick="showMsg()">
qq_37858942
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取网页表单数据并显示
06-16
jsp网页+servlet
原生js获取form表单数据以及高亮美化JSON输出展示
jason_renyu的博客
12-15 2850
现在基本项目都以框架为主react和vue之类，这也就导致很多人对原生js的操作变得生疏，甚至有些工作几年的前端基础还是一知半解，问起框架来还能侃侃而谈，面对原生js就吞吞吐吐了。 优秀的框架总能吸引一大堆爱好者的追随，但是原生的魅力也需要我们来了解，框架固然好用但是基础知识也要跟上才行，同样是话不多说直接上代码： serialize.js // 获取制定form中的所有表单元素 const getFormElements = (formId) => { const form = document
jQuery练习：使用jQuery获取表单数据，使用弹窗显示。
m0_71819553的博客
08-15 1367
jQuery练习：使用jQuery获取表单数据，使用弹窗显示。
用script获取数据并显示在前端
qq_45481620的博客
04-06 797
1
表单的显示与隐藏
xiaoyu_alive的博客
02-10 7528
输入框输入数据，点击 显示按钮 显示表单信息，显示的信息和输入框输入的内容有关，不同的输入显示不同的表单信息。 点击隐藏按钮，可以隐藏表单信息。
django之从html页面表单获取输入的数据实例
09-17
总结一下，Django中从HTML页面获取用户输入数据的步骤包括： 1. 创建一个HTML表单，定义输入字段和POST请求的处理URL。 2. 配置URL路由，将表单提交的URL映射到相应的视图函数。 3. 在视图函数中，检查请求类型，...
php 表单数据的获取代码
10-30
因为表单的`method`被误写为GET，所以这段代码将工作，显示用户在表单中输入的所有信息。 第二段PHP代码与第一段类似，只是使用了`$_POST`数组： ```php echo "用户的输入如下所示：<BR>"; echo "姓名：".$_POST['...
使用json数据生成表单页面
08-10
在Web开发中，动态生成表单页面是一种常见的需求，特别是在数据驱动的...通过查看源码，你可以更深入地了解如何将JSON数据与动态生成的表单页面相结合，这将有助于提升你在JavaScript开发中处理表单输入控件的能力。
js表单提交后，如何获取表单中的数据并显示出来
热门推荐
shueiyuan1983的专栏
10-10 1万+
function show()     {         var sex=document.getElementById("sex").value;     } 性别'sex' name='sex'/> 'submit' value='submit' onclick='show()'/>
表格、表单提示显示-HTML-代码
05-24
一个web网页，用HTML写的，css样式、JavaScript也在里面，会动，有特效，学习前端的朋友可以试着下载来看看，有些地方是可以借鉴的，挺不错的
web页面获取表单数据
sinat_27053243的博客
12-10 1357
在表单处理页面通过reques请求对象的getParameter（String arg）方法来获取指定的表单 获取表单数据： String name = request.getParameter(" userName"); getParameter : 如果数据为中文的话就会产生乱码，解决方法如下： 一： 二：String str = request.getParameter (
获取from表单数据显示
weixin_44552170的博客
06-09 2995
在做项目是有一个功能要求，就是点击from表单的行数据，获取到单行数据后把数据显示出来，对于这种功能，最多的就是把数据查询出来，绑定数据显示在页面上 不过现在所做的做法也是有那么一点出入的，那就是另声明一个方法（PilotManagement）接收控制器所查询出的数据的链接 function PilotManagement() { tbPilotManagement = layuiTable...
获取表单数据的四种方式
P7295的博客
06-06 5155
第一种
html表单显示数据库数据,html中怎么获取表单的数据?
weixin_42565865的博客
06-04 2389
html中获取表单数据的的方法一般有两种，一个是使用form表单的action属性将表单的数据提交给后台，另外一种就是使用JavaScript方法获取表单的数据，然后通过ajax传送给后台。工具原料：编辑器、浏览器一、使用表单的方法提交数据1、利用form表单的action属性来获取表单的数据并提交，代码如下：12345form action=form_action.php method=getp...
layui 获取子页面表单数据
最新发布
09-03
### 回答1： 在 layui 中，可以通过使用 `form.val("formId")` 来获取子页面中表单的数据。其中 `formId` 是子页面中表单元素的 id。使用示例如下: ``` <form class="layui-form" id="formId"> <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> <input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </form> <script> // 获取表单数据 var formData = form.val("formId"); console.log(formData); // {username: "test", password: "123456"} </script> ``` 可以通过console.log打印出来查看表单的值 ### 回答2： 在 layui 中获取子页面表单数据，需要使用 layui 的表单模块进行操作。首先，在子页面的表单中，我们需要给表单元素设置一个唯一的 id，方便后续通过 id 来获取表单数据。 然后，在父页面中，可以使用 layui 的 form 模块的 on 绑定事件的方式，来获取子页面表单数据。具体步骤如下： 1. 引入 layui 的 form 模块和 layer 模块。 2. 在子页面的表单元素中，给每个需要获取数据的表单元素设置一个 id，例如： <input type="text" id="name" name="name"> 3. 在父页面的 js 中，使用 layui 的 form 模块的 on 绑定事件的方式，来获取子页面表单数据，例如： layui.form.on('submit(submitBtn)', function(data){ var name = data.field.name; // 其它表单元素的获取方式类似 }); 这里的 'submitBtn' 是一个按钮的 id，通过该按钮来触发提交事件。 4. 在子页面的表单提交按钮上，添加一个 lay-filter 属性，属性值为 'submitBtn'，例如： <button class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button> 通过以上步骤，我们就可以在父页面中通过 form 模块的 on 绑定事件的方式，获取子页面表单数据了。 ### 回答3： 在layui中获取子页面表单数据有多种方法： 1. 使用layui的form模块，通过form.on('submit(formDemo)', function(data){})事件获取表单数据。首先，在子页面中引入layui的form模块，然后在表单元素上增加lay-filter属性，设定一个唯一的值，比如lay-filter="formDemo"。接着，在父页面中监听子页面的表单提交事件，代码如下： 子页面： ```html <form class="layui-form" lay-filter="formDemo"> <!-- 表单内容 --> </form> ``` 父页面： ```javascript layui.use(['form'], function(){ var form = layui.form; form.on('submit(formDemo)', function(data){ // 获取子页面表单数据 var formData = data.field; // 其他操作 return false; // 阻止表单跳转 }); }); ``` 2. 使用layui的iframe模块，在子页面中通过top.layui.jquery获取父页面的jquery对象，然后通过表单选择器获取表单元素，使用jquery的serializeArray()方法获取表单数据。代码如下： 子页面： ```html <form id="myForm"> <!-- 表单内容 --> </form> <script> var $ = top.layui.jquery; // 获取父页面的jquery对象 // 表单提交事件 $('#myForm').on('submit', function(e){ e.preventDefault(); // 获取子页面表单数据 var formData = $(this).serializeArray(); // 其他操作 }); </script> ``` 需要注意的是，第二种方法需要在子页面中引入jquery库，并且确保父子页面的域名和协议相同，否则会因为跨域问题导致无法获取数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值