Getting output in console but not in page in php - javascript

<div>
<input type="radio" id="normal" name="radioOption" onchange="enableTxt(this)" />
</div>
<div>
<input type="radio" id="luxury" name="radioOption" checked="checked" onchange="enableTxt(this)"/>
</div>
<script>
function enableTxt(elem) {
var id = $(elem).attr("id");
$.ajax({
type: "POST",
url: "Home/index",
data : { radiovalue: id},
dataType: 'json',
});
}
</script>
By passing the value i tried to run a php query.But it didn't work.But i got the output in console.I need to get the output in select option.Can any one please help??

Your ajax post is not handling the return.
$.ajax({
type: "POST",
url: "Home/index",
data : { radiovalue: id},
dataType: 'json',
success: function(response){
console.log(response);//json object
}
});

Try to something like this.
var id = $(elem).attr("id");
$.ajax({
type: "POST",
url: "test.php",
data : { radiovalue: id},
dataType: 'json',
});
And add below code in your php file. It's display Value.
echo $_POST['radiovalue'];

Related

Get data from a different php file using JQuery

I have an JQuery function which submits data from a php form to a different php file(submitForm.php). The submission works fine and there isn't any problem whatsoever, below is the handler:
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
}
});
}
Now, I want to be able get data from the submit form (submitForm.php), and load it into a different page.
This is my submitForm.php
<?php
$name="Amanda";
$age="23";
$data = array("name"=>"$name","age"=>"$age");
header("Content-Type: application/json");
echo json_encode($data);
?>
This is how my new submitHandler looks like
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
success: function(data) {
var name= html(name);
var age=html(age);
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
I think I am doing it wrong, I would be grateful if somebody could correct me or give an idea as to how to do this. Thanks
It should be like this. If you want to take your returner data you should use formal parameter of success function.
submitHandler : function(){
$.ajax({
type: "POST",
cache:false,
url: "submitForm.php",
data: $('#form').serialize(),
dataType : 'json',
success: function(data) {
var name= data.name;
var age=data.age;
$("#message").load("newpage.php",{name:name,age:age});
}
});
}
Edit: Also you need dataType: 'json' line.

Ajax post multiple data [duplicate]

This question already has answers here:
How to send multiple data fields via Ajax? [closed]
(12 answers)
Closed 6 years ago.
How to post multiple data using ajax? i want to post input value and attr both. Here is an example :
$('.input[type=\'text\']').keyup(function(){
$.ajax({
type: 'POST',
url: 'index.php',
data: $('.input[type=\'text\']'),
dataType: 'json',
success: function(json) {
alert('done');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" attr="yes" />
As documented, "data" has mixed type (Type: PlainObject or String or Array). So you can assign array or object to data property.
Try following;
$('.input[type=\'text\']').keyup(function(){
var dataToPost = {
value: $(this).attr('attr'),
attr: $(this).val()
};
$.ajax({
type: 'POST',
url: 'index.php',
data: dataToPost,
dataType: 'json',
success: function(json) {
alert('done');
}
});
});
$('.input[type=\'text\']').keyup(function(){
var obj = {};
obj.val = $(this).val();
obj.attr = $(this).attr('attr');
$.ajax({
type: 'POST',
url: 'index.php',
data: obj,
dataType: 'json',
success: function(json) {
alert('done');
}
});
});
$('.input[type=\'text\']').keyup(function(){
var data = new FormData();
$el = $('.input[type=\'text\']');
data.append('value', $el.val());
data.append('attr', $el.attr('attr'));
$.ajax({
type: 'POST',
url: 'index.php',
data: data,
dataType: 'json',
success: function(json) {
alert('done');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" value="" attr="yes" />

Passing textbox array to ajax json

I have two different arrays namely main_name[] and sub_name[].
I have to pass these values to the next page using AJAX, for inserting into DB.Could you please help me out, how could I pass the array as data in AJAX.
HTML
<input type="text" name = "main_name[]" value = "" >
<input type="text" name = "sub_name[]" value = "" >
JS
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html
);
alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});
$('form').serialize() will serialize all your form elements together with values and send along with an ajax query.
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: $('#form_id').serialize(),
success: function(data) {
$(".the-return").html
);
alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});
You could simply use serializeArray
var data = $(form).serializeArray();
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: data,
success: function (data) {
$(".the-return").html();
}
});
try this it will get all values of your form in (data) variable and send through ajax in json format.
var data = $('form').serialize();
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
data: data,
success: function(data) {
$(".the-return").html
);
alert("Form submitted successfully.\nReturned json: " + data["json"]);
}
});
return false;
});
});

