Unable to send multiple data parameters with jQuery AJAX

Question

I am trying to send values to other page Using Ajax

But i am unable to receive those values , i don't know where i am wrong

here is my code

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

$.ajax({
    type: "POST",
    url: "getmoreinfo.php", // Name of the php files
    data: "{'data1':'" + dataString1+ "', 'data2':'" + dataString2+ "'}",
    success: function(html)
    {
        $("#get_more_info_dt").html(html);
    }
  });
 }
</script>

in alert i am getting those value but in page 'getmoreinfo.php' i am not receiving any values

here is my 'getmoreinfo.php' page code

    if ($_POST) {
      $country = $_POST['fval'];
      $country1 = $_POST['sval'];

      echo  $country1;
      echo "<br>";
      echo  $country;   
      }

Please let me know where i am wrong .! sorry for bad English

This is a duplicate, asked multiple times: https://stackoverflow.com/questions/9328743/sending-multiple-data-parameters-with-jquery-ajax for example. — Calin Vlasin, Dec 05 '18 at 13:41
Your `data:` value should be the object `{ fval: dataString1, sval: dataString2 }`, and it should be an object and not a string. Do not prepend `"fval="` or `"sval="` to the field values. — Pointy, Dec 05 '18 at 13:41
@RiggsFolly it's *possible* of course but I doubt the OP really wants `"fval=something"` for the parameter value. — Pointy, Dec 05 '18 at 13:42

RiggsFolly · Accepted Answer · 2018-12-05T13:56:22.800

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>

Thats awesome but i am getting output like "sval=4 fval=58" , i need only 4 and 58 — manikanta gowda, Dec 05 '18 at 13:48
Hmmm, what is in the fields on the screen? i.e. what does this return `document.getElementById('get_usecompny').value` — RiggsFolly, Dec 05 '18 at 13:51
Also did you remove the code I removed that messed with the contents of the on screen fields before passing them to the PHP — RiggsFolly, Dec 05 '18 at 13:52

score 0 · Answer 2 · answered Dec 05 '18 at 13:48

No need to create 'dataString' variables. You can present data as an object:

$.ajax({
    ...
    data: {
        'fval': fval,
        'sval': sval
    },
    ...
});

In your PHP, you can then access the data like this:

$country = $_POST['fval'];
$country1 = $_POST['sval'];

score 0 · Answer 3 · answered Dec 05 '18 at 13:50

The property "data" from JQuery ajax object need to be a simple object data. JQuery will automatically parse object as parameters on request:

$.ajax({
    type: "POST",
    url: "getmoreinfo.php",
    data: {
        fval: document.getElementById('get_usecompny').value,
        sval: document.getElementById('country').value
    },
    success: function(html) {
        $("#get_more_info_dt").html(html);
    }
});

Unable to send multiple data parameters with jQuery AJAX

3 Answers3