精华内容
下载资源
问答
  • form表单提交时多个相同name属性问题解决方案二
    千次阅读
    2019-06-08 06:28:41

    1 问题背景
    项目中有这样的需求:根据不同的业务逻辑填写不同的表单提交到数据库中, 但是不同的表单之间又有一些字段是一样的,也就是说在form表单里存在多个name值相同的 input输入框,这样在提交的时候就会有这么一个问题,有几个相同name的值提交, 就会传回给后台几个相同的值,默认是以逗号分隔的,即使是空值,也会逗号把两个空值隔开。 这就给后台处理造成了不便,问题由此产生。

    2 解决方法
    2.1 后台处理
    直接把问题抛给后台,让后台去解析,不是不可以,但是很明显不是好的解决方案, 既显示不出来前台的业务功底,更会让后台很反感。

    2.2 前端处理
    2.2.1 分析

    表单之间存在互斥关系,也就是说,相同name属性的表单并不能同时提交, 每次提交只不过是根据规则提交符合要求的表单,这样就给我们处理带来了便利。

    2.2.2 解决方式二(承接上一个方案)

    将多个不同时提交的字段放入到多个不同的表单中提交,把大的form表单切分为多个小的form表单,每次提交时只需提交需要的表单。

     

    两种方法优劣对比:第二种方式要更好一点,第一种直接修改了dom结构,再次进行重复或者其他操作可能会受到影响,第二种方式则没有此项弊端。

    个人观点:仅供参考

     

    欢迎志趣相投的朋友一起学习交流! 
    本人qq:906570770 
    技术资料分享群:272811256

    更多相关内容
  • 主要介绍了php 处理 form 表单提交多个 name 属性值相同的 input 标签问题的解决方法,需要的朋友参考下吧
  • 提交form表单数据到服务器端(如果表单中的元素设置name属性,是否能把数据提交到服务器端呢?) 在如下案例中,是把表单数据提交到服务器端的servlet中 注意: 1.只有设置了 name 属性的表单元素才能在提交表单时...

    提交form表单数据到服务器端(如果表单中的元素不设置name属性,是否能把数据提交到服务器端呢?)

    在如下案例中,是把表单数据提交到服务器端的servlet中

    注意:

    1.只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    2.虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只有选中了的复选框,才会提交到服务器端

    直接po截图和代码

    下面是CheckFormDemo.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>验证表单的案例</title>
    <link rel="stylesheet" type="text/css" href="../css/body.css"/>
    <script type="text/javascript" src="jsCheckDateDemo.js"></script>
    </head>
    <body>
    <h1>验证表单的案例</h1>
    <form name="form1" id="f1" action="../TestForm" method="get">
    姓名:<input type="text" name="userName" id="uName">
    <br/>
    年龄:<input type="text" name="age" id="uAge">
    <br/>
    密码:<input type="password" name="pwd" id="myPwd">
    <br/>
    重复密码:<input type="password" name="repeatPwd" id="myRepeatPwd">
    <br/>
    <!-- 
    虽然复选框设置了 name属性,但是如果复选框不选中,是不会提交到服务器端的,只
    有选中了的复选框,才会提交到服务器端
     -->
    爱好:<input type="checkbox" name="hobby" id="myHobby" value="football">足球
    <input type="checkbox" name="hobby" id="myHobby" value="badminton">羽毛球
    <input type="checkbox" name="hobby" id="myHobby" value="basketball">篮球
    <input type="checkbox" name="hobby" id="myHobby" value="billiards">台球
    <br/>
    备注:<textarea rows="3" cols="30" id="remarks"></textarea>
    <br/>
    <!-- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值 -->
    测试字段:<input type="text" id="test" value="本文本框故意不设置name属性,看服务器端能不能接收到">
    <br/>
    <!-- 
    onclick="checkForm();"这句话中的;分号也可以省略不写,但是如果有多行js代
    码的话,那就要在每行js代码后面加上;分号,最后一行js代码后面可以不写;分号,也可以写上;分号
     -->
    <input type="button" value="js验证表单" onclick="checkForm();">
    <input type="submit" value="提交到servlet">
    </form>
    </body>
    </html>

    下面是名字叫TestForm的servlet

    package com.servlet;
    
    import java.io.IOException;
    import java.util.Enumeration;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 测试从客户端中提交到服务器端中的参数有哪些?
     */
    @WebServlet("/TestForm")
    public class TestForm extends HttpServlet {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		Enumeration<String> parameterNames = request.getParameterNames();
    		while (parameterNames.hasMoreElements()) {
    			String parameterName =  parameterNames.nextElement();
    			System.out.println("参数名:" + parameterName);
    		}
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }

     

    展开全文
  • form表单提交时多个相同name属性

    千次阅读 2020-05-06 15:53:48
    form表单提交时多个相同name属性form表单提交时多个相同name属性

    form表单提交时多个相同name属性form表单提交时多个相同name属性

    其他情况参考:springmvc参数为对象,数组

    如果页面直接需要多套相同的name,比如一位老师,多位同学

    后台代码

    Person类

    @Data
    public class Person {
        private String name;
        private Integer age;
    }

    Teacher类

    @Data
    public class Teacher extends Person {
        private List<Person> studentList;
    }

    controller

        @GetMapping("form5")
        public String form5(ModelMap modelMap, Teacher teacher) {
            System.out.println("teacher -> " + teacher);
            modelMap.put("display0", teacher);
            return "person/display";
        }

    前端代码

        <label>form5:复杂数据(用teacher接收,同时有多个学生)</label>
        <form action="/form5" method="get" id="form5">
            老师0:
            name: <input name="name" type="text">
            age: <input name="age" type="text">
            <br/>
            学生1:
            name: <input name="studentList[0].name" type="text">
            age: <input name="studentList[0].age" type="text">
            <br/>
            学生2:
            name: <input name="studentList[1].name" type="text">
            age: <input name="studentList[1].age" type="text">
            <input type="submit" value="提交">
        </form>

    异步请求也是一样的写法

    有待更新。。。

    展开全文
  • HtmlUnit中form表单提交提交按钮中的属性没有id、name提交按钮的标签也不是<input> 如下图,提交查询按钮没有id、name,标签名为<button>: <form method="post"> <div class="nav_right...

    HtmlUnit中form表单提交,提交按钮中的属性没有id、name,提交按钮的标签也不是<input>

     如下图,提交查询按钮没有id、name,标签名为<button>:

    <form method="post">
                    <div class="nav_right">
                        <div class="right_dh" style="padding-left: 10%">
                            <p>用户姓名:<input type="text" name="userName" value="20190988" title="不可模糊查询" ></p>
                            <p>性别:<input type="text" name="gender" value="" title="可模糊查询"></p>
                            <button type="submit" class="btn_search">查询</button>
    </form>

     解决办法如下(根据button中class属性):

    	HtmlPage page = webClient.getPage("http://xxx.xx.xx.xx/xx");
    	//获取form表单
    	HtmlForm form = page.getForms().get(0);
    //	System.out.println("-----------form:"+form.asText());
    	//form表单的btn中没有id和name属性,提交表单
    	HtmlTextInput inputTxt = null;
    	HtmlSubmitInput btn = null;
    	//根据name找到需要的input框
    	inputTxt = page.getElementByName("userName");
    	//放入要查询的值
    	inputTxt.setValueAttribute("张三");
    	//找到要点击的查询按钮(这里的按钮没有id、name属性,不能用htmlUnit中常规的自带的方法)
    	List<HtmlElement> lists = (List<HtmlElement>)page.getByXPath("//button[@class='btn_search']");
    			
    	HtmlPage nextPage = lists.get(0).click();
    	System.out.println(nextPage.asText());

     

    展开全文
  • 表单提交的数据,以其name属性为准

    千次阅读 2018-06-28 17:54:09
    当然了,我习惯把name与id属性统一起来,这样就能姑且认为是通过name属性提交的数据。实际结果也是以name属性为基准的。 比如,我在下面的这个表单中提交数据。 请假类型的代码可以说明一切,id是leaveType2,name...
  • (一)使用form表单name属性简单实现前后端交互

    万次阅读 多人点赞 2021-11-14 13:10:10
    实现效果: 点击提交后: 前端页面源码: <...Ajax前后端交互_通过name属性进行</title> </head> <body> <form action="/" method="post"> 用户名:<input type=
  • 项目中有这样的需求:根据不同的业务逻辑填写不同的表单提交到数据库中, 但是不同的表单之间又有一些字段是一样的,也就是说在form表单里存在多个name值相同的 input输入框,这样在提交的时候就会有这么一个问题,...
  • 表单条目需要提供name属性 提交按钮需要提供属性form-type=‘submit’ form组件需要提供属性bindsubmit=事件处理函数 handleSubmit: function(e) { // 处理表单提交 // console.log('form') var uname = e....
  • 前端开发日记之form表单name属性详解

    千次阅读 2016-09-09 15:52:49
    我们知道,$("#Form").serialize(),提交的是表单里控件的value值,并且是根据form里面的name属性来获取这些value值的。 今天,我们就来谈一谈form表单里的name属性可能给我们带来的困扰。 大家看如下代码: ...
  • 以前获取dom元素基本都是通过js的document.getElementById()或者document.getElementByName等方法或者通过jQ的选择器来选择,但其实html的name属性也可以用来直接获取dom元素,代码如下所示:<!DOCTYPE html> ...
  • name属性

    千次阅读 2021-03-05 17:07:35
    只有设置了 name 属性表单元素才能在提交表单时传递它们的值,因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的,没有 name 属性就无法得到表单元素提交给服务端的值 ...
  • 用很简单的源码实现包含下列 antd 表单相关知识: 1.表单必填校验,规则校验 ...4.提交表单不刷新页面 5.把上传的图片显示在页面 页面效果图: 提交提交后:包括校验失败的场景 t_form.jsx 代码: ...
  • 如果为了前端某些处理而存在,需要提交到服务器后台,设置name属性不提交。 在线测试如: <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <...
  • js获取form表单name属性的值

    万次阅读 2018-05-22 13:07:23
    在项目中因为动态表单无法确定标签name属性的值,因此需要即时获取以便进行存储。前端代码如下:&lt;div class="control-group"&gt; &lt;label class="control-label"&gt;土拨...
  • form标签的name属性的作用

    千次阅读 2020-05-16 22:49:51
    form标签的name属性的作用 form 标签的 name 属性可以用来为表单设置一个独一无二的标识符,以便使用 DOM 时可以区分各个表单 注意:name 属性和全局属性 id 不是一回事,后者在 HTML 文档中多用于 CSS 选择器 ...
  • 在一个form中若不同标签的name属性重复,在提交时会自动将value封装成数组,中间以“,”分割
  • form表单name的作用

    千次阅读 2020-09-11 18:36:18
    name 属性用于对提交到服务器后的du表单数据进zhi行标识 ②或者在客户端通过dao JavaScript 引用表单数据。 注释:只有设置了 name 属性表单元素才能在提交表单时传递它们的值。 简单的说就是你在前端页面想使用...
  • 我想实现能自动填写某个网站表单的功能,百度了一下感觉...但是我看了下很多网站的form都没有name属性怎么办?直接写表单的name的话会报错。 如果有其他比较好的方法也请告诉我一下,谢谢
  • 通过action属性提交HTML表单

    千次阅读 2018-05-08 08:06:43
    一些重要的属性 1.action 指定某个服务器脚本来处理被提交表单。省略,则被设置为当前页面。 2.method 规定在提交表单是使用的HTTP方法(get, post) GET 被提交表单数据会显示在页面地址栏,安全性较...
  • form标签的name属性的作用 form 标签的 name 属性可以用来为表单设置一个独一无二的标识符,以便使用 DOM 时可以区分各个表单 注意:name 属性和全局属性 id 不是一回事,后者在 HTML 文档中多用于 CSS 选择器 提交...
  • 后面举的例连一个name都没有看见!求大神解说~女生学电脑可能太灵光~谢谢啦![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/83.gif)![图片说明]...
  • from表单取消提交隐藏的标签属性

    千次阅读 2018-11-13 15:44:11
    from表单取消提交隐藏的标签属性值 form表单提交被visibility=hidden和display=none修饰的元素都会随表单提交 只有disabled=true标记的元素表单提交 &lt;table &gt; &lt;tr&gt; &lt;td &...
  • Form表单之get提交与post提交

    千次阅读 2021-06-01 08:38:24
    Form表单之get提交与post提交 Form表单属性action与method: 属性 值 描述 action URL 规定当提交表单时向何处发送成都数据 method get/post 规定用于发送form-data的HTTP方法。(提交表单的方式) &...
  • html实现form表单提交重新刷新页面

    万次阅读 多人点赞 2019-01-23 09:55:14
    百度查了下解决办法,总结一下:在form表单后添加一个iframe标签,属性设为隐藏,form表单中target属性值设为iframe标签的名字。代码如下: &lt;html&gt; &lt;body&gt; &lt;form action="...
  • 对于单选框,value和你的文本内容是相同的,那可可以写value呢,当服务端要读取你当前点击的单选框的时候,通过name属性获取的值其实是获取的value值,而你输入的文本内容,服务端是无法获取到的。同时,name...
  • form表单提交

    万次阅读 2019-04-03 19:57:35
    一、Form表单有两个属性分别是:“action”和“method”: Action: 的值是URL 就是当提交表单时向某个地方(要提交到某处的地址)发送表单数据 Method: 的值是 get和 post 就是用来提交表单的方式 二、Method中的 ...
  • 在确定标签里有name值,而且没有name重复的情况下,from提交后台确实没有获取到数据,解决方式如下: 方法一 enctype:"multipart/form-data",method:"post" 去掉后,即可取到值,转载原因如下: 1.get方式get...
  • 示例代码: form id="saveForm"> input id="saveForm-age" name="age" disabled="disabled" /> input id="saveForm-age" name=...当上述两种写法出现时,表单提交的数据中,将包括 age 这个属性,这是因为 inpu
  • Form表单Get方式提交时,action中带参数传递了 &amp;amp;amp;lt;form id=”Form” action=”index.html?method=test” name=”Form”&amp;amp;amp;gt; &amp;amp;amp;lt;input name=”title” type=”...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 192,375
精华内容 76,950
关键字:

表单的name属性提交不了

友情链接: viaualc.rar