Post array from javascript to php function using Ajax

i want to post an array from java script to php by ajax. But i don't know how do that, especially send it to php function like controller class. Correct me if i'm wrong, this is my java script source, as a function to send an array :
<script>
function send(){
var obj = JSON.stringify(array);
window.location.href = "post.php?q=" + obj;
}
</script>
i was try, but still fail. really need help..
As described in the JQuery API documentation, you can use
var rootPath="http://example.com/"
var jsonData = $.toJSON({ q: array });
var urlWS = rootPath + "post.php";
$.ajax({
url: urlWS,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: jsonData,
success: function(result) {
// do something here with returned result
}
});
var array= [];
array[0] = 'hi';
array[1] = 'hello';
$.ajax({
url: 'http://something.com/post.php',
data: {array: array},
type: 'POST'
});
try like this,
var data_to_send = $.serialize(array);
$.ajax({
type: "POST",
url: 'post.php',
data: data_to_send,
success: function(msg){
}
});
or
you can pass as json like below,
$.ajax({
type: "POST",
url: 'post.php',
dataType: "json",
data: {result:JSON.stringify(array)},
success: function(msg){
}
});
var arr = <?php echo json_encode($postdata); ?>;
ajax: {
url:"post.php"
type: "POST",
data: {dataarr: arr},
complete: function (jqXHR, textStatus) {
}
You can try this .this will work
example
ajax code:
$.ajax({
url: 'save.php',
data: {data: yourdata},
type: 'POST',
dataType: 'json', // you will get return json data
success:function(result){
// to do result from php file
}
});
PHP Code:
$data['something'] = "value";
echo json_encode($data);

Post objects in jquery Ajax

I have to send position size and their parent details in jquery ajax and get them by PHP
My code is :-
$("#save").click(function(){
var pos=[];
$(".dr").each(function(index){
dragId=$(this).attr("id");
topPos=$("#"+ dragId).position().top;
left=$("#"+ dragId).position().left;
dragLeft=left/10;
dragLeft=dragLeft ? dragLeft:0;
dragTop=topPos/10;
dragTop=dragTop ? dragTop :0;
dragWidth=$("#"+dragId).width();
dragHeight=$("#"+dragId).height();
parentDivWidth=$("#"+dragId).parent().width();
parentDivheight=$("#"+dragId).parent().height();
parentDivClass=$("#"+dragId).parent().attr("class");
var obj = {};
obj = {left: dragLeft,top :dragTop,dragWidth:dragWidth,dragHeight:dragHeight,parentDivWidth:parentDivWidth,parentDivheight:parentDivheight,parentDivClass:parentDivClass};
pos[$(this).attr("id")]=obj;
})
$.ajax({
type: "POST",
url:"<?php echo Yii::app()->request->baseUrl?>/index.php/BillSettings/savePositions",
data:{pos:pos},
dataType:'html',
success: function(res){
console.log(res);
}
})
});
PHP code
var_dump($_REQUEST);
But I can not get value of $_REQUEST or $_REQUEST['pos'].Any help should be appreciated.
js:
$.ajax({
type: "POST",
data:{pos: JSON.stringify(pos},
//...
php:
var pos = json_decode($_REQUEST['pos']);
var_dump(pos);
Is it what you want?
try converting the object you want to pass via ajax to a string
$.ajax({
type: "POST",
url:"<?php echo Yii::app()->request->baseUrl?>/index.php/BillSettings/savePositions",
data: JSON.stringify(pos),
dataType:'html',
success: function(res){
console.log(res);
}
})
then in php
$pos = json_decode($_REQUEST['pos']);
js:
$.ajax({
type: "POST",
url:"<?php echo Yii::app()->request->baseUrl?>/index.php/BillSettings/savePositions",
data:{"pos":pos},
cache: false,
success: function(res){
console.log(res);
}
})
php:
$post=$_POST["post"];

Categories

Resources