Post php form jquery ajax

Question

i have form with input field generated from loop, ie

<form name="" method='post' action=''>
<?php
for($i=0;$i<10;$i++){
 echo "<input type='text' name='data[]' class='data_cls' value='".$i."'>";
}
?>
<input type='submit' id='btn' value='save'>

i want to submit the form using jquery ajax.

$('.btn').click(function(){

            var datString = "HOW TO GET THESE VALUES";

            $.ajax({
            url: "data_process.php",
            type: "post",
            data: dataString,
            success: function(data) {
                alert('OK');
            }
        }); 

    });

Use `serialize()`. Then in your `$.ajax` call: `data: $('form').serialize();` — Rory McCrossan, Aug 08 '16 at 12:32
Possible duplicate of [serializing and submitting a form with jQuery POST and php](http://stackoverflow.com/questions/15173965/serializing-and-submitting-a-form-with-jquery-post-and-php) — KAD, Aug 08 '16 at 12:35
The best way to do this really depends on what your desired result is. — Patrick Q, Aug 08 '16 at 12:36
@Jasiralwafaa check ma ans, i have also added how you could receive the data on the PHP page. Hope the solutions would help — Omari Victor Omosa, Aug 08 '16 at 20:11

score 3 · Answer 1 · answered Aug 08 '16 at 12:32

You can use .serialize() jQuery method to get the form data. Like this,

$('.btn').click(function(){

            var dataString = $('#FORM_ID').serialize();
            //replace FORM_ID with the ID of the form.

            $.ajax({
            url: "data_process.php",
            type: "post",
            data: dataString,
            success: function(data) {
                alert('OK');
            }
        }); 

    });

score 0 · Answer 2 · answered Aug 08 '16 at 12:33

0

Try this:

var datString = "";

$(".data_cls")
        .map(function () {
            datString += $(this).val();
        })
        .get();

answered Aug 08 '16 at 12:33

rokas

1,521
9
16

score 0 · Answer 3 · answered Aug 08 '16 at 12:33

0

Try

var Data = {};
$('input[name=data]').each(function(i) {
  Data[i] = $(this).val();
});

answered Aug 08 '16 at 12:33

porkbrain

720
5
16

score 0 · Answer 4 · answered Aug 08 '16 at 12:37

I think you have forgot to bind parameter in data ajax post

$('.btn').click(function(){

            var datString = "'HOW TO GET THESE VALUES'";

            $.ajax({
            url: "data_process.php",
            type: "post",
            data: "'USERPARAMETR' : " dataString,
            success: function(data) {
                alert('OK');
            }
        }); 

    });

If you not use parameter in data_process.php page. Please use it.

Please update and check

Omari Victor Omosa · Answer 5 · 2016-08-08T20:08:52.423

First give the form an ID or class i.e. form

<form name="" method='post' action='' id='form'>...

Then you may capture all inputs from the from using the general serialize method

<script type="text/javascript">
$(document).on("click", ".btn", function(e) {
e.preventDefault();
var datastring = $("#form").serialize();

{
        $.ajax({
        url: "data_process.php",
        type: "post",
        data: dataString,
...

And on the PHP page you will receive the data as posted

$values = $_POST['data'];

$N = count($values);

for($i=0; $i < $N; $i++)
{

   $currentvalue = $values[$i];
   //now this value will loop and you will do with it the way you want to
   //For example
   $save =  mysqli_query($link, "UPDATE table SET `column` = '$currentvalue' WHERE ...") or die(mysqli_error($link));

}

Post php form jquery ajax

5 Answers5