Passing multiple parameters by POST using ajax to 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.

score 11 · Accepted Answer · answered Jun 29 '13 at 17:02

11

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.

answered Jun 29 '13 at 17:02

Paul S.

64,864
9
122
138

I'd add that the `window` of `window.encodeURIComponent` is implicit and can be omitted... – Basic Jun 29 '13 at 17:05
Please also highlight whether should i use `if (isset($_POST['select']))` or `if (isset($_POST['select'], $_POST['text'])) – akashaggarwaal Jun 29 '13 at 17:07
@akashaggarwaal I'd suggest checking both if you require both. @Basic `window` can be omitted in most cases, but when I use _methods_ of `window`, my style is to keep it. So, for example, I would use `window.setTimeout`, too. – Paul S. Jun 29 '13 at 17:10
encodeURIComponent() is usless here, because your parametrs are not URIs, string is enough – vladkras Jun 29 '13 at 17:10
@vladkras what if the client types into the `` a string like `"hello&somevar=iWin"`? – Paul S. Jun 29 '13 at 17:11
@vladkras but better the website doesn't break as I get around to it :P – Paul S. Jun 29 '13 at 17:14
that's why you need to prevent such efforts both on client and server side and not send them, even encoded. I've never seen an app where someone has to type such queries in input (maybe except search engines, but i'm not sure they use stackoverflow to solve smth) – vladkras Jun 29 '13 at 17:23
thanx everyone for your inputs..helped a lot.. i successfully created the sql query also got the results but while displaying the results it gives a notice: `Notice: Array to string conversion in E:\Program Files (x86)\EasyPHP-12.1\www\university\site\searchone.php on line 21 Array` – akashaggarwaal Jun 29 '13 at 17:26
$rs = mysql_query($strSQL); $nr = mysql_num_rows($rs); for ($i=0; $i<$nr; $i++) { $r = mysql_fetch_array($rs); echo $r["]; } – akashaggarwaal Jun 29 '13 at 17:30
you have to use a key, e.g. echo $r[0] – vladkras Jun 29 '13 at 17:34
1

also you'd better use `while($r = mysql_fetch_array($rs)) { //do what you need with $r array}` instead of `$nr = mysql_num_rows($rs); for ($i=0; $i<$nr; $i++) { $r = mysql_fetch_array($rs); echo $r["];` – vladkras Jun 29 '13 at 17:36

score 5 · Answer 2 · answered Jun 29 '13 at 17:00

5

add & in this string:

var  the_data = 'select='+sv+'&text='+searchtext11;

answered Jun 29 '13 at 17:00

vladkras

16,483
4
45
55

@Rush.2707 any number of variables: `var data = 'var1='+var1+'&var2='+var2+'&var3='+var3+'... etc.` String length is limited only by [GET request length](http://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request) (~8Kb). Also, it's better is to use [encodeURIComponent()](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) on every variable – vladkras Oct 14 '15 at 08:38

Passing multiple parameters by POST using ajax to php

2 Answers2

Linked