How To - Alert ,in Jquery Ajax Form, After Successful Form Submission?
I am trying to submit a PHP form, via jquery $.ajax(); . Its submitting successfully, but when I am trying to alert a message- alert(SUCCESS); on success. It's not. Any guesses ? C
Solution 1:
SUCCESS is not a variable but a string. You need to put quotes around it like alert("SUCCESS");
Also the use of .success and .error methods have been deprecated. Use .done and .fail instead or you can simply do the following
$.ajax({
url: 'basic_cms_manager_home_fb_form_submit.php',
type: 'POST',
data: formData,
cache: false,
dataType: 'json',
success: function(data)
{
alert("SUCCESS");
console.log('SUCCESS: ' + data.success);
},
error: function(jqXHR, textStatus, errorThrown)
{
// Handle errors hereconsole.log('ERRORS: ' + textStatus);
},
complete: function()
{
// STOP LOADING SPINNER
}
});
Another thing
Typeof null returns an object, so if data.errors is null, your check will fail. Consider doing
if (!data.errors) {
...
}
if you want to persist with your code.
Solution 2:
- Make sure that
datais valid JSON data.erroris from the server, it might not be what you think it is. Useconsole.logto determine its true value. Further more, change it to something more meaningful like
data.status => 'success' or 'fail'
Solution 3:
Simple. Remove - dataType:'json'; & send all data using - formdata.
<?php/**
* Created by PhpStorm.
* User: Taz
* Date: 9/29/2016
* Time: 5:37 PM
*/?><html><head><title>Ajax Image Upload Using PHP and jQuery</title><linkrel="stylesheet"href="style.css" /><linkhref='http://fonts.googleapis.com/css?family=Roboto+Condensed|Open+Sans+Condensed:300'rel='stylesheet'type='text/css'><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="text/javascript">
$(document).ready(function (e) {
$("#uploadimage").on('submit',(function(e) {
e.preventDefault();
$("#message").empty();
$('#loading').show();
$.ajax({
url: "ajax_upload_image_submit.php", // Url to which the request is sendtype: "POST", // Type of request to be send, called as methoddata: newFormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)contentType: false, // The content type used when sending data to the server.cache: false, // To unable request pages to be cachedprocessData:false, // To send DOMDocument or non processed data file it is set to falsesuccess: function(data) // A function to be called if request succeeds
{
$('#loading').hide();
$("#message").html(data);
}
});
}));
// Function to preview image after validation
$(function() {
$("#file").change(function() {
$("#message").empty(); // To remove the previous error messagevar file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewing').attr('src','noimage.png');
$("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
returnfalse;
}
else
{
var reader = newFileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
functionimageIsLoaded(e) {
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '250px');
$('#previewing').attr('height', '230px');
};
});
</script><style>body {
font-family: 'Roboto Condensed', sans-serif;
}
h1
{
text-align: center;
background-color: #96DAD1;
height: 70px;
color: rgb(95, 89, 89);
margin: 00 -29px0;
padding-top: 14px;
font-size: 35px;
}
.main {
position: absolute;
top: 50px;
left: 20%;
width: 450px;
height:530px;
border: 2px solid gray;
}
.mainlabel{
color: rgba(0, 0, 0, 0.71);
margin-left: 60px;
}
#image_preview{
position: absolute;
font-size: 30px;
top: 100px;
left: 100px;
width: 250px;
height: 230px;
text-align: center;
line-height: 180px;
font-weight: bold;
color: #C0C0C0;
background-color: #FFFFFF;
overflow: auto;
}
#selectImage{
padding: 19px21px14px15px;
position: absolute;
bottom: 0px;
width: 414px;
background-color: #EDFCFF;
}
.submit{
font-size: 16px;
background: linear-gradient(#ffbc005%, #ffdd7f100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 300px;
border-radius: 5px;
padding: 10px0;
outline: none;
margin-top: 20px;
margin-left: 15%;
}
.submit:hover{
background: linear-gradient(#ffdd7f5%, #ffbc00100%);
}
#file {
color: red;
padding: 5px;
border: 5px solid #96DAD1;
background-color: #96DAD1;
margin-top: 10px;
margin-left: 15%;
width: 72%;
}
#message{
position:absolute;
top:120px;
left:815px;
}
#success
{
color:green;
}
#invalid
{
color:red;
}
#line
{
margin-top: 274px;
}
#error
{
color:red;
}
#error_message
{
color:blue;
}
#loading
{
display:none;
position:absolute;
top:50px;
left:850px;
font-size:25px;
}
</style></head><body><divclass="main"><h1>Facebook Update</h1><br/><hr><formid="uploadimage"action=""method="post"enctype="multipart/form-data"><divid="image_preview"><imgid="previewing"src="noimage.png"width="250"height="230" /></div><hrid="line"><divid="selectImage"><label>Select Your Image</label><br/><inputtype="file"name="file"id="file"required /><label>FB Link</label><br/><inputtype="text"name="fb_link"id="fb_link"required /><label>Show/Hide Status</label><br/><selectname="show_fb"class="myselect"required><optionvalue="">---Select---</option><optionvalue="1">Show</option><optionvalue="0">Hide</option></select><inputtype="submit"value="Upload"class="submit" /></div></form></div><h4id='loading' >loading..</h4><divid="message"></div></body></html>
Post a Comment for "How To - Alert ,in Jquery Ajax Form, After Successful Form Submission?"