We Keep Coding

Having problem submitting a form without reload using jquery ajax

When i submit form it doesnot update value in database mysql.Its a form written in php.
here is my php and html. I want that the form should not reload and it must submit the changes in database without reloading the page and show preloader for 1 sec on submitting form.
HTML,PHP AND ACTION of form: Here action is the current page where this form is avalilable
detail_customer.php
<?php
$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);
if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}
if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo 'hello';
}
}
?>
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php
" method="POST" class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id ?>" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>
JS Code
index.js
$("#form-submit").on("submit", function () {
// e.preventDefault();
var form = $(this);
var formData = form.serialize();
$.ajax({
type: "POST",
url: form.attr("action"),
data: formData,
success: function (data) {
$(".alert-success").show();
$(".alert-success").fadeOut(4000);
console.log(data);
},
error: function (data) {
$(".alert-danger").show();
$(".alert-danger").fadeOut(4000);
console.log(data);
},
});
return false;
});
Ajax Success Response But not updating data in mySQL
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form-submit" action="./inc/detail_customer.php" method="POST"
class="c_form animate__animated animate__fadeIn">
<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>
<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<br />
<b>Warning</b>: Undefined variable $category_id in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>62</b><br />
" id="cat_id">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<br />
<b>Warning</b>: Undefined variable $quest_title in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>66</b><br />
" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<input name="submit" type="hidden" />
<input class="btn-primary submit-btn" type="submit" name="" value="Submit">
</div>
</form>
</div>
</div>

