Ajax get dynamic id for the submit button of the form PHP MySQL

Question

I have a form in PHP & MySQL and I want to submit it with AJAX.

I Have similar data so I have put these data in a foreach loop.

The problem is that when I try to submit the first row data it all goes well but it changes the data in all rows. and when I try to submit other data except the first row it doesn't submit at all.

I think the problem is because the submit button always gets the same id and therefore goes to the first row always.

I don't know how to get the value in Ajax.

Here goes the code:

      //php form

           <?php
            $pid = $_GET['pid'];
            include('config.php');
            $timeline_query="SELECT * FROM timeline_table WHERE pid=$pid";
            $result_timeline=mysqli_query($conn,$timeline_query);
            if(!$result_timeline){
                echo "Error: " . $conn->error;
            }
            $timelines=array();
            while($row_timeline=mysqli_fetch_assoc($result_timeline)){
              $timelines[]=$row_timeline;
            }
          ?>
              <?php
            $x = 0;
            foreach ($timelines as $timeline):?>
            <div class="card">
              <div class="card-header" id="heading<?php echo $x; ?>">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#collapse<?php echo $x; ?>" aria-expanded="true" aria-controls="collapse<?php echo $x; ?>">
                    <?php echo $timeline['timeline_title'];?>
                  </button>
                </h5>
              </div>
              <div id="collapse<?php echo $x; ?>" class="collapse" aria-labelledby="heading<?php echo $x; ?>" data-parent="#accordion">
                <div class="card-body">
                  <form id="register_form">
                     <input type="text" id="tid" name="tid" value="<?php echo $timeline['tid']; ?>"/>

                    <textarea class="form-control" rows="4" id="timeline_description" name="timeline_description"><?php echo $timeline['timeline_description'];?></textarea>
                    <input id="submit" type="submit" name="submit" value="Submit" />
                  </form>
                </div>
              </div>
            </div>
          <?php $x++; endforeach;


   // ajax function
  $(document).ready(function(){
  $("#submit").click(function(){
    var timeline_description = $("#timeline_description").val();
    var tid = $("#tid").val();
    alert(timeline_description);
    alert(tid);
    // Returns successful data submission message when the entered information is stored in database.
    // var dataString = 'timeline_description='+timeline_description+'&pid='+ pid + '&tid='+ tid +;
    var dataString = 'timeline_description='+timeline_description;
    alert(dataString);
    if(timeline_description=='')
    {
      alert("Please Fill All Fields");
    }
    else
    {
      // AJAX Code To Submit Form.
  $.ajax({
    type: "POST",
    url: "process.php?tid"=+tid,
    data: dataString,
    cache: false,
    success: function(result){
      alert(result);
    }
  });
  }
  return false;
  });
});

  //process.php
   <?php
   include('config.php');
   $tid=$_GET['tid'];

 if( $_POST['timeline_description']==NULL ){ $timeline_description=''; } 
 else { $timeline_description=$_POST['timeline_description']; }

  $query_timeline = "UPDATE timeline_table SET 
  timeline_description='$timeline_description' WHERE tid=$tid ";
    $result=mysqli_query($conn,$query_timeline);
   if(!$result){
   echo "Error: " . $conn->error;
 }
?>

Any idea?

Answer 1

Id of elements must be unique. The abnormal behaviour of your code is due to non-unique ids of your input elements.

In the case, If you cannot assign unique ids to elements you can achieve desired output by using this keyword and siblings() method in jquery.

Instead of

var timeline_description = $("#timeline_description").val();
var pid = $("#pid").val();
var tid = $("#tid").val();

try to get values in this way.

var timeline_description = $(this).siblings('#timeline_description').val();
var pid = $(this).siblings('#pid').val();
var tid = $(this).siblings('#tid').val();

Answer 2

I see there a problem with Yours inputs id - <input type="text" id="pid" - this is in foreach, so You have multiple elements with same id. So var pid = $("#pid").val(); will return You always a value of first found element. Try to use arrays:

<input type="text" id="pid[$pid]" name="pid[$pid]" value="<?php echo $pid ?>"/>
<input type="text" id="tid[$pid]" name="tid[$pid]" value="<?php echo $timeline['tid']; ?>"/>

Please remember one thing: id of any element in html PAGE (whole document) must be unique.