Вот исправление вашего кода.Попытайся.это работает.
Убедитесь, что вы включили вашу библиотеку jquery.
во-вторых, вы не установили идентификатор для электронной почты и имя в форме ввода согласно
id = "name" id = "email"
В-третьих, вы должны удалить элемент формы вокруг ввода текста.просто удалите это.
<form id="usersForm" method="post">
</form
и используйте его следующим образом
<input type="text" name="name" id="name"/>
<input type="email" name="email" id="email"/>
<button type="submit" class="btn btn-success" id="submit" >ADD USER</button>
наконец, в Ajax-вызове вы устанавливаете переменные Email и Имя как заглавная буква, но в своем php вы публикуете ее как маленькое письмо.пожалуйста, будьте осторожны
Ниже приведен код с изменениями
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var Name = $("#name").val();
var Email = $("#email").val();
alert(Name);
alert(Email);
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "insert.php",
data: {Name:name, Email:email},
dataType: "html",
success: function(data) {
alert("Data Inserted Successfully.");
},
error: function(err) {
alert(err);
}
});
})
});
</script>
или вы также можете использовать мой недавно протестированный код.
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
alert('ok');
var name = $('#name').val();
var email = $('#email').val();
//set variables to check for valid email
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if(name==""){
alert('please Enter name');
}
else if(email==""){
alert('please Enter Email');
}
else if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email Address")
return false;
}
else{
$('#loader').fadeIn(400).html('<span>Please Wait, Your Data is being Submitted</span>');
var datasend = "nm="+ name + "&em=" + email;
$.ajax({
type:'POST',
url:'insert.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
alert('message successfully inserted');
//empty name and email box after submission
$('#name').val('');
$('#email').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
</script>
<div id="loader"></div>
<div id="alertbox"></div>
<input type="text" name="name" id="name"/>
<input type="email" name="email" id="email"/>
<button type="submit" class="btn btn-success" id="submit" >ADD USER</button>
Обновленный раздел
Попробуйте это.он будет отображать успешное сообщение после того, как ajax отправка будет в порядке
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(){
var name = $('#name').val();
var email = $('#email').val();
//set variables to check for valid email
atpos = email.indexOf("@");
dotpos = email.lastIndexOf(".");
if(name==""){
alert('please Enter name');
}
else if(email==""){
alert('please Enter Email');
}
else if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email Address")
return false;
}
else{
$('#loader').fadeIn(400).html('<span>Please Wait, Your Data is being Submitted</span>');
var datasend = "Name="+ name + "&Email=" + email;
$.ajax({
type:'POST',
url:'insert.php',
data:datasend,
crossDomain: true,
cache:false,
success:function(msg){
if(msg=='success'){
alert('message successfully inserted');
}else{
alert('message submission failed');
}
//empty name and email box after submission
$('#name').val('');
$('#email').val('');
$('#loader').hide();
$('#alertbox').fadeIn('slow').prepend(msg);
$('#alerts').delay(5000).fadeOut('slow');
}
});
}
})
});
</script>
php, например, файл тестирования. insert.php
<?php
$Name = $_POST['Name'];
$Email = $_POST['Email'];
echo "success";
?>
, поэтому ваш php-файл должен выглядеть так:
<?php
//include('db_connect.php');
$Name = $_POST['Name'];
$Email = $_POST['Email'];
$stmt = $connection->prepare("INSERT INTO users (name, email) VALUES(:name, :email)");
$stmt->bindparam(':name', $Name);
$stmt->bindparam(':email', $Email);
if($stmt->execute())
{
//$res="Data Inserted Successfully:";
//echo json_encode($res);
echo "success";
}
else {
// $error="Not Inserted,Some Probelm occur.";
//echo json_encode($error);
echo "failed";
}
?>