form 表单提交数据小记

  • form表单传统的提交方式,会跳转页面,需要做处理才行,可以在form上配置提交方式、提交地址,可以用submit、和button提交
    <form id="formid"  name= "myform" method = 'post'  action = 'user_login_submit.action' onsubmit = "return checkUser();" >
    其中checkUser返回false为不提交,你可以在checkUser中做数据校验

    用button提交时

    function checkUser(){
       var result = document.getElementById("userid").value;
       var password = document.getElementById("passid").value;
       if(result == ""  ){
         alert("用户名不能为空");
         return false;
       }
       if(password == ""  ){
        alert("密码不能为空");
         return false;
       }
      document.getElementById("formid").submit();  // 获取form的ID,然后调用它的submit方法
    }
  • 还有一种方法就是用let data = new FormData() 方法,FormData方法里传入页面form元素,然后用axios post方法将data传入即可,注意:form里input必须有name字段(即需要上传的字段),如果需要额外的字段且不需要input的情况,有两种解决办法:1、可以在页面中放入input 设属性hidden:true,2、用data.appen(‘字段名’, 内容),添加到form对象里
    <form id="forms">
      <input name="name"/>
      <input name="age"/>
    </form>
    <script>
      let form = document.getElementById('forms')
      let data = new FormData(form)
      data.append('age', 12)
    </script>
  • input file accept属性
      <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
      <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" ref="inputFile" :name="name" id="picture" @change="changePicture">
    <input type="file" name="file" id="contactAttachments" class="attachment-file" accept="application/pdf">
  • form表单上传多文件  添加multiple属性,打开本地文件选择的时候就可以选择多文件,
    let a = e.target.files || e.dataTransfer.files

    通过a会得到所选取文件的数组,可以进行相应的操作

时间: 2024-10-06 04:16:41

form 表单提交数据小记的相关文章

ext form 表单提交数据的方法小结_YUI.Ext相关

EXT的form表单ajax提交(默认提交方式)  复制代码 代码如下:  1. function login(item) {    2.    3. if (validatorForm()) {    4. // 登录时将登录按钮设为disabled,防止重复提交    5. this.disabled = true;    6.    7. // 第一个参数可以为submit和load    8. formPanl.form.doAction('submit', {    9.    10.

form表单提交一个对象封装数据,后台action怎么接收?

问题描述 form表单提交一个对象封装数据,后台action怎么接收? form表单提交一个对象封装数据,后台action怎么接收? 解决方案 从request 中获取数据的. 解决方案二: struts2 form 提交http://blog.knowsky.com/255739.htm 解决方案三: Struts2中表单与Action传递数据三种方式 解决方案四: server端通过request接受,貌似有一个方法,getparXXX什么的了 解决方案五: 我看你jsp的input标签命名

EasyUI中实现form表单提交的示例分享

这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码,小伙伴们根据自己的需求补全form部分吧,希望大家能够喜欢. 代码如下: $('#form').form({ url : 'test/add.do', onSubmit : function() { parent.$.messager.progress({ title : '提示', text : '数据处理中,请稍后....' }); var gridValid = endEdit();// 子表退出编辑验证 if

javascript如何监听form 表单提交请求?

问题描述 javascript如何监听form 表单提交请求? 前端form 表单提交请求如何监听?就像ajax请求可以通过xmlHttpRquest对象去监听所有的ajax请求,对其中的参数做一层包装再发送到后台,后台返回的数据也可以在此处做一次封装再发给指定的页面一样,但是xmlHttpRquest捕捉不到form表单提交的请求,请问各位大神form表单提交的请求前端如何捕获? 解决方案 表单的onsubmit事件,或者给input为submit的类型添加onclick事件也行,返回fals

php-我想使用这个表单提交数据到数据库,如何配置ajax参数,我租的WEB空间是PHP的

问题描述 我想使用这个表单提交数据到数据库,如何配置ajax参数,我租的WEB空间是PHP的 我想使用这个表单提交数据到数据库,如何配置ajax和PHP相关参数,我租的WEB空间是PHP的,我要实现的目的是收集报名信息,数据库能查询即可.当点击页面提交的时候,会弹出信息:您已经报名成功!稍后会有助教与您联系"我好久都没有接触层序了,好久都没有上来了,这里因页面需要现改模板网页,却不知道如何配置.没有分了,没办法给分,对不起!拜托懂得朋友帮忙指点指点.非常感谢 <td align="

AJAX PHP无刷新form表单提交的简单实现(推荐)_php实例

ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取

jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用_jquery

一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串. 是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post('

jquery插件EasyUI中form表单提交实例分享_jquery

之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

js获取form表单所有数据的简单方法_javascript技巧

在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen