我想使用ajax验证我的表单,在验证之后,使用ajax将其插入数据库。
使用此代码,它会显示验证消息但仍会插入。
我发现的问题是提交按钮,如果我将其更改为按钮而不是提交它插入表单而不验证(甚至不是消息),当我将其更改回提交时,它也提交表单但它显示验证消息。
知道验证后如何插入?为什么它不适合我?
由于
index.php
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="utf-8">
<title>Form</title>
</head>
<script type="text/javascript" src="js/validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="wrap">
<table>
<td>
<form name="form">
<tr>
<p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p>
</tr>
<tr>
<p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p>
</tr>
<tr>
<p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p>
</tr>
<tr>
<p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p>
</tr>
<tr>
<input class="knop" type="submit" name="insert" value="Opsturen" id="insert">
</tr>
</form>
</td>
</table>
<br>
<div id="berichten">
</div>
<script>
var is_valid = true;
var validator = new FormValidator('form', [{
name: 'voornaam',
display: 'Voornaam',
rules: 'required'
}, {
name: 'achternaam',
display: 'achternaam',
rules: 'required'
},{
name: 'telefoonnummer',
display: 'telefoon',
rules: 'required|numeric'
},{
name: 'email',
display: 'email',
rules: 'required|valid_email'
}], function(errors, event) {
var berichten = document.getElementById('berichten');
berichten.innerHTML = '';
if (errors.length > 0) {
is_valid = false;
for (var i = 0, l = errors.length; i < l; i++) {
berichten.innerHTML += errors[i].message + '<br>';
}
}
});
</script>
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
if(is_valid){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
}
});
});
</script>
</div>
</body>
</html>
action.php的
<?php
//connectie
include ('connection.php');
//als de knop is ingedrukt insert dan
if($_POST['action'] == 'button'){
$voornaam = mysql_real_escape_string($_POST['voornaam']);
$achternaam = mysql_real_escape_string($_POST['achternaam']);
$email = mysql_real_escape_string($_POST['email']);
$telefoonnummer = mysql_real_escape_string($_POST['telefoonnummer']);
$sql = "insert into
`form` (`id`,`voornaam`, `achternaam`, `email`, `telefoonnummer`)
values ('','".$voornaam."', '".$achternaam."', '".$email."', '".$telefoonnummer."')";
$query = mysql_query($sql);
if($query){
echo "Toegevoegd!";
}else {
echo "Er is iets fout gegaan.";
}
}
?>
答案 0 :(得分:3)
使用以下内容结束click
处理函数
return false;
阻止提交按钮的默认操作。
答案 1 :(得分:0)
使用提交按钮,当for无效时,您需要通过return false
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
if(is_valid){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
$.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
$('#result').html(res);
});
document.getElementById('berichten').innerHTML = 'Verstuurd!';
} return false;
});
});
</script>
顺便说一下,出于安全原因,以及有人禁用js的情况,你也应该在php中验证数据。
答案 2 :(得分:0)
你也可以试试这个: 点击这样调用此函数:
<button type="button" class="btn btn-inverse" name="submit" onClick="ajaxFormSubmit();">Test</button>
function ajaxFormSubmit(){
var voornaam = $('#voornaam').val();
var achternaam = $('#achternaam').val();
var telefoonnummer = $('#telefoonnummer').val();
var email = $('#email').val();
var atpos=email .indexOf("@");
var dotpos=email .lastIndexOf(".");
if(voornaam =="" || achternaam =="" || telefoonnummer =="" ||email ==""){
alert("message");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("msg");
return false;
}
jQuery.post("your data",function(r){
if(r=="success"){
}
});
答案 3 :(得分:0)
http://www.javascriptkit.com/javatutors/valid3.shtml
http://www.nairaland.com/216098/form-validation-tutorial-using-javascript
看看这些链接是否可以帮助你实际帮助我...
答案 4 :(得分:0)
页面中可能存在JQuery冲突,只需在页面中添加一个jquery链接....尝试就像这样,
Jquery路径:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<强>表格强>
<form name="myform">
<input type"text" name="name">
<input type="submit" name="submit" id="submitbtn" value="Submit" />
</form>
正文标记下的JS脚本
<script>
$('#submitbtn').click(function(){
//ajax code here
return false;
})
</script>
上面的代码只是一个示例...像这样锻炼你的代码......