Passing multiple parameters by POST using ajax to php - php

Question

I'm trying to pass multiple parameters via the POST method using AJAX to my PHP file so that I can make a query to a MySQL database.
HTML file :
<div class="dropdown dropdown-dark">
<select class="dropdown-select" id="searchselect11" required>
<option value="faculty">Faculty</option>
<option value="dept">Dept.</option>
<option value="course">Course</option>
<option value="year">Year</option>
<option value="name">Name</option>
</select>
</div>
<td style="padding:5px;"> <input type="text" id="searchtext11" required></td>
<button id="searchgo1" onclick="searchone()"></button>
This is the Javascript file where I successfully access dropdown value and textbox value and store them in sv and searchtext11 variables respectively. But the problem is to pass the two values to the PHP file. The problem seems to be in the_data variable that is passed in xmlhttp.send(the_data);
The searchone() function is as follows:
function searchone()
{
//alert("hi");
var xmlhttp;
var sel = document.getElementById('searchselect11');
var sv = sel.options[sel.selectedIndex].value;
var searchtext11= document.getElementById("searchtext11").value;
var the_data = 'select='+sv+'text='+searchtext11;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "searchone.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(the_data);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
}
}
}
This PHP code works only if
var the_data='select='+sv;
searchone.php
<?php
if (isset($_POST['select'])) {
$str = $_POST['select']; // get data
echo $str;
}
?>
How do i get both dropdown and textbox value to my PHP file so that i can form sql query using those variables.

Answer 1

You need to use an ampersand, just as if it was a GET. Further, you should encode your text to make sure that it doesn't contain any characters that could have a special meaning
var the_data = ''
+ 'select=' + window.encodeURIComponent(sv)
+ '&text=' + window.encodeURIComponent(searchtext11);
// ^ ^^
You don't need to decode manually server-side because you are already letting it know that POST data is x-www-form-urlencoded.

Answer 2

add & in this string:
var the_data = 'select='+sv+'&text='+searchtext11;