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: stackoverflow.com/questions/9328743/… for example. — Calin Vlasin
– Calin Vlasin, Commented Dec 5, 2018 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
– Pointy, Commented Dec 5, 2018 at 13:41
@RiggsFolly it's possible of course but I doubt the OP really wants "fval=something" for the parameter value. — Pointy
– Pointy, Commented Dec 5, 2018 at 13:42

RiggsFolly · Accepted Answer · 2018-12-05 13:56:22Z

3

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>

edited Dec 5, 2018 at 13:56

answered Dec 5, 2018 at 13:47

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

manikanta gowda Over a year ago

Thats awesome but i am getting output like "sval=4 fval=58" , i need only 4 and 58

RiggsFolly Over a year ago

Hmmm, what is in the fields on the screen? i.e. what does this return document.getElementById('get_usecompny').value

RiggsFolly Over a year ago

Also did you remove the code I removed that messed with the contents of the on screen fields before passing them to the PHP

Peter · Accepted Answer · 2018-12-05 13:48:05Z

0

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'];

answered Dec 5, 2018 at 13:48

Peter

1531 silver badge7 bronze badges

Comments

Felipe Almeida · Accepted Answer · 2018-12-05 13:50:54Z

0

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);
    }
});

answered Dec 5, 2018 at 13:50

Felipe Almeida

111 bronze badge

Collectives™ on Stack Overflow

Unable to send multiple data parameters with jQuery AJAX

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related