我只是想知道如何使用没有提交按钮的表单调用函数？因为目前我的代码不起作用。如果我的 signup.php
中有这样的表单<?php
include 'connect.php';
include 'header.php';
echo '<h2>Register</h2>';
echo '
<div class="container">
<form id="submit" method="post" action="" onsubmit="return formValidating();">
<fieldset>
<legend> Enter Information </legend>
<br/>
<label for="user_name">Your username: </label>
<br/>
<input id="user_name" class="text" name="user_name" size="20" type="text">
<br/>
<br/>
<label for="user_pass">Your password: </label>
<br/>
<input id="user_pass" class="text" name="user_pass" size="20" type="password">
<br/>
<br/>
<label for="user_pass_check">Confirm password: </label>
<br/>
<input id="user_pass_check" class="text" name="user_pass_check" size="20" type="password">
<br/>
<br/>
<label for="user_email">Email: </label>
<br/>
<input id="user_email" class="text" name="user_email" size="20" type="email">
<br/>
<br/>
<button class="button positive" type="submit"> <img src="like.png" alt=""> Register </button>
</fieldset>
</form>
<div class="success" style="display: none;"> You are now a registered user!</div>
</div>';
?>
在我的 header.php 中我有一个名为formValidating的函数
<!DOCTYPE HTML>
<head>
<title> ShareLink </title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script.js"></script>
<!-- Back to Top easing jQuery -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ui.totop.css" />
<!-- jquery -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- For the form submit -->
<script src="addMember.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<script type="text/javascript">
/////////////////////////////////////////////////////////////
////////////////////// FORM VALIDATION //////////////////////
/////////////////////////////////////////////////////////////
function formValidating(){
//username variables
var username = document.getElementById["user_name"].value;
//email variables
var email = document.getElementById["user_email"].value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
//password variables
var password = document.getElementById["user_pass"].value;
var password2 = document.getElementById["user_pass_check"].value;
//username validation
if (username == null || username == "")
{
alert("Please enter your username");
return false;
}
//email validation
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
alert("Please enter a valid email address");
return false;
}
//password validation
else if (password == null || password == "")
{
alert("Please enter your password");
return false;
}
else if (password != password2){
alert("Please make sure that your two passwords match")
return false;
}
}
</script>
</head>
<body>
<h1><></h1>
<div id="wrapper">
<div id="menu">
<a class="item" href="/index.php">Home</a> -
<a class="item" href="/create_topic.php">Create a topic</a> -
<a class="item" href="/create_cat.php">Create a category</a> -
<a class="item" href="/members.php"> Members </a> -
<a class="item" href="/search_form.php"> Search </a> -
<a class="item" href="/profile.php"> Profile </a>
<div id="userbar">
<?php
if($_SESSION['signed_in'])
{
echo 'Welcome <b>' . htmlentities($_SESSION['user_name']) . '!</b> <a class="item" href="signout.php">Log out</a>';
}
else
{
echo '<a class="item" href="signin.php">Log in</a> or <a class="item" href="signup_2.php">Register</a>';
}
?></div>
</div>
<div id="content">
如何调用此fomValidation函数？请帮忙!!
谢谢!! ：）
答案 0 :(得分：2)
最简单的方法是替换
<button class="button positive" type="submit">
与
<button id="myButton" class="button positive" type="submit" onClick="formValidating()">
并添加
document.getElementById("myButton").submit();
到Validation（）函数的结尾
答案 1 :(得分：1)
只需在按钮元素上使用onClick事件：
onclick="formValidating();"
您需要将此 type =“submit”更改为type =“button”
更新：
我在jsFiddle上玩这个：
我得到了使用jQuery调用函数的按钮...
答案 2 :(得分：1)
您必须在函数内的getElementById使用括号而不是括号。因此，getElementById(...)代替getElementById[...]。 （见答案底部）
将<button class="button positive" type="submit">替换为<input class="button positive" type="submit" />。
<小时/> 您的固定代码：
function formValidating(){
//username variables
var username = document.getElementById("user_name").value;
//email variables
var email = document.getElementById("user_email").value;
var atpos = email.indexOf("@");
var dotpos = email.lastIndexOf(".");
//password variables
var password = document.getElementById("user_pass").value;
var password2 = document.getElementById("user_pass_check").value;
//username validation
if (username == null || username == "")
{
alert("Please enter your username");
return false;
}
//email validation
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
alert("Please enter a valid email address");
return false;
}
//password validation
else if (password == null || password == "")
{
alert("Please enter your password");
return false;
}
else if (password != password2){
alert("Please make sure that your two passwords match")
return false;
}
}