Ajax post multiple data [duplicate] - javascript

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" />

Related

i am trying to pass parameter to data through ajax

I am trying to pass value through an ajax json array but value of catergory variable is not getting in controller action
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: "POST",
data: {
'category': category
},
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function(response) {}
});
You need to use the parameter namespace matching your extension/plugin:
$.ajax({
// ...
data: {
'tx_myext_foo[category]': category,
},
// ...
});
But you'll also need to configure the cHash evaluation since this will lead to a HTTP request like /?tx_myext_foo[category]=X which will fail without a matching cHash.
This can be done with the excludedParameters configuration option.
Please check the Controller action if category (parameter name) passed from the ajax is exactly same in the controller action too
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
cache: false,
async: false,
url: url,
data: JSON.stringify {
category: category
},
dataType: 'json',
success: function(response) {}
});
You need to make ajaxurl with action and controller. and then pass the data in full format.
var ajaxUrl = '<f:uri.action action="youraction" controller="Yourcontroller" />';
var category = $('#category').val();
$.ajax({
type: 'POST',
url: ajaxUrl,
data: '&tx_yourext_yourplugin[category]='+category,
success: function(response) {
},
});
Just make the following changes :
var category = $('#category').val();
var url = $('#ajax_action_search').val();
$.ajax({
type: "POST",
url:url,
data: {'category': category},
dataType: "json",
success: function(response) {}
});

jQuery AJAX success for certain form

I'm using the following code to submit multiple forms via AJAX:
var formData = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5').serializeArray();
formData.push({ name: this.name, value: this.value });
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
I want to add some JavaScript in the success/response function but only for a particular form e.g.
if ( .bookroom5 ) {
// do stuff
}
Does anyone know the best approach to doing this other than creating separate $.ajax functions for each form?
Any help much appreciated!
var $form = $(this).closest('.bookroom1, .bookroom2, .bookroom3, .bookroom4, .bookroom5');
var formData = $form.serializeArray();
formData.push({
name: this.name,
value: this.value
});
$.ajax({
type: 'POST',
url: AJAX_URL,
data: formData,
dataType: 'json',
success: function (response) {
if ($form.hasClass('bookroom5')) {
alert('you have used form bookroom5')
}
}
});
Save the form before then use it later to check the class

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);

how to pass a additional data with form serialized data on ajax?

How to pass an additional data with form serialize data on ajax post method?.
below is my code which was using for ajax post,
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize(),
success: function (data) {
alert(data);
}
});
});
here, how to pass a additional_data with serialize form data
From jQuery API DOCS
The .serializeArray() method creates a JavaScript array of objects
The .serialize() method creates a text string in standard URL-encoded notation.
I think to use push , we need to use serializeArray
try to use
var frmData = frm.serializeArray();
frmData.push({name: "name", value: "test"});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
You need to push the elements to the existing serialized data.
var frmData = frm.serialize();
frmData.push({name: nameofthevariable, value: valueofthevariable});
frmData.push({name: nameofthevariable2, value: valueofthevariable2});
frmData.push({name: nameofthevariable3, value: valueofthevariable3});
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frmData,
success: function (data) {
alert(data);
}
});
});
serialize() create a query string of the form. So you can append additional parameters into it.
$(document).ready(function()
{
var additional_data=$("#extra_data").val();
$.ajax({
type: 'POST',
url: 'send_mail.php',
data: frm.serialize()+'&param1='+value1+'&param2='+value2,
success: function (data) {
alert(data);
}
});
});
serializearray() can be used to send additional parameters. PFB code for sending additional parameters.
var request = $('form').serializeArray();
request.push({name: "kindOf", value: "save"});
Ajax call
$.ajax({
url: "/ST/SubmitRequest",
dataType: "json",
//contentType: "application/json",
type: "POST",
data: request,
//data: r1,
success: function (response) {
//Setinterval();
//alert("Done...!");
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});

Passing data "of two types" via jQuery/AJAX to .php file? (Syntax) [duplicate]

This question already has answers here:
jQuery: serialize() form and other parameters
(12 answers)
Closed 5 years ago.
I am very new to jQuery/AJAX and I am looking for help. This is the relevant code-snippet:
$(function () {
$('.button').on('click', function (event) {
event.preventDefault(); //prevents page from refreshing
$.ajax({
type: 'POST',
url: 'test2.php',
data: ?????
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
});
});
So, the data I want to pass is for one data: $('#form').serialize(), and for the other data: { test : test.name },
Basically I want to send a whole form and another parameter. How do I correctly express my wishes to jQuery?
I have tried the following options and they did not work:
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize(), data: { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
and
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize(), { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
and
$.ajax({
type: 'POST',
url: 'test2.php',
data: $('#form').serialize()
});
$.ajax({
type: 'POST',
url: 'test2.php',
data: { test : test.name },
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
The php document basically just echos out said data.
Help a newbie out!
Try
data = {}
data["form"] = $('#form').serialize();
data["test"] = test.name;
$.ajax({
type: 'POST',
url: 'test2.php',
data: data,
success: function (data) {
alert('form was submitted');
$('.text').html(data);
}
});
You need to supply a JSON object to the data property for your ajax. What I did was basically create a new object, and add 2 elements.
Hope this helps!
Create an object to hold all your information:
var dataToSend = {};
dataToSend.form = $('#form').serialize();
dataToSend.extraData = { test : test.name };
then post it:
$.ajax({
data: dataToSend
})

Categories

Resources