I want to submit form data to the database using Ajax, It has image date and some more values which are not inserted into a database
I am trying this in localhost with PHP and mySQL
<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var candidate_key=$("#candidate_key").val();
var candidate_employer=$("#candidate_employer").val();
var candidate_ex=$("#candidate_ex").val();
var optionyes=$("#optionyes").val();
var e_date=$("#e_date").val();
var s_date=$("#s_date").val();
var candidate_ctc_ex=$("#candidate_ctc_ex").val();
var candidate_ctc=$("#candidate_ctc").val();
var candidate_email=$("#candidate_email").val();
var candidate_address=$("#candidate_address").val();
var candidate_mobile=$("#candidate_mobile").val();
var candidate_name=$("#candidate_name").val();
var mms_pic=$("#mms_pic").val();
if( candidate_mobile!="" && candidate_email!="" && candidate_name!=""){
$.ajax({
url: "index1.php",
type: "POST",
mimeType:"multipart/form-data",
data: {
candidate_key:candidate_key,
candidate_employer:candidate_employer,
candidate_ex:candidate_ex,
optionyes:optionyes,
e_date:e_date,(This is the date which is in the proper format i am taking from date picker yy-mm-dd)
s_date:s_date,
candidate_ctc_ex:candidate_ctc_ex,
candidate_ctc:candidate_ctc,
candidate_email:candidate_email,
candidate_address:candidate_address,
candidate_mobile:candidate_mobile,
candidate_name:candidate_name,
mms_pic:mms_pic (This is the picture or document file) },
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
console.log(dataResult);
if(dataResult.statusCode==200){
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
});}
else{
alert('Please fill all the field !');
}
});
});
</script>
Uncaught SyntaxError: Unexpected token o in JSON at position
Be sure to check you’re not attempting to JSON.parse() an already parsed JSON object.
Remove this line from your success callback to confirm.
Related
I created a form. I added many validations as requirement like required all fields. Check duplicate fields. Now I want if form submitted successfully without error reset my form if it has any error like duplicate email then show error Duplicate data found and don't reset form. I completed my code but tucked in a place I m returning false then it's not showing an error which I mentioned din called PHP file. So, how can I do it without using JSON?
$("#create_stock_out").click(function(){
var form= new FormData();
var subject = $("#subject").val();
var slip_no = $("#slip_no").val();
var warehouse = $("#warehouse").val();
var vendor = $("#vendor").val();
var issued_by = $("#issued_by").val();
var received_by = $("#received_by").val();
var project = $("#project").val();
form.append('subject',subject);
form.append('slip_no',slip_no);
form.append('warehouse',warehouse);
form.append('vendor',vendor);
form.append('issued_by',issued_by);
form.append('received_by',received_by);
form.append('project', project);
form.append('method', "stock_out");
$.ajax({
url: 'Function/Function.php',
type: 'post',
data: form,
contentType: false,
cache: false,
processData:false,
success:function(data){
//alert(data);
$('#stock_out_result').html(""+data+"");
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
$(this).remove();
});
}, 5000);
}
});
});
I want to display the values in datatable. How to retrieve the object value in ajax success function..
AJAX
$(function(){
$(document).on("click", "#submits", function(e) {
e.preventDefault();
var password = $("#password").val();
alert(password);
$.ajax({
type: "POST",
url: "db/add.php",
data: "password="+password,
success: function(results){
alert( "Data Saved: " + results );
var obj = JSON.parse(results);
}
});
e.preventDefault();
});
});
</script>
Perhaps you can try this -
$("#submits").bind("click", function(e) {
$.ajax({
type : "POST",
dataType : "json",
cache : false,
url : "db/add.php",
data : "password="+password,
success : function(results) {
alert("Data Saved: "+results);
var userInfo = JSON.parse(results);
//Output the data to an HTML element - example...
$(".user-name").html(userInfo.patient_name);
}else{
console.log('No user info found');
}
},
error : function(a,b,c) {
console.log('There was an error getting user info.');
}
});
});
//HTML element for data
<p class="user-name"></p>
I've added an HTML element you can simply output the data to. Not sure how you'd like the data to be output but this is simply an example.
Just some quick notes on your code from your original post -
You must set the dataType to json when working with/parsing json. See Documentation.
Once you assign your data to a variable, you need to access that data by declaring the variable and then the data name, such as obj.patient_name.
I've done the best I can to help.
Good luck.
Try this code :
$(results.patient_password).each(function(i,v){
console.log(v.id);
});
use data-type:json,
in your jquery
I am building a cms in php and inserting large content in database, for that i am using text editor. But when i give blank space inb front of paragraph or i write something on new line its not getting inserted in mysql table. I am giving muy code below...
<script>
$(function() {
$("#btn-submit").click(function() {
var content =document.aboutform.descr.value = $('#editor').html();
var title=$("#title").val();
var id=$("#id").val();
//var active = $('input[name=make_active]:checked').val();
var dataString ='title1='+title+'&content1='+content+'&id1='+id;
//alert(id);
//alert(id);
//alert(firstname);
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'title1=' + title + '&content1=' + content;
//alert(dataString);
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "../admin/update_about.php",
data: dataString,
cache: false,
success: function(response) {
$("#status").html(response);
},
});
//closes ajax call
return false;
});
//closes button click
});
</script>
And this is php code
$title = $_POST['title1'];
$content = mysql_real_escape_string($_POST['content1']);
$id = $_POST['id1'];
$sql="UPDATE about_us SET title='".$title."',content='".$content."' WHERE about_id= ".$id;
$result=$conn->query($sql);
i use this script
<script type="text/javascript">
$(function () {
$(".comment_button").click(function () {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content=' + boxval;
if (boxval == '') {
alert("Please Enter Some Text");
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>');
$.ajax({
type: "POST",
url: "update_data.php",
data: dataString,
cache: false,
success: function (html) {
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value = '';
$("#flash").hide();
}
});
}
return false;
});
$('.delete_update').live("click", function () {
var ID = $(this).attr("id");
var dataString = 'msg_id=' + ID;
if (confirm("Sure you want to delete this update? There is NO undo!")) {
$.ajax({
type: "POST",
url: "delete_data.php",
data: dataString,
cache: false,
success: function (html) {
$(".bar" + ID).slideUp('slow', function () {
$(this).remove();
});
}
});
}
return false;
});
});
</script>
this script combine live update and delete record using jquery and ajax
the problem is when I refresh the page, the record will disappear .. how to keep records that show up are not dissapear when the page is reloaded?
First Check the comment list. Did you put any limit in query, if so then use Order by Primary ID desc.So it would display latest records first.
When you delete any record, check whether it is actually deleted from database or not. Because you are not checking whether record actually deleted or not as per the code you given.
Assuming you are using update_data.php and delete_data.php to manipulate some database, you could use PHP to render the page initially using the data that is currently on the database.
If that is not the case, and you don't have access to that database (it could be a third party web service, right?), or you don't want to do that for any reason, you could use cookie like Saeed answered.
Sorry but I know something similar to this has already been posted. I have tried every single resource out there and did my research and I still couldn't find out what is wrong with my code. I am using a Ajax Post with php. Everything seems to be working fine except for the fact that the div is not reloading on submit. After I refresh the page what I posted came up. Can someone please tell me what I am doing wrong.
js code:
$(function() {
$('.error').hide();
$('input.text-input').css({
backgroundColor: "#FFFFFF"
});
$('input.text-input').focus(function() {
$(this).css({
backgroundColor: "#C0DDFA"
});
});
$('input.text-input').blur(function() {
$(this).css({
backgroundColor: "#FFFFFF"
});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var dataString = '&email=' + email;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "../EdinburgCISD/Gorena/Gorena.php",
data: dataString,
success: function(data) {
$("#email").val('');
$("#div").fadeOut(1000);
// Change the content of the message element
$("#div").html(data);
// Fade the element back in
$("#div").fadeIn(1000);
}
});
return false;
});
});
html code:
This is where I have my div.
<div id="div"> <?php \\database select query ?> </div>
I am new to this website sorry if I posted something wrong...
did you get any error in console (firebug/developer tools) ?
otherwise you can try below
check with alert
$.ajax({
type: "POST",
url: "../EdinburgCISD/Gorena/Gorena.php",
data: dataString,
success: function(data) {
alert(data);//what you get here? are you getting "object" in alert? then you need to specify property or mention dataType
$("#email").val('');
$("#div").fadeOut(1000);
// Change the content of the message element
$("#div").html(data);
// Fade the element back in
$("#div").fadeIn(1000);
}
});
modified your code a bit see the comments, you should specify dataType:html (see the ajax part).
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#C0DDFA"});
});//focus ends
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});//blur ends
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
//var dataString = '&email=' + email; commented out
var dataString = email; //try insted this
//alert (dataString);return false;
$.ajax({
type: "POST",
dataType:'html', //or the appropiate type of data you are getting back
url: "../EdinburgCISD/Gorena/Gorena.php",
data: {email:dataString}, //in the php file do $email = $_POST['email'];
async:false, //not a good practice but you can try with it and without it
success: function(data) {
$("#email").val('');
$("#div").fadeOut(1000);
// Change the content of the message element
$("#div").html(data);
// Fade the element back in
$("#div").fadeIn(1000);
}
}); //ajax ends
return false;
});//click ends
});//document ready ends
update
see this fiddle you will get the idea http://jsfiddle.net/3nigma/LuCQw/ and the delay function is optional i have used it so that the effect is prominent