打印输入表单中的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
</head>

<body>
    <form>
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" placeholder="输入一个昵称">
        </p>
        <p>
            <label for="password">密码</label>
            <input type="password" id="password">
        </p>
        <p>
            <label for="passwordchecked">确认密码</label>
            <input type="password" id="passwordchecked">
        </p>
        <p>
            <label for="sex">性别</label>
            <select id="sex">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </p>
        <p>
            <label for="">爱好</label>
            <label>
                <input type="checkbox" name="dx" value="1">旅游</label>
            <label>
                <input type="checkbox" name="dx" value="2">睡觉</label>
            <label>
                <input type="checkbox" name="dx" value="3">上网</label>
                <label>
                <input type="checkbox" name="dx" value="4">看电影</label>
        </p>
        <p>
            <label for="">是否已婚</label>
            <label>
                <input type="radio" value="1" name="married">是</label>
            <label>
                <input type="radio" value="0" name="married">否</label>
        </p>
        <div class="center">
            <input type="hidden" value="注册表单">
            <input type="button" value="返回" />
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <div class="msg"></div>
</body>

</html>
<script src="../jquery-1.12.0.js"></script>
 <script type="text/javascript">
    $(function(){
        // @作业
        // 点击提交按钮时,把输入的内容按顺序放到.msg
        $(‘form‘).css(‘float‘, ‘left‘);
        $(‘.msg‘).css({float:‘right‘,width:400,height:400,background:‘#89abec‘,padding:20});
        $(‘:submit‘).click(function(e){console.log(111)
            e = e || window.event
             var username = $(‘#username‘).val()
             var nickname = $(‘#nickname‘).val()
             var password = $(‘#password‘).val()
             var sex = $(‘select option:selected‘).text()

             var arr1 = []
             $(‘input[type = "checkbox"]:checked‘).each(function(){
                arr1.push($(this).parent().text())
             })
             var radio = $(‘input[type="radio"]:checked‘).parent().text()

            $(‘.msg‘).html(‘用户名:‘ +username+ ‘<br>昵称:‘ +nickname+ ‘<br>密码:‘ +password+ ‘<br>性别:‘ +sex+ ‘<br>爱好:‘+ arr1+ ‘<br>是否已婚:‘ +radio)  

            e.preventDefault()

        })
    })
    </script>

用户名

昵称

密码

确认密码

性别

爱好 旅游 睡觉 上网 看电影

是否已婚 是 否

提交 重置

时间: 2024-10-17 18:10:47

打印输入表单中的内容的相关文章

监听表单中的内容变化

一.总结: 今天项目中要给表单控件添加搜索选择的效果,如下: 红框圈住的表单被点击之后,弹出如下框: 然后根据用户的搜索条件要显示查询结果供用户选择. 总结如何监听表单中的内容变化: 方法一: 1. 实现代码: 上面的代码实现出来的效果(类似百度搜索框)是,当用户在搜索框中输入查询条件,每当搜索框中的内容改变就会触发监听事件,并向服务器发送请求,搜索框下方相应的就显示查询到的结果.每次在将查询到的结果设置在界面之前都将前一次查询显示的数据从界面上remove掉,用这个方法来解决界面显示多条重复数

jquery获取form表单中的内容,并将表单内容更新到datagrid的一行

1 //执行不刷新页面更新所修改的行 2 var arr = $('#patient_form').serializeArray();//将表单中的数据格式化成数组 3 var m = new Array(); 4 //取数组中各个输入框对象的值,放在数组m中 5 $.each(arr, function(i,val){ 6 m[val.name] = val.value; 7 }); 8 //更新行 9 $('#dgRequest').datagrid('updateRow',{ 10 ind

使用JavaScript使表单中的内容显现在屏幕上

一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getElementById("a").innerHTML+=txt; } </script&

form表单中method的get和post区别

一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get">     <input type="hidden" name="param1" value="param1">     <input type="hidden" name="param2&quo

表单中输入内容,搜索时,下面table中该列中包含关键字的高亮显示

有时候为了在搜索时清楚直观,需要关键字的高亮显示, 效果如下: 思想:在下面table中,本来应该是直接渲染数据,此时,可以先写一个方法,里面包含两个参数,分别是该显示的内容以及进行搜索时输入的关键字,在该方法中,进行判断,若是该列内容中包含关键字,则将关键字颜色改变,然后替换掉:若是没有,则还是原样显示. 表单中: table表格中: 此时需要写关键字高亮显示的方法: 在该方法中,可以使用if判断来进行替换,也可以使用正则来写. 原文地址:https://www.cnblogs.com/520

jquery中clone()实现表单中增加和减少输入项

之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如: var copy_html=$(选择器).html(); alert(copy_html); 问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用: var copy_html=$(选择器).clone(); alert(copy_html); 得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法

JavaScript在表单页面添加打印功能,打印表单中的值并打印完成后不刷新页面

在一个项目中,有一个功能需求 在一个页面上,有一个表单,表单包括textbox, radiobutton, checkbox, textarea等控件 用户填写表单后,按下submit按钮提交表单 现在用户有个需求,他们希望在这个页面上增加一个print按钮或者链接 点击print时,可以打印 最简单的想法就是,加上一个print的链接,然后调用javascript中的window.print()能打印 我最初是这样写代码的 在网页上增加一个print的链接 <a href="javasc

struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($("#textValue").val() == "") {3                 $("#errortip").html("<font color='#FF0000'>请输入查询内容</font>")

表单中Readonly和Disabled的区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等. 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(