how to insert value into data base using jquery/ajax? - php

Question

index.php
<script>
$(document).ready(function(){
$(".submit").click(function(){
var formname = $(this).parents("form").attr("id");
cname = $("#"+formname+" #cname").val();
name = $("#"+formname+" #name").val();
fname = $("#"+formname+" #fname").val();
email = $("#"+formname+" #email").val();
phone = $("#"+formname+" #phone").val();
x = $("#"+formname+" #x").val();
xii = $("#"+formname+" #xii").val();
qualify = $("#"+formname+" #qualify").val();
$.ajax({
type:"POST",
data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify},
url:"enquiry.php",
success:function(data){
$("#"+formname+" #msg").html(data);
}
});
});
});
</script>
Enquire</span>
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="msg"></div>
<form method="post" name="formid<?php echo $id; ?>" name="formname<?php echo $id; ?>">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
<input type="text" name="email" id="email" placeholder="Enter Your Email">
<input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
<input type="text" name="x" id="x" placeholder="Enter Your X Percent">
<input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
<input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
<input type="submit" class="submit" name="" id="submit" value="submit" class="btn btn-primary">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
enquiry.php
<?php
$cname = $_POST['cname'];
$name = $_POST['name'];
$fname = $_POST['fname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$x = $_POST['x'];
$xii = $_POST['xii'];
$qualify = $_POST['qualify'];
$sql = "insert into student_enquiry(college_name,name,father,email,phone,x_percent,xii_percent,qualify)values('$cname','$name','$fname','$email','$phone','$x','$xii','$qualify')";
$result = mysqli_query($link,$sql);
if($result == true)
{
echo "<p style='color:green;text-align:center;'>your data has been submitted successfully</p>";
}
else
{
echo "<p style='color:red;text-align:center;'>Error!</p>"
}
?>
In this code I am creating a modal having form inside it and I want to insert form value into database using jquery/ajax. when I clcik on submit button it hide the modal and show nothing like successfull msg or any error msg. So, How can I do this ?please help.
Thank You

Answer 1

Check Below jquery code and html code
$(document).ready(function () {
$(".submit").click(function () {
var formname = "formid"+$(this).attr("data-id");
cname = $("#" + formname + " #cname").val();
name = $("#" + formname + " #name").val();
fname = $("#" + formname + " #fname").val();
email = $("#" + formname + " #email").val();
phone = $("#" + formname + " #phone").val();
x = $("#" + formname + " #x").val();
xii = $("#" + formname + " #xii").val();
qualify = $("#" + formname + " #qualify").val();
$.ajax({
type: "POST",
data: {"cname": cname, "name": name, "fname": fname, "email": email, "phone": phone, "x": x, "xii": xii, "qualify": qualify},
url: "enquiry.php",
success: function (data) {
$("#" + formname + " #msg").html(data);
}
});
});
});
HTML CODE
Enquire</span>
<div class="modal fade" id="myModal<?php echo $id; ?>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="msg"></div>
<form method="post" name="formid<?php echo $id; ?>" name="formid<?php echo $id; ?>">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
<input type="text" name="email" id="email" placeholder="Enter Your Email">
<input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
<input type="text" name="x" id="x" placeholder="Enter Your X Percent">
<input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
<input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
<input type="button" class="submit" name="submit" data-id="<?php echo $id; ?>" id="submit" value="submit" class="btn btn-primary">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 2

Give an id to the form element.
<form method="post" id="registration">
Submit the form as follows:
var formdata = jQuery('#registration').serialize();
jQuery.ajax({
type: 'POST',
url: 'enquiry.php',
dataType: 'json',
data: formdata,
success: function(result) {
$("#msg").html(data);
}
});

Answer 3

Try below example for save data using ajax,
JS/CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
cname = $("#cname").val();
name = $("#name").val();
fname = $("#fname").val();
email = $("#email").val();
phone = $("#phone").val();
x = $("#x").val();
xii = $("#xii").val();
qualify = $("#qualify").val();
$.ajax({
type:"POST",
data:{"cname":cname,"name":name,"fname":fname,"email":email,"phone":phone,"x":x,"xii":xii,"qualify":qualify},
url:"enquiry.php",
success:function(data){
$("#msg").html(data);
}
});
});
});
</script>
HTML
Enquire</span>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="msg"></div>
<form method="post">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="text" name="fname" id="fname" placeholder="Enter Your Father's Name"><br/>
<input type="text" name="email" id="email" placeholder="Enter Your Email">
<input type="text" name="phone" id="phone" placeholder="Enter Your Phone"><br/>
<input type="text" name="x" id="x" placeholder="Enter Your X Percent">
<input type="text" name="xii" id="xii" placeholder="Enter Your XII Percent"><br/>
<input type="text" name="qualify" id="qualify" placeholder="Enter Your Qualifying Exam(Optional)"><br/><br/>
<input type="button" name="" id="submit" value="submit" class="btn btn-primary">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ajax File.
In this file you can get posted data and save them.
<?php
// Your mysql query.
$insert = mysql_query("insert into `table_name` set `field1`=''");
if($insert){
echo "Inserted successfully !";
}
else{
echo "Not Inserted !";
}
?>