I am trying to insert data from a form into a mysql database. The place I think the issue is, is where Im using the button in the HTML hence why I copied all of it over. Any help would be appreciated!
我正在尝试将表单中的数据插入到mysql数据库中。我认为问题在于，我在HTML中使用按钮的地方，所以我把它全部复制了一遍。如有任何帮助，我们将不胜感激!
When I hit the submit button, the page flashes and nothing is inserted into the DB. It should display a green box saying the record has been submitted on the html page.
当我点击submit按钮时，页面会闪烁，没有任何内容插入到DB中。它应该显示一个绿色框，表示记录已经提交到html页面上。
Because some people are more worried Im building an authentication system then whats wrong. This is NOT an authentication system, its just an example of how to insert into a mysql db.
因为有些人更担心的是，我建立了一个认证系统，那就错了。这不是一个身份验证系统，它只是一个如何插入到mysql db中的示例。
Index.html
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example with Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/insert.js"></script>
<style>
.custom{
margin-left:200px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Insert Data Using Ajax</h2>
<br/>
<p id="alert" style="display:none;" class="alert alert-success text-center"><i class="glyphicon glyphicon-ok"></i><span> id="show"</span></p>
<br/>
<hr/>
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" id="name" type="text" placeholder="Enter you name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" id="email" type="text" placeholder="Your Email...">
</div>
</div>
<fieldset >
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" id="password" type="text" placeholder="Your Password...">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
insert.php
insert.php
<?php
//Create connection
$connection = mysqli_connect('localhost','username','passwd','dbName');
if($_REQUEST['name']){
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$password= $_REQUEST['password'];
$gender = $_REQUEST['gender'];
$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
$query = mysqli_query($connection,$q);
if($query){
echo ' Data Inserted Successfully'
mysql_close($connection);
}
}
?>js/insert.js
js / insert.js
$(document).ready(function(e) {
$('#submit').click(function(){
var name = $('#name').val();
var email = $('#email').val();
var password = $('#password').val();
var gender = $('#gender').val();
$ajax({
type:'POST',
data:{name:name,email:email,password:password,gender:gender},
url:"insert.php", //php page URL where we post this data to save in databse
success: function(result){
$('#alert').show();
$('#show').html(result);
}
})
});
});2 个解决方案
#1
2
Anyway, this particular code works out to allowing insertion into database, though there are still some problem somewhere which I cannot find out.
不管怎样，这个特殊的代码可以允许插入到数据库中，尽管在某些地方仍然有一些问题我无法找到。
index.html
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example with Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('button').click(function () {
var name2 = $('#name').val();
var email2 = $('#email').val();
var password2 = $('#password').val();
var gender2 = $('#gender').val();
console.log('starting ajax');
$.ajax({
url: "./insert.php",
type: "post",
data: { name: name2, email: email2, password: password2, gender: gender2 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
<style>
.custom{
margin-left:200px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Insert Data Using Ajax</h2>
<form class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
insert.php
insert.php
<?php
//Create connection
$connection = mysqli_connect('localhost', 'root', '', 'dbase');
if($_POST['name']){
$name = $_POST['name'];
$email = $_POST['email'];
$password= $_POST['password'];
$gender = $_POST['gender'];
$q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";
$query = mysqli_query($connection, $q);
if($query){
echo json_encode("Data Inserted Successfully");
}
else {
echo json_encode('problem');
}
}
?>
#2
0
First, the jQuery event handler that you're attaching to an element with the ID "submit" is never going to fire, since it won't match any elements in your html. Change your html to something like this:
首先，您附加到ID为“submit”的元素的jQuery事件处理程序永远不会启动，因为它与html中的任何元素都不匹配。将html更改为如下所示:
<button type="submit" name="submit" id="submit"> Submit! </button>
<按钮类型="提交"名称="提交" id="提交"> 提交!< /按钮>
Then, you need to alter your SQL syntax a bit. Your query is:
然后，您需要稍微修改一下SQL语法。你查询的方法是:
$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
q = "插入用户价值(美元”,“美元的名字”,“美元电子邮件”,“密码”美元,美元性别)”;
where you tell mysql to insert those values into the "user" table but you don't tell it which columns to insert into. You need something like this:
告诉mysql将这些值插入到“user”表中，但不告诉它要插入哪些列。你需要这样的东西:
$q = "INSERT INTO user (name, email, password) VALUES ('$name', '$email', '$password', '$gender')";
$q =“插入用户(姓名、电子邮件、密码)值('$name'、'$email'、'$password'、'$gender')”;
I assume the blank string in your VALUES is supposed to reserve a spot for the ID of the insertion...if you have auto-incrementing turned on in your DB table you don't have to include the blank string. This is just a start to fix your issues, but if you include more details about what errors you're recieving we may be able to help more.
我假设您的值中的空字符串应该为插入的ID保留一个位置……如果在DB表中已打开自动递增，则不需要包含空字符串。这只是一个解决问题的开始，但是如果您包含更多关于您正在接收的错误的细节，我们可能会提供更多的帮助。
#1
2
Anyway, this particular code works out to allowing insertion into database, though there are still some problem somewhere which I cannot find out.
不管怎样，这个特殊的代码可以允许插入到数据库中，尽管在某些地方仍然有一些问题我无法找到。
index.html
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example with Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function () {
$('button').click(function () {
var name2 = $('#name').val();
var email2 = $('#email').val();
var password2 = $('#password').val();
var gender2 = $('#gender').val();
console.log('starting ajax');
$.ajax({
url: "./insert.php",
type: "post",
data: { name: name2, email: email2, password: password2, gender: gender2 },
success: function (data) {
var dataParsed = JSON.parse(data);
console.log(dataParsed);
}
});
});
});
</script>
<style>
.custom{
margin-left:200px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Insert Data Using Ajax</h2>
<form class="form-horizontal" >
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input class="form-control" name="name" id="name" type="text" placeholder="Enter you name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input class="form-control" name="email" id="email" type="text" placeholder="Your Email...">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input class="form-control" name="password" id="password" type="text" placeholder="Your Password...">
</div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<select id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
insert.php
insert.php
<?php
//Create connection
$connection = mysqli_connect('localhost', 'root', '', 'dbase');
if($_POST['name']){
$name = $_POST['name'];
$email = $_POST['email'];
$password= $_POST['password'];
$gender = $_POST['gender'];
$q = "INSERT INTO user (name, email, password, gender) VALUES ('$name', '$email', '$password', '$gender')";
$query = mysqli_query($connection, $q);
if($query){
echo json_encode("Data Inserted Successfully");
}
else {
echo json_encode('problem');
}
}
?>
#2
0
First, the jQuery event handler that you're attaching to an element with the ID "submit" is never going to fire, since it won't match any elements in your html. Change your html to something like this:
首先，您附加到ID为“submit”的元素的jQuery事件处理程序永远不会启动，因为它与html中的任何元素都不匹配。将html更改为如下所示:
<button type="submit" name="submit" id="submit"> Submit! </button>
<按钮类型="提交"名称="提交" id="提交"> 提交!< /按钮>
Then, you need to alter your SQL syntax a bit. Your query is:
然后，您需要稍微修改一下SQL语法。你查询的方法是:
$q = "INSERT INTO user VALUES ('','$name', '$email', '$password', '$gender')";
q = "插入用户价值(美元”,“美元的名字”,“美元电子邮件”,“密码”美元,美元性别)”;
where you tell mysql to insert those values into the "user" table but you don't tell it which columns to insert into. You need something like this:
告诉mysql将这些值插入到“user”表中，但不告诉它要插入哪些列。你需要这样的东西:
$q = "INSERT INTO user (name, email, password) VALUES ('$name', '$email', '$password', '$gender')";
$q =“插入用户(姓名、电子邮件、密码)值('$name'、'$email'、'$password'、'$gender')”;
I assume the blank string in your VALUES is supposed to reserve a spot for the ID of the insertion...if you have auto-incrementing turned on in your DB table you don't have to include the blank string. This is just a start to fix your issues, but if you include more details about what errors you're recieving we may be able to help more.
我假设您的值中的空字符串应该为插入的ID保留一个位置……如果在DB表中已打开自动递增，则不需要包含空字符串。这只是一个解决问题的开始，但是如果您包含更多关于您正在接收的错误的细节，我们可能会提供更多的帮助。