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.
Related
I currently have a form that is multi-step; it doesn't do anything fancy per step, it simply does display: none on the previous step to hide the previous fields and move the user forward.
It submits via AJAX and has required fields.
Is there any way to capture the data from each step of the form, and then, if the user drops off or never submits the form, send the captured data - I'm not worried about any issues in regards to data protection, as it doesn't apply in this situation.
The form basically looks like this:
<form>
<div class="step-1">
<label>First Field
<input type="text" id="field1" name="field1" maxlength="50">
</label>
<label>Second Field
<input type="text" id="field2" name="field2" maxlength="50">
</label>
next step
</div>
<div class="step-2">
<label>Third Field
<input type="text" id="field3" name="field3" maxlength="50">
</label>
<label>Fourth Field
<input type="text" id="field4" name="field4" maxlength="50">
</label>
<input type="submit" id="send" name="submit" />
<span id="submitdata"></span>
</div>
</form>
The bit I'm struggling with is knowing when the user drops... Does it need to invoke some kind of session per the form?
You could automatically submit the form when the user leaves the page, using the beforeUnload event:
var notSubmitted = true;
$('form').on('submit', function() { notSubmitted = false; });
$(window).on("beforeunload", function() {
return notSubmitted ? $('form').submit() : null;
})
$("form").submit(function (e) {
e.preventDefault();
// ... ajax submission goes here ...
return false;
});
If you need to record that it is a 'by default' submission, then you could use a hidden form element instead of the variable notSubmitted. The hidden element would give you that data in the form.
Try this code:
$(document).ready(function () {
//alert("hi");
setTimeout(function () {
$("#msg").hide(1000);
}, 3000);
$("form#product_form").submit(function (e) {
//alert('hi');
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: '<?php echo site_url('C_home/pro_add'); ?>',
type: "POST",
data: formData,
dataType: "json",
contentType: false,
processData: false,
success: function (result) {
//alert(result);
$("#product_form").trigger('reset');
window.location.href = "<?php echo site_url('C_home/data_tbl'); ?>";
}
});
return false;
});
$("#product_form").validate({
rules: {
name: "required",
category_id: "required",
image: "required",
description: "required",
qty: "required",
price: "required"
},
messages: {
name: "Product name is required",
category_id: "Please Select Category name",
image: "Plases Select Product Image",
description: "Product Description is required",
qty: "Product Quantity is required",
price: "Product Price is required",
}
})
});
<script src="<?php echo base_url(); ?>assets/js/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>assets/js/jquery.validate.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/wizard.js"></script>
<div class="wizard-container">
<div class="card wizard-card ct-wizard-orange" id="wizard">
<form id="product_form" method="POST" enctype="multipart/form-data">
<div class="wizard-header">
<h3>
Jquery Accordion
</h3>
</div>
<ul>
<li>Product Panel 1</li>
<li>Product Panel 2</li>
<li>Product Panel 3</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="about">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Product Name" required="" />
</div>
<div class="form-group">
<label>Select Category</small></label>
<select class="form-control" id="category_id" name="category_id" required="">
<option></option>
<!-- <option>--Select Category Name--</option> -->
<?php
foreach ($category as $row) {
?>
<option value="<?php echo $row['category_id']; ?>"><?php echo $row['category_name']; ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="account">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="picture-container">
<div class="picture">
<img src="<?php echo base_url(); ?>assets/img/default-avatar.png" style="height: 100px;" class="picture-src" id="wizardPicturePreview" title=""/>
<input type="file" class="form-control" name="image" id="wizard-picture" required="">
</div>
<h6>Choose Picture</h6>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Product Description</label>
<textarea class="form-control" name="description" id="description" placeholder="Enter Product Description" rows="5" required></textarea>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="address">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label>Product Qty</label>
<input type="text" class="form-control" name="qty" id="qty" placeholder="Enter Product Qty" required />
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" id="price" placeholder="Enter Product Price" required />
</div>
</div>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<button type='button' class='btn btn-next btn-fill btn-warning btn-wd btn-sm' name='next' id="next" />Next</button>
<button type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='submit' value='Submit' />Submit</button>
</div>
<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd btn-sm' name='previous' id="prev" value='Previous' />
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
As soon as the form is submitted, the form is not validated and the modal is closed because the page is refreshed. I want the modal to stay open on submitting the form. The php is given below:
<?php
$nameerror = $studentiderror = $emailerror = "";
$subject = "Thank you for voting!";
$body = "Dear $_POST["name"], Thank you for voting for this sustainable initiative. Your vote is appreciated! Lots of love from the Beefarm Committee of the Erasmus Sustainability Hub!";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if ($_POST["submit"]) {
if (empty(($_POST["name"])) {
$nameerror = "Please enter your name" }
if (empty($_POST["studentID"])) {
$studentiderror .= "Please enter your student ID";
} else {
$result = "Thank you for voting!";
mail($_POST["email"], $subject, $body);
}
};
}
Here is the HTML of the modal, the PHP is embedded in the HTML, where the error messages should be shown when the form is validated after submission:
<div class="container">
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Vote!</h4>
</div>
<div class="modal-body">
<p>
Let us know what you think! <br/>
By voting, you as a student can have a say in the realisation of this project. Even if you vote
against having bees on campus, your vote is appreciated! <br/>
Thank you!
</p>
<form id="votingscreen" method="POST">
<?php echo $result ?>
<div class="form-group">
<label for="name">Name</label>
<?php echo $nameerror ?>
<input style="width: 180px" type="text" id="name" name="name" class="form-control" placeholder="Your name">
</div>
<div class="form-group">
<label for="studentID">Student ID</label>
<?php echo $studentiderror ?>
<input style="width: 180px" type="text" id="studentID" name="studentID" class="form-control" placeholder="123456AB">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<?php echo $emailerror ?>
<input style="width: 180px" type="email" id="email" name="email" class="form-control" placeholder="E-mail">
</div>
<hr />
<div class="radiogroup">
<label for="radiogroup"> Bees on campus? </label>
<label class="radio-inline">
<input type="radio" name="vote" id="voteyesradio" value="yes" checked>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="vote" id="votenoradio" value="no">
No
</label>
</div>
<div class="form-group">
<input type="submit" name="submit" id="submitButton" class="btn btn-success btn-block" value="Vote!"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
This is the JS code:
$(".contentContainer").css("min-height", $(window).height());
$("#image").css("min-height", $("#beeweek").height());
$(document).ready(function () {
$("#submitButton").click(function () {
$("#myModal").modal('show');
})
});
$(".video-container").css("min-height", $(window).height());
If you don't want the page being refreshed, you should submit your form using Ajax, this link should help you, jQuery Ajax POST example with PHP
I am validating form with jquery. So when form submit i am using event.preventDefault(); after validate form , form will be submit to respective action page.But in my case it doesn't work.
Code what i did-
$('form[name=contact_form]').submit(function(event) {
event.preventDefault();
var formData = $('form[name=contact_form]').serialize();
var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length;
var intRegex = /[0-9 -()+]+$/;
var alert = $('#contact_alert');
var success = $('#contact_success');
if(phone==0){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>");
}
else if((phone < 10)){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>");
return false;
}else{
return true;
}
});
Html Page :
<?php
echo form_open_multipart('home/inquiry', array('name' => 'contact_form'));
?>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="form_type" value="C">
<input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/>
</div>
</div>
<div class="col-md-12">
<textarea class="form-control" name="MESSAGE" id="user-message" placeholder="Message"></textarea>
</div>
<div class="col-md-12 text-left">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-warning">
</div>
</div>
</div>
<?php echo form_close(); ?>
Do not call event.preventDefault(); if you want the form to be submitted after it validates ok.
Returning false after failed validation is enough.
$(this).submit();
When it's valid.
Try to replace the return true; for $(this).submit();
I usually do something like
$("#submit").submit(function(e){
if(validateFields() == true){ //If all fields are valid
$("#submit").submit();
}
else{
e.preventDefault(e);
}
});
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" >
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">