jQuery的不发送隐藏的输入值到后端

Question

Here is my code, I am trying to send the hidden input values to the backend via jquery, but input values is not sending, I don't know why, because it looks ok for me, also the php $_POST vars is with same name as input names.

I need to send the value of the hidden input and get on the backend with the input name .

 <form id="user_page_form" method="post"> <input type="hidden" value="<?php echo htmlentities($db_user); ?>" name="user_page" /> <button id="btn_follow" class="btn btn-outline-success" style="border-radius:8px;"> <input type="hidden" value="unfollow" name="follow_button" /><i class="fa fa-user"></i>following<i class="fa fa-check"></i></button> </form> <script> $(document).ready(function() { $('#btn_follow').click(function() { var follow_and_unfollow = $("#user_page_form").serialize(); $.post( "backend/ajax/follow_and_unfollow.php", follow_and_unfollow ).done(function(data) { $("#result").html(data); }).fail(function () { }) } }); </script> <div id="result"></div> 

I am trying to send the hidden input values value="unfollow" and others , it should work since the php var is with same name of the inputs. my php backend variables:

$userpage = $_POST['user_page'];
$follow = $_POST['follow_button'];

Answer 1

You need to close ur tab before the for input. Or move the input before the button.

<form id="user_page_form" method="post">
 <input type="hidden" value="<?php echo htmlentities($db_user); ?>"name="user_page"/>
 <input type="hidden" value="unfollow" name="follow_button" />
 <button id="btn_follow" class="btn btn-outline-success" style="border-radius:8px;">
 <i class="fa fa-user"></i>following<i class="fa fa-check"></i></button>
 </form>
<script>
 $(document).ready(function() {
   $('#btn_follow').click(function() {
      var follow_and_unfollow = $("#user_page_form").serialize();
                 $.post("backend/ajax/follow_and_unfollow.php",
                        follow_and_unfollow
                 ).done(function(data) {   
                $("#result").html(data);
                         }).fail(function () {
          })        
         }
       });
 </script>      
<div id="result"></div>