I am new to jquery ,i have some trouble while inserting data to mysql database using jquery. this is my html file
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
email:eml,gender:gen,qualification:qal,course1:c1,course2:c2,course3:c3},
function(data){
alert(data);
});
});
</script>
</body>
</html>
this is my php file named insert.php
<?php
$con=new mysqli("localhost","root","","flash");
$si=$_POST['si'];
$pwd1=$_POST['pwd1'];
$pwd2=$_POST['pwd2'];
$eml=$_POST['eml'];
$gen=$_POST['gen'];
$qal=$_POST['qal'];
$c1=$_POST['c1'];
$c2=$_POST['c2'];
$c3=$_POST['c3'];
$sql="INSERT INTO staff(staff_id,password,email_id,gender,qualification,course_1,course_2,course_3) VALUES('$si','$pwd2','$eml','$gen','$qal','$c1','$c2','$c3')";
$con->query($sql);
?>
nothing will happen while i click submit button
please anyone help me to solve this issue
Try to use the non-slim build, available here http://jquery.com/download/, such as:
https://code.jquery.com/jquery-3.3.1.min.js
Also you had issue while making the json for the post, here is the rectified version
<!DOCTYPE html>
<html>
<head>
<title>
staff registration
</title>
<body>
<form>
Staff Id:<input type="text" id="staffid"><br>
Password:<input type="password" id="password1"><br>
Re-enter Password:<input type="password" id="password2"><br>
Email:<input type="email" id="email"><br>
Gender:<input type="text" id="gender"><br>
Qualification:<input type="text" id="qualification"><br>
Course 1:<input type="text" id="course1"><br>
Course 2:<input type="text" id="course2"><br>
Course 3:<input type="text" id="course3"><br><br>
<input type="submit" id="submit" value="CREATE">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#submit").click(function(){
var staffid=$("#staffid").val();
var password1=$("#password1").val();
var password2=$("#password2").val();
var email=$("#email").val();
var gender=$("#gender").val();
var qualification=$("#qualification").val();
var course1=$("#course1").val();
var course2=$("#course2").val();
var course3=$("#course3").val();
$.post("insert.php",{si:staffid,pwd1:password1,pwd2:password2,
eml:email,gen:gender,qal:qualification,c1:course1,c2:course2,c3:course3},
function(data){
alert(data);
});
});</script>
</body>
</html>