js提交form表单,js控制表单form提交方法详解

发布时间:2019-11-12编辑:脚本学堂
有关js提交form表单的例子,在处理html表单数据的时候,可以使用js控制表单form提交,javascript提交表单时最好form中元素不要用id="submit"或name="submit"。

js提交form表单

javascript页面加裁时自动提交表单
form表单:
 

复制代码 代码示例:
<form method="post" id="myform" action="a.php">
<input type="submit" value="提交表单">
</form>

javascript 代码:
 

复制代码 代码示例:
<script type="text/javascript">
function validate(){
document.getElementByIdx_x('myform').submit();
}
window.load=validate();
</script>

注:用javascript提交表单时最好form里的元素不要用id="submit"或name="submit",例如:
<input type="button" name="submit" />或<input type="button" id="submit" /> 这样JS可能不兼容各种浏览器,会导致JS报错。

二、超链接提交表单
Form表单:
 

复制代码 代码示例:
<form method="post" id="myform" action="a.php">
<input type="test" value="name"/>
</form>
<a href="javascript:validate()">提交</a>

javascript代码:
 

复制代码 代码示例:
<script type="text/javascript">
function validate(){
document.getElementByIdx_x('myform').submit();
}
</script>

js控制表单form的提交

当用户输入一个或者多个空格的时候,它也可以通过验证的。所以要想更周全些就要加上这句话了:fieldValue = fieldValue.replace(/s/gi,"");来把空格的情况去除掉。(在var定义的变量之后加上)

按钮的代码:
 

复制代码 代码示例:
<h:commandButton id="save" value="Save"
onclick="return checkImage()" action="#{actorCardHome.persist}"
disabled="#{!actorCardHome.wired}"
rendered="#{!actorCardHome.managed}" />

说明:
1、在按钮的事件onclick="return checkImage()",而不是onclick="checkImage()",否则达不到效果它同样会提交表单。
2、js的判断空值和非空值这样来写:
if(imageValue !== "") 和 if(imageValue == "")
3、这里的id可能是比较特殊的,因为我的是JSF的页面,所以要看源代码才可以知道id。
4、document.getElementById("actorCard:imageField:image").focus();这一句重新定位到那个必须填的字段的位置。这句比较好。特别提醒的是:这句后面的return false;如果没有它的话表单同样会提交,所以一定要记得把这句加上。

补充完整:
1. signin.jsp
 

复制代码 代码示例:
<script type="text/javascript" src="js/common.js"></script>
<s:form name="loginForm" action="./openid.servlet"method="post">
<table>
<tr>
<td align="right">Username:</td>
<td align="left">
 <input type="text" id="username" name="username" value="" class="joinField"><br />
 <span id="error_username"></span>
</td>
 </tr>
 <tr>
<td align="right">Password:</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="joinField"><br />
<span id="error_password"></span></td>
</tr>
<tr>
<td align="right">
<input type="submit" id="loginButton" onclick="return checkField();" value="login" class="btn-submit">
</td>
<td align="left"><br />
<span id="error_login" class="error"></span></td>
</tr>
</table>
</s:form>

说明三点:
(1)这一句:<input type="submit" id="loginButton" onclick="return checkField();" value="login">里面的type="submit",非常重要,由于当时种种原因我不小心写成了type="button",所以导致我的执行在执行JS的时候总是提交不了。document.getElementById("loginForm").sumbit(); 这句是JS的提交代码。
(2)document.getElementById("loginForm").sumbit(); 这里的loginForm是指的是form表单的ID号而不是"提交按钮"的ID号,这里一定要注意。

(3)document.getElementById("error_username").innerHTML = "username is not null !";这里的"error_username"指的是ID哦,因为当时在原有的代码上改没注意它当时是class,然后就报错。

2. common.js
 

复制代码 代码示例:
function checkField(){
var usernameValue = document.getElementById("username").value;
var passwordValue = document.getElementById("password").value;
usernameValue = usernameValue.replace(/s/gi,"");
passwordValue = passwordValue.replace(/s/gi,"");
if(usernameValue !== "" && passwordValue !== ""){
这里不能写下面那个语句,如果写了后会提交form表单2次。而应该直接写return true;就可以了。切记!!
//document.getElementById("loginForm").submit();
return true;
}else if(usernameValue == "" && passwordValue == ""){
document.getElementById("error_username").innerHTML = "username is not null !";
document.getElementById("error_password").innerHTML = "password is not null !";
return false;
}else if(usernameValue !== "" && passwordValue == ""){
document.getElementById("password").focus();
document.getElementById("error_username").innerHTML = "";
document.getElementById("error_password").innerHTML = "password is not null !";
return false;
}else if(passwordValue !== "" && usernameValue == ""){
document.getElementById("username").focus();
document.getElementById("error_password").innerHTML = "";
document.getElementById("error_username").innerHTML = "username is not null !";
return false;
}
}