PHP & jQuery form submission issue

I’m creating website project where you can edit a post after it has been published. I’ve a made the site with PHP, SQL and jQuery, and all posts that are published to the site gets outputted to the websites “feed” via a while-loop (not included in this questions content). All posts have a unique ID added to them when they are published (in the database).

The issue I now have is that the second form (post__edit) dosen’t promt at all.

I’ve figured out that I need to pass the id of a post inside an <input type="hidden" value="$postID"> field. This form below just prompts the acctual post_edit form that is used to submit a post change.

echo '
 <form method="post"> 
   <button type="button" class="post__editBtn">Edit post</button> 
   <input type="hidden" name="post__editHidden" value="'.$postID.'">
 </form>';

When the button class: post__editBtn gets clicked a jQuery click eventlistener is triggered that fades in the form (post_edit) that let’s you make the changes to a post and submit them.

$('.post__editBtn').click(function() {
    $('.post__edit').fadeIn();
});

Then what I have is a PHP if-statment that checks if the hidden value has been set. If it has then I echo out the previosly hidden form, and assigns a SESSION variable to be used later on when doing the UPDATE query.

if(isset($_POST['post__editHidden'])) {
  $_SESSION['post__editHidden'] = $_POST['post__editHidden'];

  echo'
  <form method="post" action="../../php/includes/updatePost.php" class="post__edit">
   <input type="text" name="postTitle" placeholder="Edit title" required>
   <textarea name="postMsg" maxlength="255" placeholder="Edit message" required></textarea>
   <button type="submit">Edit Post</button>
   <button class="post__edit-close">Close</button>
  </form>';
 }

To sumarize

• The first form triggers the jQuery fadeIn effect for the corret post (with $postID)
• The jQuery just fades in the second form (post__edit)
• The second form (post__edit) takes the post__editHidden value (the correct ID for the correct post) and assigns it to a SESSION variable that can later be used to make the SQL UPDATE query, that runs when the second form is finaly submitted (to updatePost.php).

I belive that because I have the first forms button set to type="button" it dosen’t submit the form so isset($_POST['post__editHidden'] dosen’t run. But if I change the button to a normal submit type then the first form is just submited and reloads the page wich it’s on. I could maybe just e.preventDefault in my jQuery fadeIn, but I don’t know if that works.

I’m quite new to PHP and SQL so I might have it all wrong. Thanks anyways!

Answer

It’s more of a suggested alternative than an answer.

---

The session variable usage would be more useful in other cases where we could obfuscate the ID value for example or reuse it in an orphan (disconnected) navigation level…

But in this case, I’d better use an only one form and fill it’s input values using Ajax.

This Demo updates values only for postId’ 32… It should work when it’s used alongside a functional dynamic ajax handler that gets an Id and returns it’s jSon object.

$('.post__editBtn').click(function() {
var myform = $('.post__edit');
var postId=$(this).attr('data-id');
    myform.find("input[name='post__editHidden']" ).val(postId);    
    
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "https://api.myjson.com/bins/kx5xs", // replace with php later
        data: {id: postId},
        success: function(data) {
           myform.find("input[name='postTitle']" ).val(data[0].title);
          myform.find("textarea[name='postMsg']" ).val(data[0].content);
        },
        error : function(){
           alert('Some error...!');
        }
    });
    
    $('.post__edit').fadeIn();
    
    
    //for demo puropose to show the new value in the update form:
    console.log($(".post__edit input[name='post__editHidden']").val());
});

.post__edit{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"post">
   Post 30<button type="button" data-id="30" class="post__editBtn">Edit post</button> 
   </div>
<div class"post">   
   Post 32<button type="button" data-id="32" class="post__editBtn">Edit post</button> 
</div>   
<div class"post">
     Post 37 <button type="button" data-id="37" class="post__editBtn">Edit post</button> 
</div>      
   <!--all data-id values would be replaced with '.$postID.' in the php loop-->
 
 <form method="post" action="../../php/includes/updatePost.php" class="post__edit">
   <input type="text" name="postTitle" placeholder="Edit title" required>
   <textarea name="postMsg" maxlength="255" placeholder="Edit message" required></textarea>
   <button type="submit">Save Post</button>
   <button class="post__edit-close">Close</button>
    <input type="hidden" name="post__editHidden" value="">
  </form>

And we add a file ex:ajax.php that we call with ajax where we get an ID, we do get that record from the database to return our json. Something like this :

<?php

$id=$_GET['id'];
$stmt = $conn->query("SELECT title,content * FROM posts WHERE postId=$id LIMIT 1");
$result=...
echo json_encode($result);

To get a jSon like this :

{"id": "32","title": "POst 32","content": "POst 32 talks about HiTECH"}