form表单的提交方式

form表单的提交方式:

 <form name="formMain" id="formMain" method="post" onsubmit="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" onchange="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="登陆" onclick="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="登陆" onclick="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" onsubmit="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> 
 

猜你喜欢

转载自blog.csdn.net/dxj124/article/details/84292005