Question

图像一是浏览器加载页面时的显示方式。图2是双击列表元素的时间。图3显示了单击铅笔（原始表单元素）的结果。您可以看到列表项确实具有可访问的值，因为它在警报中打印整数，因此我不确定以下与此相关的注释。我也不明白这是如何复制上一个问题，因为当点击img时它满足$ _POST [＆＃39;编辑＆＃39;]的逻辑检查。请不要将其标记为重复，因为它不是！在答案中，我的问题被标记为重复，表明＆＃34; img输入元素不能将数据发布到服务器，并且必须被包含在按钮中＃34;。这在我看来一定是不正确的，因为如果不通过post传递数据，我的页面如何根据img点击改变状态，如果无法将数据传递到服务器，如何通过img点击设置POST变量。如果一个问题被标记为重复，那么原始答案必须解决相同的问题和/或包含正确的信息，如果它没有，那么我认为这个问题应该作为原件！

<html>
<head>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<?php
  if(isset($_POST['edit']) ) 
  {
  ?>
    <p>window is in edit mode</p>
  <?php
  }
  else
  {
  ?>
    <p>window is not in any mode</p>
    <form id="form-edit"  method="POST" name="form-edit"  action=" <?php echo $_SERVER['PHP_SELF']; ?>">
      <input type="image" id="edit-button" name="edit" value="1"  src="../images/pencil.png" class="course-banner-edit"> 
    </form>
    <?php
    }
    ?>
    <script>
      $(document).ready(function() {

       /**********************************************
       PROBLEM WITH THIS FUNCTION 
       **********************************************/  
        $('li').dblclick(function() {
          $('#form-edit').submit();
       /******************************************
      THE ALERT TRIGGERS AND THE VALUE IS REPORTED AS ONE WHICH IS CORRECT
        *****************************************/  
          alert( $("input[name=edit]").val() );
        });
     }); 
     </script> 
   </body>
  </html>

Answer 1

类型图像的输入元素不接受值属性。尝试这样的事情：

<form id="form-edit" method="POST" name="form-edit" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <button type="button">
        <img src="" alt="">
    </button>
    <input type="hidden" name="edit" value="1">
</form>

要更好地了解它是如何工作的，请尝试使用不同的按钮提交此表单，看看会发生什么

<html>
<head>
</head>

<body>
<?php var_dump($_POST); ?>
<form id="form-edit" method="POST" name="form-edit" action="#">
    <input type="image" id="edit-button" name="first_submit_button" src="...">
    <input type="image" id="edit-button" name="second_submit_button" src="...">
    <input type="submit" value="third submit button">
</form>

<ul>
    <li>submit via javascript</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('li').click(function() {
      $('#form-edit').submit();
    });
  });
</script>
</body>
</html>

如何使用POST全局检查javascript提交的表单

1 个答案: