精华内容
下载资源
问答
  • html肿么获取html表单数据
    2021-06-12 01:30:52

    html中获取表单数据的的方法一般有两种,一个是使用form表单的action属性将表单的数据提交给后台,另外一种就是使用JavaScript方法获取表单的数据,然后通过ajax传送给后台。

    工具原料:编辑器、浏览器

    一、使用表单的方法提交数据

    1、利用form表单的action属性来获取表单的数据并提交,代码如下:

    1

    2

    3

    4

    5

    form action=form_action.php method=get

    pFirst name: input type=text name=fname //p

    pLast name: input type=text name=lname //p

    input type=submit value=Submit /

    /form

    2、以上代码中method指定提交数据的方法为get,action的值是表单数据提交的地址。

    二、使用JavaScript方法来获取表单的数据的方法

    1、可以使用JavaScript的选择器选择表单的元素并获取其输入的数据,代码如下:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    form action=form_action.php method=get

    pFirst name: input id=bt1 type=text name=fname //p

    pLast name: input id=bt2 type=text name=lname //p

    input type=submit value=Submit /

    /form

    script

    console.log($('#bt1').val())

    console.log($('#bt2').val());

    /script

    2、其中$('#bt1').val()就是获取input输入内容的值

    取消

    评论

    更多相关内容
  • 1.有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦。代码冗余度也比较多,因此封装了一个方法。 2. 表单元素必须要有name属性,name属性是向后端提交的字段数据。 3.html代码 下拉框 <...
  • Html 原生获取表单提交数据 // 提示框 淡入淡出 <style type="text/css"> .message { display: none; padding: 20px; position: fixed; top: 40%; left: 40%; border-radius: 5px; background: ...

     Html 原生获取表单提交数据

    // 提示框 淡入淡出
    
    <style type="text/css">
        .message {
            display: none;
            padding: 20px;
            position: fixed;
            top: 40%;
            left: 40%;
            border-radius: 5px;
            background: rgba(0, 0, 0, 0.5);
            z-index: 5000;
            color: #FFF;
        }
    </style>

     

    Html 表单 

    <-----------提示框--------->
    <span id="message" class="message"></span>
    
    
    
    <form onsubmit="return false">
                        <div class="info-list clearfix">
                            <div class="info-left">姓名</div>
                            <div class="info-right">
                                <input type="text" placeholder="请填写您的姓名,例如:李先生" name="name" required/>
                                <span>(此项非必填)</span>
                            </div>
                        </div>
                        <div class="info-list clearfix">
                            <div class="info-left">称谓</div>
                            <div class="select info-right">
                                <div class=" fl">
                                    <input type="radio" value="1" name="sex" checked="checked"/><span
                                        class="radiospan">先生</span>&nbsp;&nbsp;
                                </div>
                                <div class=" fl">
                                    <input type="radio" value="2" name="sex"/><span class="radiospan">女士</span>
                                </div>
                            </div>
                        </div>
                        
                        <div data-toggle="distpicker">
                            <div class="info-list clearfix">
                                <div class="info-left">所在省份</div>
                                <div class="info-right rightselect">
                                    <select id="province1" name="province">
                                       
                                    </select>
                                    <span class="iconfont icon-down-fill-xs"></span>
                                </div>
                            </div>
                            <div class="info-list clearfix">
                                <div class="info-left">所在城市</div>
                                <label for="city">
                                    <div class="info-right rightselect" id="city">
                                        <select id="city1" name="city">
                                           
                                        </select>
                                        <span class="iconfont icon-down-fill-xs"></span>
                                    </div>
                                </label>
                            </div>
                        </div>
    
                        <div class="info-list clearfix">
                            <div class="info-left">计划购车时间</div>
                            <label for="but_time">
                                <div class="info-right rightselect">
                                    <select id="but_time" name="plan_time">
                                        <option value="">请选择计划购车时间</option>
                                        {volist name="plan_time" id = "item"}
                                        <option value="{$item.value}">{$item.label}</option>
                                        {/volist}
                                    </select>
                                    <span class="iconfont icon-down-fill-xs"></span>
                                </div>
                            </label>
                        </div>
                        <div class="info-list clearfix">
                            <div class="info-left">希望得到反馈时间</div>
                            <div class="select info-right">
                                <div class=" fl">
                                    <input type="radio" value="1" name="type" checked="checked"/><span
                                        class="radiospan">全天</span>&nbsp;&nbsp;
                                </div>
                                <div class=" fl">
                                    <input type="radio" value="2" name="type"/><span class="radiospan">工作日</span>&nbsp;&nbsp;
                                </div>
                                <div class=" fl">
                                    <input type="radio" value="3" name="type" checked="checked"/><span
                                        class="radiospan">双休</span>
                                </div>
                            </div>
                        </div>
    
                        <input type="button" value="提交" class="submitInfor" name="submit" onclick="mySubmit(this)"/>
                    </form>

    js 获取表单提交数据

    // 表单提交
        function mySubmit() {
    
            var flg = true;
            let formData = new FormData(form);
            var regExpP = /^1[34578]\d{9}$/; //手机号
    
            let name = formData.get('name');
            let sex = formData.get('sex');
            let phone = formData.get('phone');
            let province = formData.get('province');
            let city = formData.get('city');
            let plan_time = formData.get('plan_time');
            let type = formData.get('type');
    
            if (phone == "" || !regExpP.test(phone)) {
                message("请填写正确的手机号码")
                flg = false
            }
    
    
            if (selectId == "") {
                message("您还没有选择车系!!!")
                flg = false
            }
    
            if (plan_time == "") {
                message("您还没有预购时间!!!")
                flg = false
            }
            obj = {
                'name': name,
                'sex': sex,
                'phone': phone,
                'province': province,
                'city': city,
                'plan_time': plan_time,
                'type': type,
                'cid': selectId
            };
    
            let url = "appoint_create"
    
            if (flg) {
                axios({
                    url: url,
                    method: 'post',
                    data: obj
                }).then(res => {
    
                    if (res.data.code == 1){
                        message("感谢您的关注,敬请期待!!")
                    }else {
                        message("数据异常,稍后重试!")
                    }
                })
            }
    
            return false;
        }
    
        function message(message = "验证失败!请刷新") {
            $('#message').html(message).show().delay(1000).fadeOut();
        }

     

    展开全文
  • FileTemp前台:HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器)无标题页>填写用户信息用户名:密码:确认密码:性别:女name="sex" /...

    FileTemp前台:

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器)

    无标题页

    >

    填写用户信息


    用户名:

    密码:

    确认密码:

    性别:女

    name="sex" />男

    上传照片:

    后台:

    namespace benz_CSI.json.ajax

    {

    public partial class WinLog : System.Web.UI.Page

    {

    protected void Page_Load(object sender, EventArgs e)

    {

    Response.Write("利用 Response对象获取客户端数据");

    Response.Write("


    ");

    string[] names = Request.Form.AllKeys;//定义name保存表单中的所有键即元素名称

    for (int i = 0; i < names.Length; i++)

    {

    string[] values = Request.Form.GetValues(i);//定义values保存表单中所有键的键值

    for (int j = 0; j < values.Length; j++)

    Response.Write(names[i] + "=" + values[j] + "
    ");

    }

    Response.Write("


    ");

    Response.Write(Request.Form["picture"]);

    SaveFile(Request.Form["picture"]);

    }

    public bool SaveFile(string filePath)

    {

    if (Request.Files.Count >= 1)

    {

    HttpPostedFile postedFile = Request.Files[0];

    string fileName, fileExtension;

    fileName = System.IO.Path.GetFileName(postedFile.FileName); //文件名称

    if (fileName != "")

    {

    fileExtension = System.IO.Path.GetExtension(fileName); //上传文件的扩展名

    string new_filename = DateTime.Now.ToString("yyyyMMddHHmmss") + fileExtension; //给文件重新命名

    string FileTemp = Page.MapPath("/json/ajax/upload/");

    postedFile.SaveAs(FileTemp + new_filename);

    Response.Write("文件 类 型:" + postedFile.ContentType.ToString() + "
    ");

    Response.Write("文件新名称:" + new_filename + "
    ");

    Response.Write("文件原名称:" + fileName + "
    ");

    Response.Write("文件扩展名:" + fileExtension + "
    ");

    Response.Write("文件原路径:" + postedFile.FileName + "
    ");

    Response.Write("文件新路径:" + FileTemp + new_filename + "
    ");

    }

    else

    {

    Response.Write("false");

    }

    }

    }

    展开全文
  • 使用ajax实现表单提交无刷新页面在项目中经常会用到。前一段时间跟着师傅学到了另外几种无刷新提交表单的方法,主要是基于iframe框架实现的。现在小编整理特此分享脚本之家平台供大家参考
  • html中如何获取表单数据

    万次阅读 2020-05-27 22:03:07
    使用表单中的id属性获取表单中的数据表单的input标签中指定id属性值,在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值,例如:register_form.username.value 表单代码: <form name = ...

    1. 使用表单中的id属性获取表单中的数据

    在表单的input标签中指定id属性值,在script脚本中可以通过 “表格的名称.id名称.value”来访问表单中的值,例如:register_form.username.value
    表单代码:
    <form name = "register_form" action="" method="post">
    
            昵称:<input type="text" name="username" maxlength="20" id="username"><br>
            真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
            性别: <input name ="sex" type ="radio"   value = "男" checked>
                    男&nbsp;
                  <input name ="sex" type ="radio"   value = "女" checked>
                    女<br>
            密码:<input type="password" name="password1" maxlength="20"size="20"id="password1"><br>
            确认密码:<input type="password" name="password2" maxlength="20"size="20"id="password2"><br>
            请选择感兴趣的方向:<br/>
            <input type="checkbox" name="interest" value="体育">体育
            <input type="checkbox" name="interest" value="旅游">旅游
            <input type="checkbox" name="interest" value="听音乐">听音乐
            <input type="checkbox" name="interest" value="看书">看书<br>
            E—mail:<input name="email" type="text" id="PWD224" size="50"id="email"><br>
    
            <input name = "Submit" type = "button"   value = "保存" onclick = check()>
            <input name = "Reset" type = "reset" value = "重新填写">
    </form>
    
    在script脚本中,通过id访问表单中的值,利用函数判断其值是否为空,如果为空,则输出“请输入该信息字样”。
    script脚本代码:
    <script type="text/javascript">
        function check(){ 
    	    if( register_form.username.value==""){
    	        alert("请输入用户名!"); register_form.username.focus(); return;
    	    }else if(register_form.realname.value=="") {
    	        alert("请输入真实姓名!");register_form.realname.focus();return;
    	    }else if(register_form.password1.value==""){
    	        alert("请输入密码!"); register_form.password1.focus();return;
    	    }else if(register_form.password2.value==""){
    	        alert("请输入确认密码!");register_form.password2.focus(); return;
    	    }else if(register_form.email.value==""){
    	        alert("请输入邮箱!"); register_form.email.focus();return;
    	    }else{
    	        document.register_form.submit();
    	    }
    	}
    
    运行结果:

    在这里插入图片描述

    完整的代码:
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>注册新用户</title>
        <script type="text/javascript">
        function check(){ 
    	    if( register_form.username.value==""){
    	        alert("请输入用户名!"); register_form.username.focus(); return;
    	    }else if(register_form.realname.value=="") {
    	        alert("请输入真实姓名!");register_form.realname.focus();return;
    	    }else if(register_form.password1.value==""){
    	        alert("请输入密码!"); register_form.password1.focus();return;
    	    }else if(register_form.password2.value==""){
    	        alert("请输入确认密码!");register_form.password2.focus(); return;
    	    }else if(register_form.email.value==""){
    	        alert("请输入邮箱!"); register_form.email.focus();return;
    	    }else{
    	        document.register_form.submit();
    	    }
    	}
        </script>
    </head>
    <body>
    <h2>注册新用户</h2>
    <form name = "register_form" action="" method="post">
    
            昵称:<input type="text" name="username" maxlength="20" id="username"><br>
            真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
            性别: <input name ="sex" type ="radio"   value = "男" checked>&nbsp;
                  <input name ="sex" type ="radio"   value = "女" checked><br>
            密码:<input type="password" name="password1" maxlength="20"size="20"id="password1"><br>
            确认密码:<input type="password" name="password2" maxlength="20"size="20"id="password2"><br>
            请选择感兴趣的方向:<br/>
            <input type="checkbox" name="interest" value="体育">体育
            <input type="checkbox" name="interest" value="旅游">旅游
            <input type="checkbox" name="interest" value="听音乐">听音乐
            <input type="checkbox" name="interest" value="看书">看书<br>
            E—mail:<input name="email" type="text" id="PWD224" size="50"id="email"><br>
    
            <input name = "Submit" type = "button"   value = "保存" onclick = check()>
            <input name = "Reset" type = "reset" value = "重新填写">
    </form>
    </body>
    </html>
    

    2. getElementsByName()方法

    因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
    例如,下面的代码可以获得form中第一个name为“inputText”的元素:
     var myParagragh = document.getElementsByName("inputText")[0].value; 
    
    完整代码:
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>注册新用户</title>
        <script type="text/javascript" >
    		function check(){ 
    	    if( document.getElementsByName("username")[0].value==""){
    	        alert("请输入用户名!"); return;
    	    }else if(document.getElementsByName("realname")[0].value=="") {
    	        alert("请输入真实姓名!"); return;
    	    }else if(document.getElementsByName("password1")[0].value==""){
    	        alert("请输入密码!"); return;
    	    }else if(document.getElementsByName("password2")[0].value==""){
    	        alert("请输入确认密码!"); return;
    	    }else if(document.getElementsByName("email")[0].value==""){
    	        alert("请输入邮箱!"); return;
    	    }else{
    	        document.register_form.submit();
    	    }
    	}
    	</script>
    </head>
    <body>
    <h2>注册新用户</h2>
    <form name = "register_form" action="" method="post">
    
            昵称:<input type="text" name="username" maxlength="20"><br>
            真实姓名:<input type="text" name="realname" maxlength="20" id="realname"><br>
            性别: <input name ="sex" type ="radio"   value = "男" checked>&nbsp;
                  <input name ="sex" type ="radio"   value = "女" checked><br>
            密码:<input type="password" name="password1" maxlength="20"size="20"><br>
            确认密码:<input type="password" name="password2" maxlength="20"size="20"><br>
            请选择感兴趣的方向:<br/>
            <input type="checkbox" name="interest" value="体育">体育
            <input type="checkbox" name="interest" value="旅游">旅游
            <input type="checkbox" name="interest" value="听音乐">听音乐
            <input type="checkbox" name="interest" value="看书">看书<br>
            E—mail:<input name="email" type="text" id="PWD224" size="50"><br>
    
            <input name = "Submit" type = "button"   value = "保存" onclick = check()>
            <input name = "Reset" type = "reset" value = "重新填写">
    </form>
    </body>
    </html>
    
    运行截图:

    在这里插入图片描述

    展开全文
  • form表单提交数据

    2021-06-12 04:43:40
    form表单提交的几种方法HTML表单提交的几种方式方式一:通过submit按钮提交方式二:通过一般按钮button提交1/3javascript">functionsubmit1(){varform1=document.getElementById("form1");form1.action=...
  • HTMLFORM表单提交数据获得返回值

    千次阅读 2019-05-09 12:27:33
    今天遇到的需求是html中form表单数据想要取回返回值,百度了很多都是采用隐藏的iframe去获取到返回的值,但是使用常规方式获取不到, 我觉得是eval()方法不稳定的原因,然后替换为 iFrame.load(loadFunc()); ...
  • 这样就可以像原来一样,例如,提交表单中包括一个名为"username"的变量,那么在php中就可以直接使用$username来访问该变量。但是,除非你要使用一段旧的代码而考虑到兼容性问题,否则不建议使用该方法。2. 使用 $...
  • 主要介绍了html form表单input使用disabled后提交不能获取表单值的解决方法,需要的朋友可以参考下
  • 摘要: js封装from表单数据为json串进行ajax提交 json封装代码 function getFormJson(frm) { //frm:form表单的id var o = {}; var a = $("#"+frm).serializeArray(); $.each(a, function() { if (o[this.name]...
  • php接受通过HTML表单提交的信息时,会将提交的数据保存在全局数组中,我们可以调用系统特定的自动全局变量数组来获取这些值。 常用的自动全局变量如下所示: 1、GET方式 功能:获取get方式提交的数据 格式:$_GET...
  • html页面不想用form表单提交,但是表单数据是遍历出来的,所以可以用这个方法获取遍历的form表单点击要提交的的数据,废话不多说直接上代码 代码部分 //这是我用PHP写的 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
  • form表单提交数据给后台

    千次阅读 2021-07-01 03:36:47
    form表单往后端提交数据注意三点1.所有获取用户输入标签都应该放在form表单里面2.action属性控制往哪儿提交,method一般都是设置成post3.提交按钮必须一定是type='submit'4.input标签必须有name属性,形成键值对2. ...
  • 首先我们得要有一个表单提交页面: index.html 这个页面由两个部分组成 1、表单控件 2、jQuery+ajax处理脚本 jQuery脚本会获取form表单的数据,通过post的方式提交给api.php <!DOCTYPE HTML PUBLIC "-//W
  • 上一章节我们讲述了如何用 PHP 超级变量 $_GET 获取 HTML 表单 (Form) 的数据。这一章节我们讲述如何用 PHP 超级变量 $_POST 获取 HTML Form的数据
  • 本文实例讲述了Python实现模拟登录及表单提交的方法。分享给大家供大家参考。具体实现方法如下: # -*- coding: utf-8 -*- import re import urllib import urllib2 import cookielib #获取CSDN博客标题和正文 url ...
  • 问题描述一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包。想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦。解决方法方法一:...
  • 最近写项目遇到的情况,搜索查看以后总结了一下关于form表单提交数据获取的方式。 form表单提交方式: 1.type=submit提交 input type="submit",浏览器显示为button按钮,点击提交表单数据跳转到/url.do &...
  • html获取表单数据的的方法一般有两种,一个...工具原料:编辑器、浏览器一、使用表单的方法提交数据1、利用form表单的action属性来获取表单的数据并提交,代码如下:12345form action=form_action.php method=getp...
  • 接收来自form表单提交数据; 并在网页上显示出来
  • Layui 获取表单提交数据

    千次阅读 2019-07-14 15:33:00
    HTML<div class="layui-card-header layuiadmin-card-header-auto"> <form class="layui-form"> <div class="layui-form-item"> <div...
  • HTML+JS读取表单数据

    千次阅读 2020-02-16 20:23:12
    表单提交时,通常需要对表单实行数据有效性验证,验证数据的前提是读取表单元素的数据。如下图1所示的表单,在点击“提交”按钮时要读取登录名、密码、确认密码、性别、年龄等数据。然后用在网页上用警示框提示出...
  • 从页面提交表单数据的方法之(一)先说下开发中我使用的主要web利器:BootstrapAdminLTEJqueryvue.jsunderscore.js简介利用表单给服务器提交数据是网站最常见的操作之一,主要用到的http请求也就是Get和Post两种方法。...
  • 表单提交数据也就是请求数据,分为Get和Post两种方式提交。Controller中有三种方式获取表单数据:Controller的方法,添加HttpServletRequst类型入参,通过HttpServletRequst.getParameter()获取请求数据Controller...
  • php系列之获取表单提交数据

    千次阅读 2019-06-17 20:51:57
    通常表单的提交是通过POST方式,表单提交数据分为两种,一种是普通的文本数据,一种是上传的文件.在php中,普通的表单数据通过$_POST可以获取到;文件则通过$_FILES获取.看一下下面的案例: <?php function ...
  • 在日常工作中或浏览网页时,我们经常使用和看到很多表单提交的功能与样式。而这个功能是用form表单和一些JavaScript或jQuery来实现的。 现在我们就用Visual Studio 2015 来对其来进行验证,form表单实现数据获取的...
  • 因此,我创建了一个小flask程序,它将获取一个文件,进行一些处理并使用yield返回一个数据流。在我使用html表单上传和提交文件。表单将文件发送到python脚本并返回输出。问题是,由于form action属性,输出显示在...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 187,902
精华内容 75,160
关键字:

html获取表单提交数据