How to pass json data to html form? - php

I am trying to pass json data after successfully received the array, but what i am trying to pass to modal window to edit the values. data is array actually have the values but not passing to the html form.
function passvalue(val,start,end)
{
var id=val;
var start=start;
var end =end;
//var dataString = "id=" + id;
$.ajax ({
type: "POST",
url: "get-results.php",
data: {id:id},
// dataType: 'json',
success: function(data)
{
//console.log(data);
$('#ctemail').val(data.cemail);
}
});
}
And my html is:
Enter Customer Email

I corrected some shortcomings.
function passvalue(val,start,end)
{
var id=val;
var start=start;
var end =end;
//var dataString = "id=" + id;
$.ajax ({
type: "POST",
url: "get-results.php",
data: 'id='+id, // multiple: data: 'id='+id+'&id2='id2,
// dataType: 'json',
success: function(json_data)
{
var data = JSON.parse(json_data); // Json parse
//console.log(data);
$('#ctemail').val(data.cemail);
}
});
}

Related

Two actions to call a script Ajax

I have a function to call a PHP script using Ajax, I would to add another event to call the same PHP page, how can I add it instead of repeating the same Ajax call?
$('.episodeNum').change(function(){
var formItems = $('form.addMedia').serialize();
var dataString = formItems;
$.ajax({
type: "POST",
url: "grabMedia.php",
data: dataString,
dataType: "json",
success: function(data) {
I would to add a click function to call the same script:
$('.clickButton').click(function(){
var formItems = $('form.addMedia').serialize();
var dataString = formItems;
$.ajax({
type: "POST",
url: "grabMedia.php",
data: dataString,
dataType: "json",
success: function(data) {
How can I combine both of them??
Thanks for your usual help
A function of the code can be made and it can be called on both the events:
function post_data()
{
var formItems = $('form.addMedia').serialize();
var dataString = formItems;
$.ajax({
type: "POST",
url: "grabMedia.php",
data: dataString,
dataType: "json",
success: function(data) { }
}
$('.episodeNum').change(function(){
post_data();
});
$('.clickButton').click(function(){
post_data();
});
Does this suit your need?
var post_data = function()
{
var formItems = $('form.addMedia').serialize();
var dataString = formItems;
$.ajax({
type: "POST",
url: "grabMedia.php",
data: dataString,
dataType: "json",
success: function(data) { }
};
$('.episodeNum').change(post_data);
$('.clickButton').click(post_data);

ajax post with PHP

why isn't this working?
jQuery AJAX Code:
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
});
});
PHP Code(Just a test Code):
if($_POST["search"]) {
echo "TEST MESSAGE!";
}
It doesn't show The echo :/
thanks for ur help ;)
You need to display the data you receive from the ajax call.
Example, to put the result into a <div> called YourresultDiv:
Try with this
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#YourresultDiv').html(data);
alert("Successful");
}
});
});
Hopes this will help you....
$("header input").bind("keyup", function()
{
var searchString= $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
async: false
},success: function (data) {
$('div#posteddata').append(data);
}
);
});
<html>
<head>
</head>
<body>
<div id="posteddata"></div>
</body>
</html>
You need to specify an element you want to update.. for example
<div id="result"> </div>
and then append a success event handler to your ajax call
$("header input").bind("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false
}).success(function (data) {
$("#result").html(data);
}).fail(function () {
alert("Ajax failed!");
});
});
Try with this
In js add
success: function (data) {
// success handler
}
as your response handler
if($_POST["data"]) {
// search = search string available here in $_POST['data']
echo "TEST MESSAGE!";
}
where is your call back function in $.ajax() function,with callback function only,you can display anything through an ajax request..
So try this.
$("header input").on("keyup", function () {
var searchString = $("header input").val();
var dataString = 'search=' + searchString;
alert(dataString);
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (data) {
$('#Yourdiv').html(data); // or $('#Yourdiv')text(data);
}
});
});
Without success function,you can see the echoed statement in your network segment in console.
for that, press F12,then you will get a link like
XHR finished loading: POST "http://localhost/yourproject/func_name.Click on that link and you will goto network segment and from there,click on the function name and then in response or preview tab,you canb see the echoed statement..
try it.

ajax link json datatype call

