gpt4 book ai didi

javascript - 表单验证并提交ajax

转载 作者:行者123 更新时间:2023-11-28 20:04:24 25 4
gpt4 key购买 nike

我想使用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.";
}
}
?>

最佳答案

结束您的click处理函数:

return false;

防止提交按钮的默认操作。

关于javascript - 表单验证并提交ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21087021/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com