CODEWITHSUNDEEP
phpjqueryajax
user8479643
user8479643

Reputation:

How to post more than 1 var’s with ajax

I've been googling for a way to do this but everything I have found doesn't help me. I'm not sure how to post all the below variables, If I select only one of them it'll post just fine as well as putting it into the correct database column.

any help would be much appreciated.

        function submit() {
      var mm10  = $('#10MM'),
          mm16  = $('#16MM'),
          mm7   = $('#7MM'),
          mm2   = $('#2MM'),
          fines = $('#Fines'),
          bark  = $('#Bark'),
          cqi   = $('#CQI');

      $.ajax({
        type: "POST",
        url: "classes/Post/ChipSubmit.php",
        data: ,
        success: function(){
            $("#successMessage").show();
        }
      });
    };

Upvotes: 0

Views: 59

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

You can do it in two ways. One using arrays, or two using objects:

function submit() {
  var mm10 = $('#10MM').val(),
    mm16 = $('#16MM').val(),
    mm7 = $('#7MM').val(),
    mm2 = $('#2MM').val(),
    fines = $('#Fines').val(),
    bark = $('#Bark').val(),
    cqi = $('#CQI').val();

  $.ajax({
    type: "POST",
    url: "classes/Post/ChipSubmit.php",
    data: [mm10, mm16, mm7, mm2, fines, bark, cqi],
    success: function() {
      $("#successMessage").show();
    }
  });
} // Also you don't need a semicolon here.

Also you don't need a semicolon at the end of the function.

Using arrays is easier, if you want more precision, use objects:

function submit() {
  var mm10 = $('#10MM').val(),
    mm16 = $('#16MM').val(),
    mm7 = $('#7MM').val(),
    mm2 = $('#2MM').val(),
    fines = $('#Fines').val(),
    bark = $('#Bark').val(),
    cqi = $('#CQI').val();

  $.ajax({
    type: "POST",
    url: "classes/Post/ChipSubmit.php",
    data: {
      "mm10": mm10,
      "mm16": mm16,
      "mm7": mm7,
      "mm2": mm2,
      "fines": fines,
      "bark": bark,
      "cqi": cqi
    },
    success: function() {
      $("#successMessage").show();
    }
  });
} // Also you don't need a semicolon here.

And in the server side, you can get them through the $_POST super-global. Use var_dump($_POST) to find out what has it got.

Upvotes: 6

Jeramiah Harland
Jeramiah Harland

Reputation: 864

Kind of like Praveen Kumar suggested, you can create an object. One thing I was curious about, it looks like you're passing jQuery objects as your data? If that's the case, $_POST is going to say something like [object][Object] or, for me it throws TypeError and breaks everything.

var form_data = {};

 form_data.mm10 = $('#10MM').val(); // Input from a form
 form_data.mm16 = $('#16MM').val(); // Input from a form
 form_data.mm7 = $('#7MM').val(); // Input from a form
 form_data.mm2 = $('#2MM').text(); // Text from a div
 form_data.fines = $('#Fines').text();
 form_data.bark = $('#Bark').text();
 form_data.cqi = $('#CQI').text();

  $.ajax({
    type: "POST",
    url: "classes/Post/ChipSubmit.php",
    data: form_data,
    success: function() {
      alert('success');
    }
  });
}

Then to get those values in your PHP you'd use:

$_POST[mm10] // This contains '10MM' or the value from that input field
$_POST[mm16] // This contains '16MM' or the value from that input field
$_POST[mm7] // This contains '7MM' or the value from that input field
$_POST[mm2] // This contains '2MM' or the value from that input field
And so on...

I tried to put together a jsFiddle for you, though it doesn't show the PHP portion. After you click submit view the console to see the data posted.

Upvotes: 0

Related Questions