I am trying to pass PHP echo values through AJAX, but on success function AJAX skips the if and else conditions and executes the else statements even when the if condition is met.
Below is my php and ajax code
process_postadd.php
if(isset($_POST['btn-postAdd'])){
$istate = strip_tags($_POST['txt_istate']);
$iname = strip_tags($_POST['txt_iname']);
if(empty($iname)){
echo '1'; //check if iten name is empty
}
else{
try
{
if($insertItem = $postItem->postAdd($istate,$iname)){
echo "ok"; //sucessfully inserted
}
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
}
script.js
$('document').ready(function()
{
/* validation */
$("#postAddForm").validate({
rules:
{
txt_istate: {
required: true
},
txt_iname: {
required: true
},
},
messages:
{
txt_istate: {
required: "state required"
},
txt_iname: {
required: "item name required"
},
},
submitHandler: submitForm
});
/* validation */
/* postadd submit */
function submitForm()
{
var data = $("#postAddForm").serialize();
$.ajax({
type : 'POST',
url : 'process_postadd.php',
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-postAdd").html('<span class="glyphicon glyphicon-transfer"></span> posting ...');
},
success : function(response)
{
if(response == "ok"){
$("#btn-postAdd").html('<img src="btn-ajax-loader.gif" /> Submiting item ...');
setTimeout(' window.location.href = "index.php"; ',4000);
}
else if(response == "1"){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Sorry, add item name</div>');
$("#btn-postAdd").html('<span class="glyphicon glyphicon-log-in"></span> SIGN U');
});
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-postAdd").html('<span class="glyphicon glyphicon-log-in"></span> Submit Item');
});
}
}
});
return false;
}
/* postadd submit */
});
HTML code
<div class="col-sm-12">
<div id="error">
<!-- error will be shown here ! -->
</div>
<form method= "POST" class="form-horizontal" enctype="multipart/form-data" id="postAddForm">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label">Item condition</label>
<div class="col-md-8">
<label class="radio-inline" for="radios-00">
<input name="txt_istate" id="radios-00" value="New"
type="radio">
New</label>
<label class="radio-inline" for="radios-11">
<input name="txt_istate" id="radios-11" value="Used"
type="radio">
Used </label>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="Adtitle">Item Name</label>
<div class="col-md-8">
<input id="Adtitle" name="txt_iname" placeholder="name of item"
class="form-control input-md" type="text">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<button class="btn btn-success" name="btn-postAdd" id="btn-postAdd" type="submit">
<span class="glyphicon glyphicon-log-in"></span> Submit Item
</button>
</div>
</fieldset>
</form>
</div>
I'm not sure but try json_encode with your echo and add a console.log(response) for check the return
if($insertItem = $postItem->postAdd($istate,$iname)){
echo json_encode("ok"); //sucessfully inserted
}
and
if(empty($iname)){
echo json_encode('1'); //check if iten name is empty
}
This should work, I don't think in your php you actually need to check if the name is not empty, you already did that using `jquery.validate();'
On your success delete this
else if(response == "1"){
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> Sorry, add item name</div>');
$("#btn-postAdd").html('<span class="glyphicon glyphicon-log-in"></span> SIGN U');
});
}
and also on your php remove this
if(empty($iname)){
echo '1'; //check if iten name is empty
}
That have been already taken care by your rules in validate()
Then your code will look like :
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript" src="admin_assets/js/validation.min.js"></script>// ignore this was for my test
<script type="text/javascript">
$('document').ready(function()
{
/* validation */
$("#postAddForm").validate({
rules:
{
txt_istate: {
required: true
},
txt_iname: {
required: true
},
},
messages:
{
txt_istate: {
required: "state required"
},
txt_iname: {
required: "item name required"
},
},
submitHandler: submitForm
});
/* validation */
/* postadd submit */
function submitForm()
{
var data = $("#postAddForm").serialize();
$.ajax({
type : 'POST',
url : 'process_postadd.php',
data : data,
beforeSend: function()
{
$("#error").fadeOut();
$("#btn-postAdd").html('<span class="glyphicon glyphicon-transfer"></span> posting ...');
},
success : function(response)
{
if(response == "ok"){
$("#btn-postAdd").html('<img src="btn-ajax-loader.gif" /> Submiting item ...');
setTimeout(' window.location.href = "index.php"; ',4000);
}
else{
$("#error").fadeIn(1000, function(){
$("#error").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-postAdd").html('<span class="glyphicon glyphicon-log-in"></span> Submit Item');
});
}
}
});
return false;
}
/* postadd submit */
});
</script>
<div id="error"></div>
<form method="POST" id="postAddForm" action="">
<input type="text" name="txt_istate" id="txt_istate">
<input type="text" name="txt_iname" id="txt_iname">
<button type="submit" name="btn-postAdd" id="btn-postAdd">submit</button>
</form>
Ignore my form it was for testing purposes on my side. You have your form already
then your php
<?php
if (isset($_POST['btn-postAdd'])) {
$istate = strip_tags($_POST['txt_istate']);
$iname = strip_tags($_POST['txt_iname']);
try {
if ($insertItem = $postItem->postAdd($istate, $iname)) {
echo "ok"; //sucessfully inserted
} else {
echo "could not add item";
}
}
catch (PDOException $e) {
echo $e->getMessage();
}
}
?>
You good to go now.
Also take into consideration the comment from Auris.