Question

尝试处理表单并保持在同一页面上。我的目标是能够点击照片下的按钮对它们进行分类。我会在每个页面上有100张照片，所以我宁愿只能点击一下，而不是每张照片都有一个专用页面。按照这里的几个线程，我几乎就在那里。我只需要一个正确的方向。我的代码工作，除了它读取所有三种形式，而不只是我点击的那个。每个表单都有一个按钮，可以设置1,2或3的类别。无论按哪个按钮，它都会将类别更新为3.因此，它会从表单中泄漏并读取所有表单，最后一个是3，它会更新价值为3。

非常感谢任何帮助。

<!--(Header)-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function() {
    $.ajax({
        type: 'POST',
        url: "test_ajax_update_code.php",
        data: $("FORM").serialize(),
    });
});
</script>
<!--(Body)-->
<img src="GLJ9988.jpg" width="500" height="333" border="0"><br>
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="1" >
    <input type="submit" value="1">
</form>&nbsp;&nbsp;&nbsp;
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="2" >
    <input type="submit" value="2">
</form>&nbsp;&nbsp;&nbsp;
<form>
    <input name="num" type="hidden" value="9988" >
    <input name="shw" type="hidden" value="3" >
    <input type="submit" value="3">
</form>

Answer 1

你不需要3个表格...... 1就足够了，只需编辑第一个表单，用选择框替换第二个输入（name = shw）并添加几行javascript（jQuery）

<form>
  <input name="num" value="9988">
  <button id="1">cat 1</button>
  <button id="2">cat 2</button>
  <button id="3">cat 3</button>
  <select name="shw" style="display:none;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
</form>
<script type="text/javascript">
  $("form button").on("click",function(){
    var selected = $(this).attr("id");
    $("form").find("select").val(selected);  
    // ajax here
  });
</script>

Answer 2

将点击事件绑定到您的提交按钮，并根据点击的按钮表单

触发ajax

$('input[type=submit]').on("click",function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: "test_ajax_update_code.php",
        data: $(this).parent().serialize(),
    });
})

$(this).parent()选择this之外的第一个元素，在这种情况下是表单元素

使用preventDefault来阻止页面刷新

使用多个表单并使用Ajax / php / jquery停留在页面上语法帮助需要

2 个答案: