How to send multiple parameters to php using ajax - php

Question

Here i am trying to send multiple variable values to php page through ajax.
here i am calling javascript function to get the values from form and submit the values to ajax. in the javascript i am getting multiple values from form. now i want to pass all these values to php page.
how can i achieve that?
here is what i have done.
function sendInvite(){
var from_name = document.getElementById('invite_username').value;
var name_string = 'invitename='+ from_name;
var email = document.getElementById('friendemail').value;
var mail_string = 'friendemail='+ email;
var product_name = document.getElementById('invite_productname').value;
var product_string = 'invite-product-name='+ product_name;
var product_link = document.getElementById('invite_url').value;
var link_string = 'invite-url='+ product_link ;
$.ajax({
type : "post",
url : "legoland.php",
data: name_string,mail_string,
cache:false,
success : function(html){
$('.mail-message').html(html);
}
});
}
Html:
<form name="invite-form">
<div class="col-md-4 col-lg-4">
<label class="control-label" for="friend">Enter email address</label>
<input type="email" class="form-control" name="friendemail" id="friendemail" placeholder="sam#uncle.com" required><br>
<?php
echo '<input type="hidden" id="invite_username" name="invitename" value="' . $_SESSION["user_name"] . '">' ;
echo '<input type="hidden" id="invite_url" name="invite-url" value="'.$_SERVER['REQUEST_URI'].'">';
echo '<input type="hidden" id="invite_productname" class="invite-product" name="invite-product-name">';
?>
<input type="button" name="submit" onclick="return sendInvite();" value="Invite" class="btn btn-primary">
</div>
</form>
php:
<?php
$name = $_POST['invitename'];
$mail = $_POST['friendemail'];
$product_name = $_POST['invite-product-name'];
$product_link = $_POST['invite-url'];
echo $name;
echo $mail;
echo $product_name;
echo $product_link;
?>

Answer 1

From manual:
data
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
So the easiest would be change data to
data: { invitename: from_name, friendemail: email }
you can also assign values directly to data variable
data: {
invitename: document.getElementById('invite_username').value,
friendemail: document.getElementById('friendemail').value
}
etc.