精华内容
下载资源
问答
  • 问:如何用 JS 一次获取 HTML 表单的所有字段 ?考虑一个简单 HTML 表单,用于将任务保存在待办事项列表中:<form> <label for="name">用户名</label> <input type="text" id="name" name=...

    问:如何用 JS 一次获取 HTML 表单的所有字段 ?

    考虑一个简单的 HTML 表单,用于将任务保存在待办事项列表中:

    <form>
        <label for="name">用户名</label>
        <input type="text" id="name" name="name" required>
    
        <label for="description">简介</label>
        <input type="text" id="description" name="description" required>
    
        <label for="task">任务</label>
        <textarea id="task" name="task" required></textarea>
    
        <button type="submit">提交</button>
      </form>

    上面每个字段都有对应的的typeIDname属性,以及相关联的label。 用户单击“提交”按钮后,我们如何从此表单中获取所有数据?

    有两种方法:一种是用黑科技,另一种是更清洁,也是最常用的方法。为了演示这种方法,我们先创建form.js,并引入文件中。

    从事件 target 获取表单字段

    首先,我们在表单上为Submit事件注册一个事件侦听器,以停止默认行为(它们将数据发送到后端)。

    然后,使用this.elementsevent.target.elements访问表单字段:

    相反,如果需要响应某些用户交互而动态添加更多字段,那么我们需要使用FormData

    使用 FormData

    首先,我们在表单上为submit事件注册一个事件侦听器,以停止默认行为。接着,我们从表单构建一个FormData对象:

    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      const formData = new FormData(this);
    });

    除了append()delete()get()set()之外,FormData 还实现了Symbol.iterator。这意味着它可以用for...of 遍历:

    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      const formData = new FormData(this);
    
      for (const formElement of formData) {
        console.log(formElement);
      }
    })

    060d7fbc2fd7f541ba5457afec6531a2.png

    3060b97a29142f17995686cf6a679fe2.png

    除了上述方法之外,entries()方法获取表单对象形式:

    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      const formData = new FormData(this);
      const entries = formData.entries();
      const data = Object.fromEntries(entries);
    });

    这也适合Object.fromEntries() (ECMAScript 2019)

    为什么这有用?如下所示:

    const form = document.forms[0];
    
    form.addEventListener("submit", function(event) {
      event.preventDefault();
      const formData = new FormData(this);
      const entries = formData.entries();
      const data = Object.fromEntries(entries);
    
      // send out to a REST API
      fetch("https://some.endpoint.dev", {
        method: "POST",
        body: JSON.stringify(data),
        headers: {
          "Content-Type": "application/json"
        }
      })
        .then(/**/)
        .catch(/**/);
    });

    一旦有了对象,就可以使用fetch发送有效负载。

    小心:如果在表单字段上省略name属性,那么在FormData对象中刚没有生成。

    总结

    要从HTML表单中获取所有字段,可以使用:

    • this.elementsevent.target.elements,只有在预先知道所有字段并且它们保持稳定的情况下,才能使用。

    使用FormData构建具有所有字段的对象,之后可以转换,更新或将其发送到远程API。

    自学前端需要几个月 还有需要学到什么程度?www.zhihu.com
    0ebcc9028bb36e642335b3ac6804e89c.png
    作者:前端小智
    链接:https://segmentfault.com/a/1190000024510448
    来源:segmentfault
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处
    展开全文
  • 前言近期项目中遇到 v-for 动态控制 input... 废话不多说,先上图主要思路在input 上使用 v-model绑定到数据源其中一个字段若后台没有该字段则自己动态添加一个并组装页面如下Document#app {width: 100%;margin-...

    前言

    近期项目中遇到 v-for 动态控制 input输入框显示的功能,但只有一个input框,使用v-model 绑定一个值会导致输入框内的所有值同步更改,那如何获取每个input框内的值呢 ? 废话不多说,先上图

    主要思路

    在input 上使用 v-model绑定到数据源的其中一个字段

    若后台没有该字段则自己动态添加一个并组装

    页面如下

    Document

    #app {

    width: 100%;

    margin-left: 500px;

    margin-top: 100px;

    }

    .inputArea {

    display: block;

    margin: 6px 0;

    height: 30px;

    line-height: 30px;

    }

    .postData {

    margin-top: 20px;

    width: 150px;

    height: 30px;

    line-height: 30px;

    text-align: center;

    border: 1px solid #ccc;

    text-align: center;

    cursor: pointer;

    }

    .res {

    margin-top: 10px;

    }

    获取输入值
    {{resData}}

    new Vue({

    el: '#app',

    data: function() {

    return {

    dataList:[

    {id:"1",model:""},

    {id:"2",model:""},

    {id:"3",model:""},

    {id:"4",model:""},

    {id:"5",model:""},

    ],

    resData:[],

    isShowResData:false,

    }

    },

    methods:{

    getInputListValue: function () {

    for (let i = 0; i < this.dataList.length;i++) {

    let res = this.dataList[i].model;

    this.resData.push(res);

    this.isShowResData = true;

    }

    }

    }

    })

    写到最后

    学无止境,希望本文可以帮到您,与君共勉,感谢。

    展开全文
  • jquery批量获取form表单要提交的值

    千次阅读 2018-07-17 15:01:18
    定义一个json数组,把所有的from表单的input的id和我们后台的数据库字段一致,如下代码 html部分  &lt;div class="form-group" style="margin-top: 0px"&gt;  &lt;label for=&...

    两种方法:

    第一种、

    定义一个json数组,把所有的from表单的input的id和我们后台的数据库字段一致,如下代码

    html部分

     <div class="form-group" style="margin-top: 0px">
                                <label for="inputEmail41" class="col-sm-2 control-label">上牌时间</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputEmail41" placeholder="上牌时间">
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 70px">
                                <label for="inputEmail51" class="col-sm-2 control-label">厂商名称</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="inputEmail51" placeholder="厂商名称">
                                </div>
                            </div>
                            <div class="form-group" style="margin-top: 120px">
                                <label for="inputEmail61" class="col-sm-2 control-label">货箱尺寸</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="inputEmail61" placeholder="货箱尺寸">
                                </div>
                            </div>

    js代码

     var data = {
                            owner_id:'',        
                            car_model:'',
                            hanging_date:'',
                            date_of_payment:'',
                            car_purchase_time:'',
                            profits_from_sales:'',
                            brand_model:'',
                            car_color:'',
                            engine_model:'',
                            purchase_tax:'',
                            operation_type:'',
                            driving_date:'',
                            licence_date:'',
                            file_number:'',
                            vehicle_type:'',
                            partner:'',
                            last_time:'',
                            car_purchase_price:'',
                            upper_fee:'',
                            frame_number:'',
                            engine_number:'',
                            purchase_no:'',
                            tonnage:'',
                            operating_number:'',
                            expiry_date:'',
                            certificate_issue_date:'',
                            maturity_date:'',
                            plate_number:'',
                            plate_top:'',
                            engine_number:'',
                            purchase_number:'',

                         }
                         for(var key in data){
                            data[key] = $('#'+key).val(); 
                        }

    这时候我们获取的data就是我们要的ajax的data了

     ajaxfun("/admin/cheliangdangan/save",'post',data,"/admin/cheliangdangan/index");

    第二种,

    将form表单里面所包裹的input的name改为字段名

    alert($("form").serialize());

    $("#generate").click(function(){ $.ajax({ url:"organization/generateAuthCode", //你的路由地址 type:"post", dataType:"json", data:$("form").serialize(),, timeout:30000, success:function(data){ $("#description").value(data); }, error:function(){ console.log(data); } }); });

    具体参考:有什么疑问请在下面留言

    https://blog.csdn.net/qyl_0316/article/details/81007546

    展开全文
  • 通过我们已经学过知识,你可以编写一个最简单程序输出一个也许是程序世界中最有名词语: echo "Hello World!"; ?> First PHP page // Single line C++ style comment /* printing the message */ ...
  • ThreadLocal 实例通常是类中 private static 字段,它们希望将状态与某一个线程(例如,用户 ID 或事务 ID)相关联。” 大概意思有两点: a. ThreadLocal提供了一种访问某个变量特殊方式:访问到变量属于...
  • 前几天,遇到一个字段比较多的用户填写的...作为一个天生喜欢偷懒的程序员总想着办法来偷懒,就想在aspx.cs中,找到所有的input循环遍历获取他们的。一开始直接使用下面代码 1 var controls=this.Page.Contr...

    前几天,遇到一个字段比较多的用户填写的页面(数据库表中就将近100个字段),怎么讲这些input的标签的值,保存数据库了?(使用的是母版页下面的aspx,不包括前段获取input的值,传给后台)

    作为一个天生喜欢偷懒的程序员总想着办法来偷懒,就想在aspx.cs中,找到所有的input循环遍历获取他们的值。一开始直接使用下面代码

    1 var controls=this.Page.Controls;//获取该页面的控件
    2 foreach(var ctr in controls){
    3 if(ctr is HtmlInputText){
    4 var input=(HtmlInputText)ctr;//获取到该input
    5 }
    6 }

    发现上面的controls只两个记录数,这是为啥啊?我页面上面将近一百个字段,为啥只有两个?

    百度各种方法,发现母版页下,使用this.Master.FindControl("Mainwork").Controls;//母版页下面功能区域的ID,然后下面的所有控件,就直接可以使用了

     

     

    之后我发现,代码就是让自己开发更简单的一种方式,偷懒的程序员反而会使自己更进步

    转载于:https://www.cnblogs.com/huage-1234/p/7467345.html

    展开全文
  • 例如有一个test的字段,只要维护他在输入规范:5-10位数字。那么我测试数据时可以任意生成,在数据符合规范时候,那么我期待就是true或者时继续执行下一个接口,如果不...
  • -为所有的表单字段增加AJAX属性ReadOnly(feedback:skydb)。 -Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件...
  • 4.1节正确设置一个文本对象的值 4.2节. 将TextInput绑定一个值 4.3节. 创建一个具有文字提示文本输入框 4.4节. 创建一个合适编辑器 4.5节. 确定用户电脑上安装的所有字体 4.6节. 创建一个自定义TextInput ...
  • 实际上会生成一个隐藏 input: <pre><code> php <input type="hidden" name="_token" value="GYZ8OHDAbZICMcEvcTiS82qlZs2XrELklpEl159S"> </code></pre> 这一...
  • }</code> 实际上会生成一个隐藏 input:<code><input type="hidden" name="_token" value="GYZ8OHDAbZICMcEvcTiS82qlZs2XrELklpEl159S"></code></p> 这一行也...
  • 类别侧边栏实现后,需要为每一个类别元素都添加一个id,通过id来获取数据库中数据,用Ajax获取数据并且刷新页面信息。采用分页技术,防止数据过多时候,显示在同一个页面,给用户带来不好体验,分页支持...
  • 说明:将主键或唯一字段与另一个字段组成哈希表,可用于开发列表、外键翻译功能。相当于 SQL 语句"select 主键字段,显示名称 from 表"。返回值为 Object 类型。 Objs(输入数据).keyColumn(主键或唯一字段, 映射...
  • 模版都可定义不同样式,所以系统内置功能相关文件也都放在了模版里,每模版里存储份,避免替换系统目录下其他文件。 ads/ 存放广告js文件,可自定义名称, 在当前模版路径config.xml 里配置好 ...
  • 对于这么一个 a 标签,我们要在另一个页面获取这个 url 参数 id: <a :href="'./updateprovince.html?id=' + province.id">修改省份</a> 可以通过 location.href 获取 url 再进行截取: var id = ...
  • 控制器:默认有一个$formNames属性,用来配置新增/编辑表单请求字段的白名单。此属性必需配置,否则获取不到表单数据。参考 request 对象 only 方法 app/Http/Requests/Admin/ConfigRequest.php 表单请求类:可在...
  • 实例223 使用内连接选择一个表与另一个表中行相关的所有行 401 9.16 外连接查询 403 实例224 left outer join查询 403 实例225 right outer join查询 405 实例226 使用外连接进行多表联合查询 406 9.17 ...
  • getHiddenAlphaAnimation : 获取一个由完全显示变为不可见透明度渐变动画 getShowAlphaAnimation : 获取一个由不可见变为完全显示透明度渐变动画 getLessenScaleAnimation : 获取一个缩小动画 ...
  • 答:不会发生死锁,(但有一点int是按传递,所以每次改变都只是一个副本,因此不会出现死锁。但如果把int换做一个object,那么死锁会发生) 30.简要谈一下您对微软.NET 构架下remoting和webservice两项技术...
  • 函数地址可以通过编译生成文件查找,比如说对于keil,可以在.map文件中查找到每个函数地址,对于keil,.map文件中地址需要偏移一个字节,才可以成功执行,比如说shellClear函数地址为0x08028620,则通过exec...
  • 再次双击标题栏最大化,再次双击还原,相当于子模块也可以全屏显示作为一个大屏,这样就可以一个大屏拓展出多个子大屏,放大查看子模块数据详情。 每个模块都可以自定义采集速度,如果是数据库采集会自动排队处理...
  • 正则表达式

    2014-12-03 14:51:39
    我们已经发现了,在正则表达式中所有的字母字符和数字都是按照字面意思与自身相匹配的.JavaScript的正则表达式还通过以反斜杠(\)开头的转义序列支持某些非 字母字符.例如,序列 "\n" 在字符串中匹配的是一个直接量换...

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
关键字:

获取一个字段所有的input值