I want to submit my form data when I click the save1 button without refreshing the page using ajax and jquery. I'm new at it, please help. This is my script for jquery and ajax. Here I'm storing all the data fields inside array as my form fields can be generated dynamically. When I skip the jquery and ajax part, and submit the form data using form action='savedata.php' then the data is being inserted into database. But then the page is being redirected to the savedata.php file.
<script type="text/javascript">
$(document).ready(function()
{
$('input[name="instituteName[]"]').each(function(){
instituteName.push($(this).text());
});
var universityName= [];
$('input[name="universityName[]"]').each(function(){
universityName.push($(this).text());
});
var duration= [];
$('input[name="duration[]"]').each(function(){
duration.push($(this).text());
});
var division= [];
$('input[name="division[]"]').each(function(){
division.push($(this).text());
});
var obtained= [];
$('input[name="obtained[]"]').each(function(){
obtained.push($(this).text());
});
var course_type= [];
$('input[name="course_type[]"]').each(function(){
course_type.push($(this).text());
});
var major= [];
$('input[name="major[]"]').each(function(){
major.push($(this).text());
});
var roll_no= [];
$('input[name="roll_no[]"]').each(function(){
roll_no.push($(this).text());
});
var building_no= [];
$('input[name="building_no[]"]').each(function(){
building_no.push($(this).text());
});
var city= [];
$('input[name="city[]"]').each(function(){
city.push($(this).text());
});
var state= [];
$('input[name="state[]"]').each(function(){
state.push($(this).text());
});
var pin= [];
$('input[name="pin[]"]').each(function(){
pin.push($(this).text());
});
var landline= [];
$('input[name="landline[]"]').each(function(){
landline.push($(this).text());
});
var mark_sheets= [];
$('input[name="mark_sheets[]"]').each(function(){
mark_sheets.push($(this).text());
});
var degree_certificate= [];
$('input[name="degree_certificate[]"]').each(function(){
degree_certificate.push($(this).text());
});
var provisional_degree= [];
$('input[name="provisional_degree[]"]').each(function(){
provisional_degree.push($(this).text());
});
$.ajax({
url:"save_secondary_details.php",
method:"POST",
data:{instituteName:instituteName, universityName:universityName, duration:duration, division:division, obtained:obtained, course_type:course_type, major:major, roll_no:roll_no, building_no:building_no, city:city, state:state, pin:pin, landline:landline, mark_sheets:mark_sheets, degree_certificate:degree_certificate, provisional_degree:provisional_degree},
success:function(data)
{
alert(data);
}
});
});
});
</script>
I'm trying to pass all the values stored in my form inputs to ajax and then store it into database.
This is my PHP code:
<?php
include('../includes/dbconnection.php');
//error_reporting(0);
if(isset($_POST['save1']))
{
$email="farhan.khan@ifim.edu.in";
$instituteName= $_POST['instituteName'];
$universityName= $_POST['universityName'];
$duration= $_POST['duration'];
$division= $_POST['division'];
$obtained= $_POST['obtained'];
$course_type= $_POST['course_type'];
$major= $_POST['major'];
$roll_no= $_POST['roll_no'];
$building_no= $_POST['building_no'];
$city= $_POST['city'];
$state= $_POST['state'];
$pin= $_POST['pin'];
$landline= $_POST['landline'];
$mark_sheets= $_POST['mark_sheets'];
$degree_certificate= $_POST['degree_certificate'];
$provisional_degree= $_POST['provisional_degree'];
foreach ($instituteName as $key => $value) {
$save= "INSERT INTO `candidate_secondary_education`(`email`,`inst_name`,`board`,`duration`,`percentage`,`obtained`,`course_type`,`majored_in`,`reg_no`,`street`,`city`,`state`,`pin`,`contact`,`mark_sheet`,`degree`,`provisional_degree`) VALUES ('$email','$value','$universityName[$key]','$duration[$key]','$division[$key]','$obtained[$key]','$course_type[$key]','$major[$key]','$roll_no[$key]','$building_no[$key]','$city[$key]','$state[$key]','$pin[$key]','$landline[$key]','$mark_sheets[$key]','$degree_certificate[$key]','$provisional_degree[$key]')";
$query = mysqli_query($con, $save);
if(!$query)
{
echo mysqli_error($con);
}
else
{
echo '<script type="text/javascript">';
echo 'alert("Saved.");';
echo '</script>';
}
}
}
?>
But the data is not being inserted into database.
This is my HTML file:
<div class="row">
<div class="col-md-12 col-sm-12 ">
<div class="x_panel tile " >
<div class="x_title">
<h2>Secondary Education Details</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<form class="form-horizontal form-label-left" method="post" id="secondary_education_details" action="save_secondary_details.php">
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="institute-name">Name of the Institute/School/College: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="instituteName[]" required="required" class="form-control ">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="university-name">Board/University: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="universityName[]" required="required" class="form-control ">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="duration">Duration of Study (specify month & year): <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="duration[]" required="required" class="form-control ">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="division">Division/Class/% : <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="division[]" required="required" class="form-control ">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="degree-obtained">Degree Obtained : <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<p style="
margin-top:8px;">
Yes:
<input type="radio" class="flat" name="obtained[0]" value="yes" required="required" />
No:
<input type="radio" class="flat" name="obtained[0]" value="no" />
</p>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="course-type">Course Type: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<p style="
margin-top:8px;">
Regular:
<input type="radio" class="flat" name="course_type[0]" value="regular" required="required" />
Distance:
<input type="radio" class="flat" name="course_type[0]" value="distance" />
</p>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="major">Majored in:<span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="major[]" required="required" class="form-control ">
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="roll-no">Student ID/Enrolment/Registration/Roll No: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" name="roll_no[]" required="required" class="form-control ">
</div>
</div>
<br><h4><center>Address of Institute/School/College</center></h4><br>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="building-no">Building No & Street: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<textarea class="form-control" name="building_no[]" required="required" ></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="city">City: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" class="form-control" name="city[]" required="required" >
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="state">State: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" class="form-control" name="state[]" required="required" >
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="pin">PIN: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" class="form-control" name="pin[]" required="required" >
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="landline">Landline: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" class="form-control" name="landline[]" required="required" >
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="mark-sheets">Mark Sheets: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="file" name="mark_sheets[]" required="required" >
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="degree-certificate">Degree Certificate: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="file" name="degree_certificate[]" required="required" >
</div>
</div>
<div class="form-group row" >
<label class="col-form-label col-md-3 col-sm-3 label-align" for="provisional-degree">Provisional Degree certificate: <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 ">
<input type="file" name="provisional_degree[]" required="required" >
</div>
</div>
<div id="001">
</div>
<div class="row">
<span id="result"></span>
</div>
<div class="row" style="margin-top:40px;">
<div class="col-md-6 offset-md-9">
<button type="button" name="add1" value="Add more" id="add1" class="btn btn-success btn-lg" style=" padding: 12px;
width: 154px;border-radius: 10px;
">Add more</button>
<button type="submit" name="save1" id="save1" value="Save1" class="btn btn-info btn-lg" style=" padding: 12px;
width: 154px;border-radius: 10px;background-color: #3f51b5;
">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