I want to send the data via ajax to other page. I have isolated the problem. This is the code.
Thank you all for your help..But no effect..
updated code
It worked...
<script>
$(document).ready(function(){
$(".edit").click(function(event) {
event.preventDefault(); //<--- to prevent the default behaviour
var box = 1233;
var size=123;
var itemname=123;
var potency=123;
var quantity=12333;
var dataString ={
'box' :box,
'size':size ,
'itemname':itemname,
'potency':potency,
'quantity':quantity
};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
}
});
});
});
</script>
So I click the link,it navigates, to dd.php which has
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']));
echo $_POST['itemname'];
?>
I get Object Object as alert. What am doing wrong? Pls throw some light here..thanks you..
$(document).ready(function(){
$(".edit").click(function(event) {
event.preventDefault();
var data = {"box":1233,
"size":565,
"itemname":565,
"potency":876,
"quantity":234};
$.ajax({
url: "dd.php",
type: "post",
data: data,
dataType: "json",
success: function(data) {
if(console){
console.log(data);
}
},
error: function(data) {
if(console){
console.log(data);
}
}
});
});
});
few things to consider... you can post data as object..which is clean and easier to use
$(".edit").click(function(event) {
event.preventDefault(); //<--- to prevent the default behaviour
var box = 1233;
....
var dataString ={'box':box,'size':size,'itemname':itemname,'potency':potency,'quantity':quantity};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
dataType: "json", //<--- here this means the response is expected as JSON from the server
success: function(data) {
alert(data.itemcode); //<--here alert itemcode
},
error: function(data) {
alert(data);
}
});
so you need to send the response as json in PHP
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']))
?>
Here you are using querystring as sent in GET request.
If you want to send the data in same form, you can use this with GET request type:
$.ajax({
url: "dd.php"+dataString,
type: "get",
dataType: "json",
success: function(data) {
console.log(data);
alert(data.itemcode);
},
error: function(data) {
alert(data);
}
});
Or for POST request,you will have to put data in json object form, So you can use :
var dataString ={
'box' :box,
'size':size ,
'itemname':itemname,
'potency':potency,
'quantity':quantity
};
$.ajax({
url: "dd.php",
type: "post",
data: dataString,
dataType: "json",
success: function(data) {
console.log(data);
alert(data.itemcode);
},
error: function(data) {
alert(data);
}
});
});
And put echo in your php code :
<?php
echo json_encode(array('itemcode'=>$_POST['itemname']))
?>
Javascript alert shows [Object object] for object. You can see response using console.log or can use that key with alert.
For more information, refer jQuery.ajax()

pass string using jquery ajax to php

I want to send a hash string to my php file. but failed, can anyone help me please?
my javascript is like this:
var hashString = "#support_form";
$.ajax ({
type: "POST",
url:"index.php",
data: hashString,
success: function() {
console.log("message sent!");
}
});
and the php:
<?php
$theHash = $_POST['hashString'];
?>
What should I do? Thanks
You need to specify the name/value for data
data: {hashString:hashString},
You have to do like this-
$.ajax ({
type: "POST",
url:"index.php",
data: "hashString=value",
success: function() {
console.log("message sent!");
}
});
So you can get the value as-
$theHash = $_POST['hashString'];
echo $theHase; //will print value
Use:
data: 'hashString=' + encodeURIComponent(hashString),
Your code would work if you used an object instead of a string. try this:
var hashString = {hashString: "#support_form"};
$.ajax ({
type: "POST",
url:"index.php",
data: hashString,
success: function() {
console.log("message sent!");
}
});
Your JS should be this:
var hashString = "#support_form";
$.ajax ({
type: "POST",
url:"index.php",
data: {hashString: hashString},
success: function() {
console.log("message sent!");
}
});
data key must be of object type
This will work for you
var hashString = "#support_form";
$.ajax ({
type: "POST",
url:"index.php",
data: {'hashString':hashString},
success: function() {
console.log("message sent!");
}
});
$.ajax ({
type: "POST",
url:"index.php",
data: {"hashString":hashString},
success: function() {
console.log("message sent!");
}
});
var queryString = "f_name=" + f_name + "&l_name=" + l_name + "&contact_no=" + contact_no + "&email=" + email;
$.ajax({
type:'POST',
url:'insert1.php',
data:queryString,
dataType:'json',
success: function(success){
console.log("message sent!");
}
});

send each element with class name via AJAX to php

Hi i'm using the below code to take data and send it to a php page, it works as i want it to but its only sending the first ".order" it comes across, ie. i need to send every element with class="order", would this be some sort of .each()?
$('#submit').click(function(){
var order=$('.order').html();
var dataString = 'order='+ order;
$.ajax
({
type: "POST",
url: "order.php",
data: dataString,
cache: false,
success: function(html)
{
$("#response").html(html);
}
});
});
Did this instead and it now works, bizarre!
$('#submit').live('click',function(){
var order=$('.order').text();
var dataString = 'order='+ order;
$.ajax
({
type: "POST",
url: "order.php",
data: dataString,
cache: false,
success: function(html)
{
$("#response").html(html);
}
});
});
Try var order = $('form').serialize() as explained here http://api.jquery.com/serialize/
Other than this, you must do something like:
$('.order').each(function(){
// Get values from order here... something like: order += $(this).html();
// Also, note that if '.order' are inputs you should use $(this).val() instead of $(this).html();
});
Hope it helps.
I believe this should do it:
var order=$('.order')
.map(function(){ return this.innerHtml; })
.get().join('');
var dataString = 'order='+ order;

Categories