Sending Multiple Data Parameters with Jquery Ajax

Sending multiple data parameters with jQuery AJAX

Here is how POST data should be formatted:

key1=value1&key2=value2&key3=value3

In your case (note the & as a separator):

'code=' + code + '&userid=' + userid

But jQuery does that for you if you specify your data as an object:

data: { code: code, userid: userid }

Unable to send multiple data parameters with jQuery AJAX

You are passing the parameters with different names than you are attempting to read them with.

Your data: parameter could be done much more simply as below

<script type="text/javascript">
function get_more_info() { // Call to ajax function
var fval = document.getElementById('get_usecompny').value;
var sval = document.getElementById('country').value;

$.ajax({
type: "POST",
url: "getmoreinfo.php", // Name of the php files
data: {fval: fval, sval: sval},
success: function(html)
{
$("#get_more_info_dt").html(html);
}
});
}
</script>

Or cut out the intermediary variables as well and use the jquery method of getting data from an element with an id like this.

<script type="text/javascript">
function get_more_info() { // Call to ajax function

$.ajax({
type: "POST",
url: "getmoreinfo.php", // Name of the php files
data: { fval: $("#get_usecompny").val(),
sval: $("#country").val()
},
success: function(html)
{
$("#get_more_info_dt").html(html);
}
});
}
</script>

how to pass multiple parameter in ajax call using jquery

The issue is here:

url:"process.php?id="+x+"&fname="+y,

here you are sending only id and fname and in php script you are trying to get:

$id = $_GET['id'];
$fname = $_GET['fname'];
$lname=$_GET['lname'];

ans so many parameters, which is wrong.

The correct approach to send multiple parameter is:

data: {
key1: value1,
key2: value2,
key3: value3,
and so on
}

or format the proper url by appending all the key : value in it like:

key1=value1&key2=value2&key3=value3

Pass Multiple Parameters to jQuery ajax call

Don't use string concatenation to pass parameters, just use a data hash:

$.ajax({
type: 'POST',
url: 'popup.aspx/GetJewellerAssets',
contentType: 'application/json; charset=utf-8',
data: { jewellerId: filter, locale: 'en-US' },
dataType: 'json',
success: AjaxSucceeded,
error: AjaxFailed
});

UPDATE:

As suggested by @Alex in the comments section, an ASP.NET PageMethod expects parameters to be JSON encoded in the request, so JSON.stringify should be applied on the data hash:

$.ajax({
type: 'POST',
url: 'popup.aspx/GetJewellerAssets',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ jewellerId: filter, locale: 'en-US' }),
dataType: 'json',
success: AjaxSucceeded,
error: AjaxFailed
});

How to send multiple data fields via Ajax?

The correct syntax is:

data: {status: status, name: name},

As specified here: http://api.jquery.com/jQuery.ajax/

So if that doesn't work, I would alert those variables to make sure they have values.

How to pass multiple parameters with Ajax

As I do not use jQuery I cannot offer advice/help on that but with some fairly simple vanilla Javascript you can quite easily use AJAX to fetch data and use the response to help construct the next element in your form ( which is how I interpret your needs "First I select Doctor Name then I select an appointment date and Last I want to fetch the Time slot of That doctor for this date." )

The following code sends All ajax requests to the same page ( this could be a totally separate script if needed ) with the value from whichever form element the user used to make the current selection.

The event handler inspects the element that invokes it to see if there is a following HTML element, defined with a dataset attribute data-next. Using that dataset attribute in the ajax callback you can populate the following element with the data returned from the db lookup ( ajax request response )

The ajax request sends two pieces of information in each request - the name/value of the selected element and the dataset value of the next element. With these you can easily setup logic in PHP that runs the appropriate SQL query and returns the correct response. In the code here this is emulated with simple data responses ( date / time ) - the response could be considerably more complex (json for instance) but then the ajax callback would need to be modified accordingly.

Hope it makes sense. Copy to a new PHP file and run it perhaps

<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
/*

emulate database lookups by returning a simple
value appropriate to the ajax call made.

*/
if( isset( $_POST['docname'] ) ){
/*
$data=$conn->prepare('select `sdate` from `slot` where `name`=?');
$data->execute( array(
$_POST['docname']
));
$row=$data->fetchall( PDO::FETCH_OBJ );

exit( json_encode( $row ) );
*/
exit( date('Y-m-d') );
}
if( isset( $_POST['bdate'], $_POST['docname'] ) ){
/*
$data=$conn->prepare('select * from `timeslot` where `sdate`=? and `docname`=?');
$data->execute( array(
$_POST['bdate'],
$_POST['docname']
));
$row=$data->fetchall( PDO::FETCH_OBJ );

exit( json_encode( $row ) );
*/
exit( date('H:i:s') );
}
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
.hidden{visibility:hidden}
</style>
</head>
<body>

<form method='post'>
<select name='docname' data-next='bdate' class='form-control' required>
<option selected hidden disabled>Please Choose Doctor</option>
<option value=1>Dr. Bob
<option value=2>Dr. Nick
<option value=3>Dr. Who
</select>

<input type='date' name='bdate' data-next='timeslot' class='form-control txtDate hidden' required />
<input type='time' name='timeslot' data-next='sub' class='form-control hidden' min='08:00' max='18:00' required />

<input type='submit' name='sub' class='hidden' />
</form>


<script>

const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);

// this is the ajax payload. It will be updated by each invocation of the event handler.
let fd=new FormData();


qa('select,input').forEach( obj => obj.addEventListener('change',function(e){

let next = this.hasAttribute('data-next') ? this.dataset.next : false;
// add the element name / value
fd.append( this.name, this.value );
// change the next item
fd.set( 'next', next );

fetch( location.href, { method:'post', body:fd } )
// if the response is JSON this needs to be changed to r=r.json()
.then( r=>r.text() )
.then( value=>{
if( value && next ){

let input=q('[name="'+next+'"]');
input.classList.remove('hidden')
/*
The following processes a single result only.
If the real response is JSON and has multiple values as I suspect then
this should be changed to iterate through entire response.

*/
switch( input.type ){
case 'date':input.valueAsDate=new Date( value );break;
case 'time':input.value=value;break;
default:break;
}
}
})
}));
</script>
</body>
</html>

Sending multiple data with jquery Ajax in php

Replace :

data:'id='+ID & 'user_id=' + USERID,

with:

data: {id:ID, user_id:USERID}

so your code will look like this :

$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = 10;
var USERID =1;
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'/ajaxload.php',
data: {id:ID, user_id:USERID},
success:function(html){
$('#show_more_main'+ID).remove();
$('.post_list').append(html);
}
});
});
});

How to send multiple data using AJAX along with the Form Data

You can append any extra field to the formData object like so:

formData.append(name, value);

and then send it to server side using ajax:

data: formData,

Then fetch on the server side using $_POST[''] OR $_GET[''] whichever method you use

Send multiple data params collected from string in jQuery Ajax

var datum = {
format: "json",
user: "user",
password: "password"
};

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: url, // your url
dataType: "json",
data: JSON.stringify(datum),
success: function(response) {
var result = response;
}
});


Related Topics



Leave a reply



Submit