The condition if (isset($_POST['submit'])) { will never evaluate to true, since there is no input element in the form with name="submit" (the button with name='submit' does not send the attribute by default).
Either change the condition:
if (isset($_POST['quest_t'])) { ...
Or, include an input element with name='submit', for example:
<input name="submit" type="hidden" />
Also, make sure to move the $_POST check at the beginning of the file and ensure that no other code will be evaluated in the PHP file (e.g. the rest of the HTML code) if a POST request has been received.

Just return false after at the end of the method.
jQuery has its own way of ensuring "preventDefault()" and it is just returning false from the submit handler.
Full background on this here:
event.preventDefault() vs. return false

Issue has been solved. By changing path and then putting path of js file again.

How to submit all data from some forms in a div?

I want to make some forms in a div, and in this form, there is requirement that some form can add some input text like add a row in a table and in this div can add another div to add form to write data too. I'm already success to add data but it only works in a form because my button only can submit the data if I put it in a form. I'm new in using PHP, HTML, and JavaScript, so when I was writing code, i'm still in learning too and search many website to solve this but i'm just get the answer to submit only a form.
please help me, i'm very thankful for your response
<div id="myproyek">
<div id="formtrigger" class="content">
<form id="tableToModify" name="code" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="form-group">
<td>Create Url</td>
<td>:</td>
<td><input type="text" name="nameURL" id="nameURL" placeholder="URL"></td>
<span class="error"><?php echo $nameURLErr;?></span>
</div>
<div class="form-group">
<td>Parameter</td>
<td></td>
<td></td>
</div>
<div class="form-group">
<td>Key</td>
<td>:</td>
<td>Value</td>
</div>
<div class="form-group">
<input type="text" id="key" name="key" placeholder="Key">
<span><?php echo $keyErr ?></span>
<input type="text" id="value" name="value" placeholder="Value">
<span><?php echo $valueErr ?></span>
</div>
</form>
<input type="button" onclick="addRow()" value="Create Row" />
<div>
<label><input type="radio" name="colorRadio" value="asynchronous">Asynchronous</label>
<label><input type="radio" name="colorRadio" value="synchronous">Synchronous</label>
<div class="asynchronous box " style="display: none" >
<form id="tableAscyToModify" >
<div class="form-group">
<td>Callback Url</td>
<td>:</td>
<td><input type="text" name="createurl" placeholder="Callback URL" onfocus="this.placeholder = ''" onblur="this.placeholder = 'URL'" value="<?php echo $asyncValue?>"></td>
<span><?php echo $asyncURLErr ?></span>
</div>
<div class="form-group">
<td>Format Response</td>
<td></td>
<td></td>
</div>
<div class="form-group">
<td>Key</td>
<td>:</td>
<td>Value</td>
</div>
<div class="form-group">
<input type="text" id="item-code" name="createurl" placeholder="Key">
<span><?php echo $asyncKeyErr ?></span>
<input type="text" id="item-code" name="createurl" placeholder="Value">
<span><?php echo $asyncValueErr ?></span>
</div>
</form>
<input type="button" onclick="createRowAsyc()" value="Create Row" />
</div>
<div class="synchronous box " style="display: none">
<form id="tableSyncToModify" >
<div class="form-group">
<td>Format Response</td>
<td></td>
<td></td>
</div>
<div class="form-group">
<td>Key</td>
<td>:</td>
<td>Value</td>
</div>
<div class="form-group">
<input type="text" id="item-code" name="createurl" placeholder="Key">
<input type="text" id="item-code" name="createurl" placeholder="Value">
</div>
</form>
<input type="button" onclick="createRowSync()" value="Create Row" />
</div>
</div>
</form>
</div>
<button name="submit" id="submit">Submit</button>
// i think button should be here because i want to submit all my form
</div>
Here is my PHP Code
<?php
// define variables and set to empty values
$nameURLErr = $keyErr = $valueErr = $asyncURLErr = $asyncKeyErr = $asyncValueErr = $syncURLErr = $syncKeyErr = $syncValueErr = "";
$nameURL = $key = $value = $asyncURL = $asyncKey = $asyncValue = $syncURL = $syncKey = $syncValue = "";
if (isset($_POST['value'])) {
if (empty($_POST["nameURL"])) {
$nameURLErr = "URL is required";
} else {
$nameURL = test_input($_POST["nameURL"]);
// check if name only contains letters and whitespace
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&##\/%?=~_|!:,.;]*[-a-z0-9+&##\/%=~_|]/i",$nameURL)) {
$nameURLErr = "Only letters and white space allowed";
}
}
if (empty($_POST["key"])) {
$keyErr = "Key is required";
} else {
$key = test_input($_POST["key"]);
}
if (empty($_POST["value"])) {
$valueErr = "Value is required";
} else {
$value = test_input($_POST["value"]);
}
if (empty($_POST["asyncURL"])) {
$asyncURLErr = "URL is required";
} else {
$asyncURL = test_input($_POST["asyncURL"]);
// check if name only contains letters and whitespace
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&##\/%?=~_|!:,.;]*[-a-z0-9+&##\/%=~_|]/i",$asyncURL)) {
$asyncURLErr = "Only letters and white space allowed";
}
}
if (empty($_POST["asyncKey"])) {
$asyncKeyErr = "Key is required";
} else {
$asyncKey = test_input($_POST["asyncKey"]);
}
if (empty($_POST["asyncValue"])) {
$asyncValueErr = "Value is required";
} else {
$asyncValue = test_input($_POST["asyncValue"]);
}
$fp = fopen('data.html', 'a');
$data = '<p> URL : '.$nameURL. '</p>'.
'<p>Key : ' . $key . '<br>Value : '. $value . '</p>' .
'<p>Async URL : ' . $asyncURL . '</p>' .
'<p>Key : ' . $asyncKey . '<br>Value : ' . $asyncValue . '</p>';
;
fwrite($fp, $data);
fclose($fp);
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
Here is my Javascript code
function addRow () {
document.querySelector('#tableToModify').insertAdjacentHTML(
'beforeend',
`<form>
<div class="form-group">
<input type="text" name="name" value="" placeholder="Key" />
<input type="text" name="value" value="" placeholder="Value" />
<input type="button" value="-" onclick="removeRow(this)">
</div>
</form>`
)
}
function createRowAsyc() {
document.querySelector('#tableAscyToModify').insertAdjacentHTML(
'beforeend',
`<div class="form-group">
<input type="text" name="name" value="" placeholder="Key"/>
<input type="text" name="value" value="" placeholder="Value"/>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function createRowSync() {
document.querySelector('#tableSyncToModify').insertAdjacentHTML(
'beforeend',
`<div class="form-group">
<input type="text" name="name" value="" placeholder="Key"/>
<input type="text" name="value" value="" placeholder="Value"/>
<input type="button" value="-" onclick="removeRow(this)">
</div>`
)
}
function removeRow (input) {
input.parentNode.remove()
}
I expect the output is all the data is write in all the form, but if i put the button right in last div code, but there is nothing to change.
If i put button in
<form id="tableToModify">
</form>
data is submitted only in this data and successful submitted in text.html
Or do you have some suggestion, how i manage my form template

You can get your forms into one by using FormData()
Here we have a button element outside all forms, this will be our trigger to submit:
<div>
<form id="form-one">
<!-- the form -->
</form>
<form id="form-two">
<!-- the form -->
</form>
<button type="button" id="submit-data">
<span>Submit all forms!</span>
</button>
</div>
then in your JavaScript we collect all the FormData's into one "mothership" FormData by using loops, triggered by the button click
document.addEventListener('click', function()
{
let formData = new FormData(),
formOne = new FormData(document.getElementById('form-one')),
formTwo = new FormData(document.getElementById('form-two'));
for (let pair of formOne.entries())
{
formData.append(pair[0], pair[1])
}
for (let pair of formTwo.entries())
{
formData.append(pair[0], pair[1])
}
}, false)

my form is not posting values even though i have put method="post" in my form

my form is not posting values even though i have put method="post" and i think there is no error in my form.i have hide some input types by javascript. i am not understanding where the problem is can you rectify that ..my code is
<?php include "header.php" ?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="col-md-9" style="padding-top:10px;">
<h3 align="center">Blood Bank Registration </h3>
<form role="form" action="bbinsert.php" method="post" style="color:black">
<div class="form-group">
<input type="text" class="form-control" name="bbname" id="college" placeholder="Blood bank name" required>
</div>
<div class="form-group">
<select class="form-control" id="district" name="district" required>
<option >Select District</option>
<option value="prakasam">Prakasam</option>
<option value="guntur">Guntur</option>
<option value="Nellore">Nellore</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="mandal" name="mandal" required>
<option >Select Mandal</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="village" name="village" required>
<option >Select Village</option>
</select>
</div>
<div class="form-group" >
<input type="text" class="form-control" name="phno" placeholder="contact number" >
</div>
<p align="right">create employee<button onclick="return show();"><span class="glyphicon glyphicon-plus" ></span></button></p>
<div id="empform" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname1" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid1" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password1" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno1" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide();"><span class="glyphicon glyphicon-minus" ></span></button><button onclick="return show1();"><span class="glyphicon glyphicon-plus" ></span></button></p>
</div>
<div id="empform2" style="display:none;" >
<div class="form-group">
<input type="text" class="form-control" name="empname3" placeholder="Employee Name" >
</div>
<div class="form-group">
<input type="text" class="form-control" name="empid3" placeholder="Employee Id" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="password3" placeholder="password" >
</div>
<div class="form-group">
<input type="text"class="form-control" name="phno3" placeholder="Contact Number">
</div>
<p align="right"><button onclick="return hide2();"><span class="glyphicon glyphicon-minus" ></span></button></p><br>
</div>
<input type="submit" class="btn btn-success" value="create" >
</form>
<script>
function show() {
if(document.getElementById('empform').style.display=='none') {
document.getElementById('empform').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('empform').style.display=='block') {
document.getElementById('empform').style.display='none';
}
return false;
}
function show1() {
if(document.getElementById('empform1').style.display=='none') {
document.getElementById('empform1').style.display='block';
}
return false;
}
function hide1() {
if(document.getElementById('empform1').style.display=='block') {
document.getElementById('empform1').style.display='none';
}
return false;
}
function show2() {
if(document.getElementById('empform2').style.display=='none') {
document.getElementById('empform2').style.display='block';
}
return false;
}
function hide2() {
if(document.getElementById('empform2').style.display=='block') {
document.getElementById('empform2').style.display='none';
}
return false;
}
</script>
bbinsert.php
<?php
include "connection.php";
if (isset($_POST['submit']))
{
$bbname=$_POST['bbname'];
$district=$_POST['district'];
$mandal=$_POST['mandal'];
$village=$_POST['village'];
$phno=$_POST['phno'];
$insertbb=mysqli_query($conn,"INSERT INTO bloodbanks(bbname,bbdistrict,bbmandal,bbcity,phno)VALUES('$bbname','$district',$mandal','$village','$phno')");
if(!$insertbb)
echo "error in blood bank insertion".mysqli_error($conn);
else
echo "successfully inserted blood banks";
$emp1 = array('empname1', 'empid1', 'password1','phno1');
$emp2 = array('empname2', 'empid2', 'password2','phno2');
$emp3 = array('empname3', 'empid3', 'password3','phno3');
$error = false; //No errors yet
foreach($emp1 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error = true; //Yup there are errors
}
}
if(!$error) {
$empn1=$_POST['empname1'];
$empid1=$_POST['empid1'];
$password1=$_POST['password1'];
$phno1=$_POST['phno1'];
$insert1=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn1','$emmpid1','$password1 ','$phno1','$bbname')");
if(!$insert1)
echo "error in emp1".mysqli_error($conn);
else
echo "success emp1";
}
$error1 = false; //No errors yet
foreach($emp2 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error1 = true; //Yup there are errors
}
}
if(!$error1) {
$empn2=$_POST['empname2'];
$empid2=$_POST['empid2'];
$password2=$_POST['password2'];
$phno2=$_POST['phno2'];
$insert2=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn2','$emmpid2','$password2','$phno2','$bbname')");
if(!$insert2)
echo "error in emp2".mysqli_error($conn);
else
echo "success emp2";
}
$error3 = false; //No errors yet
foreach($emp3 AS $fieldname)
{ //Loop trough each field
if(!isset($_POST[$fieldname]) || empty($_POST[$fieldname]))
{
$error3 = true; //Yup there are errors
}
}
if(!$error3) {
$empn3=$_POST['empname3'];
$empid3=$_POST['empid3'];
$password3=$_POST['password1'];
$phno3=$_POST['phno3'];
$insert3=mysqli_query($conn,"INSERT INTO employees(name,empid,password,phno,bbname)VALUES('$empn3','$emmpid3','$password3','$phno3','$bbname')");
if(!$insert3)
echo "error in emp3".mysqli_error($conn);
else
echo "success emp3";
}
}
else
{
echo "submit method did not post the form";
}
?>
`

Your submit button doesn't have a name attribute. So no post element called "submit" exists. Put a name on your submit button if you want it to post.

Not getting any value in $_POST after from submit

I am facing a problem in my local wamp server while submitting a page in PHP
I am using post method and after submitting the form I am not getting any values in $_POST.
I searched a lot on internet but did not get any good solution.
Here is my code
<form name="form_modulesadd" id="form_modulesadd" method="POST" enctype="multipart/form-data" action="#" class="form-horizontal" >
<div class="form-group">
<label class="control-label col-md-2">Module Type<span class="required_mark">*</span></label>
<div class="col-md-7">
<select id="module_t" name="module_t" class="form-control" onchange="getProductName()">
<option value="">Select Module Type</option>
<option value="1" <?php if($data['module_type'] == '1'){ echo 'selected'; } ?> >Video Module</option>
<option value="2" <?php if($data['module_type'] == '2'){ echo 'selected'; } ?> >Qbank Module</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Product Name<span class="required_mark">*</span></label>
<div class="col-md-7">
<select id="moduleajax" name="product_n" class="form-control" onchange="getProductData()">
<option value="">Select Product Name</option>
<?php
foreach($result_product1 as $k => $data_p)
{
$selected = ($data['productId'] == $data_p['id'])?'selected': '';
echo '<option '. $selected .' value='.$data_p['id'].'>' . $data_p['product_name'] . '</option>';
}
?>
</select>
</div>
</div>
<div id="productajax">
</div>
<?php
if(!empty($data))
{
$qry_s="SELECT * FROM tbl_products WHERE status =1 and id='".$data['productId']."'";
$result_s = $modelObj->fetchRow($qry_s);
$qry = "SELECT name FROM tbl_category WHERE id = '".$result_s['categoryId']."'";
$data1 = $modelObj->fetchRow($qry);
?>
<div id="productHide">
<div class="form-group">
<label class="control-label col-md-2">Category Name</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $data1['name'] ?>" disabled/>
</div>
<br><br>
<label class="control-label col-md-2">Price</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['p_price'] ?>" disabled/>
</div><br><Br>
<label class="control-label col-md-2">Maximum Attempts</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['p_max_attempt'] ?>" disabled/>
</div><br><Br>
<?php if($data['module_type'] == '2') { ?>
<label class="control-label col-md-2">Exam Hour</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['exam_hour'] ?>" disabled/>
</div><br><br>
<label class="control-label col-md-2">Pass mark or question</label>
<div class="col-md-7">
<input class="form-control" onkeydown="call(event,this.id)" type="text" value="<?php echo $result_s['pass_mark'] ?>" disabled/>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<div class="form-group">
<label class="control-label col-md-2">Module Name<span class="required_mark">*</span></label>
<div class="col-md-7">
<input class="form-control" placeholder="Module Name" onkeydown="call(event,this.id)" type="text" name="txt_addmodulename" maxlength = "50" id="txt_addmodulename" value="<?php echo stripslashes($data['module_name']) ?>"/>
</div>
</div>
<div id="str_video" style="display: none;">
<div id="nameBoxWrap_d1">
<div class="form-group">
<label class="control-label col-md-2">Module Video<span class="required_mark">*</span></label>
<div class="col-md-7">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div>
<span class="btn btn-default btn-file"><span class="fileupload-new">Select Video</span><span class="fileupload-exists">Change</span>
<input type="file" name="name_dig[]" id="name_d1">
</span>
<span class="video_image_class">Video Image</span>
<input style="padding-right: 230px; float: right; margin-top: 3px;" type="file" name="name_vi[]" id="name_vi1">
<br><br><input type="button" value="Addmore Video" onclick="addNameSection1()" class="btn btn-primary" style="background-color: green;">
<b>Only .mp4, .flv, .ogg, .webm Video support</b>
</div>
</div>
</div>
<input type="hidden" id="addSectionCount1" value="1" name="addSectionCount1">
</div>
<?php
if(!empty($data))
{
?>
<div id="fileajax">
<div class="form-group" >
<label class="control-label col-md-2"> </label>
<div class="col-md-7">
<?php
$qry = "SELECT * FROM tbl_module_video WHERE moduleId = '".$_POST['id']."'";
$data_fl = $modelObj->fetchRows($qry);
foreach($data_fl as $d => $dav)
{
?>
<img width="50" src="<?php echo $_SESSION['FRNT_DOMAIN_NAME']."upload/module/".$dav['video_image'] ?>">
<button type="button" class="label label-danger" onclick="deletevd('<?php echo $dav['id'] ?>','<?php echo $_POST['id'] ?>');">Delete</button>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<!--<div id="str_video1">
<div id="nameBoxWrap_v1">
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<div class="col-md-10">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new img-thumbnail" style="width: 200px; height: 125px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image">
</div>
<div class="fileupload-preview fileupload-exists img-thumbnail" style="width: 200px; max-height: 125px"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileupload-new">Select Video Image</span><span class="fileupload-exists">Change</span>
<input type="file" name="name_vi" id="name_vi1" accept="image/*">
</span>
<a class="btn btn-default fileupload-exists" data-dismiss="fileupload" href="#">Remove</a>
</div>
</div>
</div>
</div>
<input type="hidden" id="addSectionCount1" value="1" name="addSectionCount1">
</div>
</div>
</div>-->
<?php if($_POST['id'] !=0):?>
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<input type="hidden" name="hid_userid" id="hid_userid" value="<?php echo $data['id'] ?>" />
<input type="hidden" name="hid_update" id="hid_update" value="update" />
<button type="submit" class="btn btn-primary" onclick="return updatedata()">Submit</button>
<button type="button" class="btn btn-default-outline" onclick="newdata();">Cancel</button>
</div>
</div>
<?php else:?>
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-7">
<input type="hidden" name="hid_add" id="hid_add" value="1" />
<button type="submit" class="btn btn-primary" onclick="return adddata()">Submit</button>
<button type="button" class="btn btn-default-outline" onclick="newdata();">Cancel</button>
</div>
</div>
<?php endif;?>
</form>
And here is my javascript from which I am call the page
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: site_url + 'controllers/ajax_controller/modules-ajax-controller.php',
type: "POST"
};
$('#form_modulesadd').submit(function() {
$(this).ajaxSubmit(options);
return false;
});
after submitting the page I am not getting any values in $_POST
this code is working fine in the server.
In local Environment it's giving problem
I am using wamp server. I have already tried with var_dump(),print_r() but not getting any result.
Any help would be appreciated.
Thanks in advance.

In your options, you should specify the data that you want to send.
var options = {
beforeSubmit: showRequest,
success: showResponse,
url: site_url + 'controllers/ajax_controller/modules-ajax-controller.php',
type: "POST",
data: {data1: "your_data", data2: "your_data"}
};
Then, try:
<?php echo $_POST["data1"]; ?>
It will show the data send, here: your_data

Use data option to send the data to the server.
var options = {
...
data: $('#form_modulesadd').serialize(),
...
};
$('#form_modulesadd').serialize() will send the data from the form.
EDIT
Try ajax:
$('#form_modulesadd').submit(function() {
$.ajax(options);
return false;
});

use <form name="form_modulesadd" id="form_modulesadd" method="POST" enctype="multipart/form-data" action="<?=site_url?>controllers/ajax_controller/modules-ajax-controller.php'" class="form-horizontal" >

how to use jquery/ajax validation in cakephp?

i have embedded jquery and and it is working ..but there is a small problem with that query... when empty form is submitted , it shows errors with fieds and the form without error...i mean.. it shows double input field... what should be the main problem behind this...?
here is contoller Action:
public function add() {
if ($this->request->is('post')) {
if(!empty($this->data)){
$this->Post->create();
if ($this->Post->save($this->data)) {
if($this->RequestHandler->isAjax()){
$this->render('success','ajax');
}
else{
$this->Session->setFlash(__('Your post has been saved.'));
$this->redirect(array('action' => 'index'));
}
}
$this->Session->setFlash(__('Unable to add your post.'));
}
}
}
public function validate_form()
{
if($this->RequestHabdler->isAjax())
{
$this->data['Post'][$this->params['form']['field']]=$this->params['form']['value'];
$this->Post->set($this->data);
if($this->Post->validates()){
$this->autoRender=false;
}
else {
$error=$this->validateErrors($this->Post);
$this->set('error',$error[$this->params['form']['field']]);
}
}
}
here is validation js file:
$(document).ready(function (){
$('#title').blur(function(){
$.post(
'/cakephp/posts/validate_form',
{field:$('#title').attr('id'),value:$('#title').val()},
handleTitleValidation
);
function handleTitleValidation(error)
{
if(error.length>0){
if($('#title-notEmpty').length==0){
$('#sending').after('<div id="notEmpty" class="error-message">'+error+"</div>");
}
}
$('#title-notEmpty').remove();
}
});
$('#body').blur(function(){
$.post(
'/cakephp/posts/validate_form',
{field:$('#body').attr('id'),value:$('#body').val()},
handleBodyValidation
);
function handleBodyValidation(error)
{
if(error.length>0){
if($('#body-notEmpty').length==0){
$('#sending').after('<div id="notEmpty" class="error-message">'+error+"</div>");
}
}
$('#body-notEmpty').remove();
}
});
});
here is add.ctp
<!-- File: /app/View/Posts/add.ctp -->
<?php echo $this->Html->script('jquery',false);?>
<?php echo $this->Html->script('validation',false);?>
<div id="success" style="background-color: lightgreen;"></div>
<h1>Add Post</h1>
<?php
echo $this->Form->create('Post');
echo $this->Form->input('title', array('id'=>'title'));
echo $this->Form->input('body', array('rows' => '3','id'=>'body'));
echo $this->Js->submit('Save Post', array(
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->get('#sending')->effect('fadeOut'),
'update'=>'#success'
) );
?>
<div id="sending" style="display:none;">
<?php echo $this->Html->image('ajax-loader.gif', array('alt' => 'Loading...')); ?>
</div>
this is what i get... html source code:
<form id="PostAddForm" accept-charset="utf-8" method="post" action="/cb/cakephp/posts/add">
<div style="display:none;">
<input type="hidden" value="POST" name="_method">
</div>
<div class="input text required error">
<label for="title">Title</label>
<input id="title" class="form-error" type="text" required="required" value="" maxlength="50" name="data[Post][title]">
<div class="error-message">This field cannot be left blank</div>
</div>
<div class="input textarea required error">
<label for="body">Body</label>
<textarea id="body" class="form-error" required="required" cols="30" rows="3" name="data[Post][body]"></textarea>
<div class="error-message">This field cannot be left blank</div>
</div>
<div class="submit">
<input id="submit-1060465790" type="submit" value="Save Post">
</div>
<div id="sending" style="display:none;">
</form>
</div>
<h1>Add Post</h1>
<form id="PostAddForm" accept-charset="utf-8" method="post" action="/cb/cakephp/posts/add">
<div style="display:none;">
<div class="input text required">
<label for="title">Title</label>
<input id="title" type="text" required="required" maxlength="50" name="data[Post][title]">
</div>
<div class="input textarea required">
<label for="body">Body</label>
<textarea id="body" required="required" cols="30" rows="3" name="data[Post][body]"></textarea>
</div>
<div class="submit">
<input id="submit-1878163930" type="submit" value="Save Post">