form表单的提交方式

form表单的提交方式：

 <form name="formMain" id="formMain" method="post" οnsubmit="prepSubmit" enctype="multipart/form-data"    action="douban.php"   target="PostIfr">

onsubmit: 提交前触发

语法:

form.onsubmit

//js:form的submit事件

$("#formMain").submit()

submit（）里面可以加一个回调 

$("form").submit(function(e){
  alert("Submitted");
});

 

Form 对象属性

属性	描述
acceptCharset	服务器可接受的字符集。
action	设置或返回表单的 action 属性。
enctype	设置或返回表单用来编码内容的 MIME 类型。
id	设置或返回表单的 id。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。
name	设置或返回表单的名称。
target	设置或返回表单提交结果的 Frame 或 Window 名。

Form 对象方法

方法	描述
reset()	把表单的所有输入元素重置为它们的默认值。
submit()	提交表单。

Form 对象事件句柄

事件句柄	描述
onreset	在重置表单元素之前调用。
onsubmit	在提交表单之前调用。

 

还可以参考第三方插件：https://blog.csdn.net/paincupid/article/details/50430037

 

Form表单提交数据的几种方式

一、submit提交

在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮（<input type=’submit’>）就可以进行数据的提交，每一个input标签都需要有一个name属性，才能进行提交。

<form action=’http://www.123.com/postValue’ method=’post’>

<input type=’text’ name=’username’ />

<input type=’password’ name=’password’/>

<input type=’submit’ value=’登陆'/>

</form>

当点击登陆时，向服务端发生的数据是：username=username&password=password.

这种默认的提交方式，一般会进行页面的跳转(不成功时跳转到当前页面)。而有时候我们是对弹出框进行数据提交的，希望提交成功则关闭弹出框并刷选父页面，失败则提示失败原因，且弹出框不关闭。此时可以采用Ajax进行数据提交.

 

二、Ajax提交form表单

$('#documentForm').submitForm({
            url: "/Document/SubmitDocumentCreate",
            dataType: "text",
            callback: function (data) {
                endFileUpload();
                data = eval("(" + data + ")");
                alert(data.Content);
                if (data.Result > 0) {
                    location.href = data.Redirect;
                }
            },
            before: function () {
                startFileUpload();
                var errMsg = "";
            }
        }).submit();

此时可以在callback函数中对请求结果进行判断，然后执行不同的动作(页面跳转或刷选数据、提醒错误都可以)

 

三.form表单提交附件

需要设定form的enctype="multipart/form-data"并且添加<input type=’file’>，而且附件只能通过submit方法进行提交

//html

<form name="formMain" id="formMain" method="post" enctype="multipart/form-data" action="http://www.123.com/postValue.php?action=setRecruitInfo" target="PostIfr">

     <a href="javascript:" class="btn-upload" title="点击上传">
            <input type="file" id="iCommentImg" name="mypic" οnchange="upfile()">
      </a>

</form>

 

//js  只能通过submit方式提交

$("#formMain").submit();

 

四。利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                 }
                 return true;
         }
</script>
<form action="login.do?act=login" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
           <input type=submit name="submit1" value="登陆" οnclick="return check(this.form)">  
</form>
 

五。利用button按钮实现提交，当点击button按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址，由于button按钮不具备自动提交的功能，所以由JavaScript实现提交。
 

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="login.do?act=login" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" οnclick="check(this.form)">  
</form>
 

六、利用submit按钮实现提交，当点击submit按钮时，先触发onsubmit事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。 

<script type="text/javascript">
         function check(form) {
              if(form.userId.value=='') {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==''){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="login.do?act=login" method="post" οnsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>