QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

新鱼友

Rank: 1

积分
7
查看: 122|回复: 3

怎样才能从表单里获取数据然后在同一页面的其他地方显示出来?

[复制链接]
最佳答案
0 
累计签到:21 天
连续签到:1 天
z5188008 发表于 2017-11-5 13:41:48 1223 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 z5188008 于 2017-11-5 13:41 编辑

QQ图片20171105130724.png


想从表单里获取数据,然后在弹出框里显示出来,但是不知道应该用什么元素,怎么声明,有没有大牛来指导一二?
楼层
跳转到指定楼层
最佳答案
96 
累计签到:479 天
连续签到:7 天
不二如是 发表于 2017-11-5 19:51:44 | 显示全部楼层
最简单的就是jquery

找到表单中的目标元素,最简单利用
  1. $('#表单id td').click(function (){
  2.             var content = $(this).text();
  3.             alert(content);
  4.         })
复制代码
最佳答案
0 
累计签到:21 天
连续签到:1 天
z5188008  楼主| 发表于 2017-11-5 20:03:14 | 显示全部楼层
不二如是 发表于 2017-11-5 19:51
最简单的就是jquery

找到表单中的目标元素,最简单利用

还是不太会。
  1. <div align="center">

  2. <p style="font-family: 微软雅黑"><p>乘车站:

  3. <select data-placeholder="&nbsp;"style="width: 120px;" tabindex="1" id="qidian">
  4.     <option value="高铁学院男寝">高铁学院男寝</option>
  5.     <option value="高铁学院女寝">高铁学院女寝</option>
  6.     <option value="高铁学院图书馆">高铁学院图书馆</option>
  7. </select>

  8. 目的站:

  9.     <select data-placeholder="&nbsp;"style="width: 120px;" tabindex="2" id="zhongdian">
  10.         <option value="高铁学院女寝">高铁学院女寝</option>
  11.         <option value="高铁学院男寝">高铁学院男寝</option>
  12.         <option value="高铁学院图书馆">高铁学院图书馆</option>
  13.     </select>
  14. <input type="text" placeholder="车票数量" id="shuliang" style="width:70px;"onkeyup=" value=value.replace(/[^1234567890-]+/g,'')"> 张
  15.     请选择乘车日期:<input type="date" id="shijian" value="时间">

  16. </p></p>
  17.     <div class="checkbox"><br>
  18.         <label for="checkbox" class="text" id="baoxian"><strong>是否需要购买保险</strong></label>
  19.     <input type="checkbox" id="checkbox" value="1"  />
  20.     <label class="box" for="checkbox"></label>
  21. </div>
  22.     <script>
  23.         <script src="/demos/googlegg.js"> </script>
  24.     <!--点击按钮-->
  25.     <center><br>
  26.         <a href="javascript:void(0)" id="btn" class="click_pop"><input type="button" value="购票" href="付款.html" style="width: 50px"></a>
  27.     </center>

  28.     <!--遮罩层-->
  29.     <div class="bgPop"></div>
  30.     <!--弹出框-->
  31.     <div class="pop">
  32.         <div class="pop-top">
  33.             <h2>确认订单</h2>
  34.             <span class="pop-close">X</span>
  35.         </div>
  36.         <div class="pop-content">
  37.             <div class="pop-content-left">
  38.                 <img src="" alt="" class="teathumb">
  39.             </div>
  40.             <div class="pop-content-right">
  41.                 <p>乘车站:</p>
  42.                 <p>目的站:</p>
  43.                 <p>购票张数:</p>
  44.                 <p>乘车日期:</p>
  45.                 <p>是否需要保险:</p>
  46.                 <p>支付金额:</p>
  47.             </div>
  48.             <!--在此处添加JS-->
  49.         </div>
  50.         <div class="pop-foot">
  51.             <input type="button" value="关闭" class="pop-cancel pop-close">
  52.             <a href="付款.html"><input type="button" value="确认" class="pop-ok"></a>
  53.         </div>
  54.     </div>
  55.     <script>
  56.         $(document).ready(function () {
  57.             $('.pop-close').click(function () {
  58.                 $('.bgPop,.pop').hide();
  59.             });
  60.             $('.click_pop').click(function () {
  61.                 $('.bgPop,.pop').show();
  62.             });
  63.         })

  64.     </script>

  65. </div>
复制代码
最佳答案
1 
累计签到:10 天
连续签到:3 天
ddd-115 发表于 2017-11-12 14:00:16 | 显示全部楼层
1.在点击事件中获取表单中的数值;
2.将数值分别放入弹出框中的<p>标签中;
代码如下:
      <div class="pop-content-right">
                <p>乘车站:<span></span></p>
                <p>目的站:<span></span></p>
                <p>购票张数:<span></span></p>
      </div>
<script>
        $(function() {
            $('.bgPop,.pop').hide();
            $('#click_pop').click(function() {
                var qidian = $('#qidian').val();
                var zhongdian = $('#zhongdian').val();
                var shuliang = $('#shuliang').val();
                $('.pop-content-right > p:eq(0) > span').html(qidian);
                $('.pop-content-right > p:eq(1) > span').html(zhongdian);
                $('.pop-content-right > p:eq(2) > span').html(shuliang);
                $('.bgPop,.pop').show();
            })
        })
</script>
大概思路就是这样,不知道是不是你想要的效果

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2017-11-25 19:02

快速回复 返回顶部 返回列表