PHP form submission using jQuery not working inside a table

I have the following function which returns data of users.

function returnChild(){
  global $pdo;
  $stmt = $pdo->prepare("SELECT * FROM children
                         INNER JOIN districts ON children.ch_district = districts.dst_id
                         INNER JOIN states ON districts.dst_state = states.st_id
                         ORDER BY children.ch_id DESC");
  $stmt-> execute();

  $html = '<div class="row">
            <div class="col-md-12 mt-5">
              <h2>List of Children <a href="#" class="action btn btn-dark pull-right" data-toggle="modal" data-target="#pickupDetailsModal">+ Add New</a></h2>
                <div class="mt-4">
                  <table class="table table-striped">
                    <tr>
                      <th>Name</th>
                      <th>Sex</th>
                      <th>Date of Birth</th>
                      <th>Father\'s Name</th>
                      <th>Mother\'s Name</th>
                      <th>State</th>
                      <th>District</th>
                      <th>Action</th>
                    </tr>';
  while($f = $stmt->fetch()){
    $html .= '<tr>
                <td>'.$f['ch_name'].'</td>
                <td>'.ucfirst($f['ch_sex']).'</td>
                <td>'.date('jS M, Y', strtotime($f['ch_dob'])).'</td>
                <td>'.$f['ch_father'].'</td>
                <td>'.$f['ch_mother'].'</td>
                <td>'.$f['st_name'].'</td>
                <td>'.$f['dst_name'].'</td>
                <td>
                  <div class="row">
                    <div class="col-md-3">
                      <span class="text-info pointer" data-toggle="modal" data-target="#childUpdate"><i class="fa fa-edit fa-2x"></i></span>
                    </div>
                    <div class="col-md-3">
                      <form method="post" action="processes/child.php">
                        <input type="hidden" value="delete" name="type" class="type">
                        <input type="hidden" value="'.$f['ch_id'].'" name="id">
                        <button type="submit" class="btnAction no-btn text-danger"><i class="fa fa-trash fa-2x"></i></button>
                      </form>
                    </div>
                  </div>
                </td>
                <tr>
                  // THIS FORM IS NOT WORKING
                  <form method="post" action="processes/child.php">
                    <input type="hidden" value="update" name="type" class="type">
                    <input type="hidden" value="'.$f['ch_id'].'" name="id">
                    <td><input type="text" class="form-control" name="name" value="'.$f['ch_name'].'"></td>
                    <td><input type="text" class="form-control" name="sex" value="'.ucfirst($f['ch_sex']).'"></td>
                    <td><input type="text" class="form-control" name="dob" value="'.date('Y-m-d', strtotime($f['ch_dob'])).'"></td>
                    <td><input type="text" class="form-control" name="father" value="'.$f['ch_father'].'"></td>
                    <td><input type="text" class="form-control" name="mother" value="'.$f['ch_mother'].'"></td>
                    <td><input type="text" class="form-control" name="state" value="'.$f['st_name'].'"></td>
                    <td><input type="text" class="form-control" name="district" value="'.$f['dst_name'].'"></td>
                    <td><button type="submit" class="btnAction btn btn-dark">Update</button></td>
                  </form>
                </tr>
              </tr>';
  }
  $html .= '</table></div></div></div>';
  $html .= returnAJAX();
  return $html;
}

returnAJAX() function:

function returnAJAX(){
  $html = '<script>
            $(document).ready(function(){
              $(".btnAction").on("click", function(e){
                e.stopImmediatePropagation();
                var form = $(this).closest("form");
                var type = form.find(".type").val();
                var dataString = form.serialize();
                var url = form.attr("action");
                alert(dataString);
                $.ajax({
                  type: "POST",
                  dataType : "json",
                  url: url,
                  data: dataString,
                  cache: true,
                  beforeSend: function(){
                    $(".message").hide();
                    $(".overlay").show();
                  },
                  success: function(json){
                    $(".message").html(json.status).fadeIn();
                    setTimeout(function(){
                      $(".message").html(json.status).fadeOut();
                    }, 3000);
                    if(json.returnType == "states"){
                      $("#stateContent").html(json.content).fadeIn();
                    }else if(json.returnType == "districts"){
                      $("#districtContent").html(json.content).fadeIn();
                    }else{
                      $("#childContent").html(json.content).fadeIn();
                    }
                    $(".overlay").hide();
                    $("html, body").animate({ scrollTop: $(".message").offset().top }, "slow");
                  }
                });
                return false;
              });
              $(".editContent").on("click", function(e){
                e.stopImmediatePropagation();
              `  $(".contentHidden").fadeToggle();
                $(".contentVisible").fadeToggle();
              });
            });
          </script>';
  return $html;
}

The problem is that the second form is not working. When I click on the Update button then the alert(dataString) returns nothing on the alert box. The alert box shows up but it’s empty as shown in the screenshot below:

VIEW SCREENSHOT

However, it works perfect when I take it out of table tags (td, tr etc.) but not when it’s in the above format. The first form is working perfectly fine. The second form is not detecting the form fields here. What seems to be the issue? What am I missing here? I am stuck in this since 2 hours without a solution.

2 thoughts on “PHP form submission using jQuery not working inside a table”

  1. What do you want to do in this line of code?

    `  $(".contentHidden").fadeToggle();
    

    I mean … character ‘`’

    In js, you can try

    $(document).ready(function(){
      function actionUpdate(event){
        event.stopImmediatePropagation();
        var form = $(this).closest("form");
        var type = form.find(".type").val();
        ///code of you
        return false;
      }
      function clickEditContent(event){
        event.stopImmediatePropagation();
        $(".contentHidden").fadeToggle();
        $(".contentVisible").fadeToggle();
      }
    });
    

    In html, you write

    <button type="submit" class="btnAction btn btn-dark" onclick="actionUpdate(event)">Update</button>
    
    Reply

Leave a Comment