jQuery 将隐藏表单字段发布到 ColdFusion 查询

Question

我有一个带有 2 个选项卡的 jQuery 选项卡元素。每个选项卡上都有一个表单，分别有自己的操作页面。

我还有 JavaScript 代码可以防止默认的页面刷新并将数据发布到我的操作页面。

我表单上的第二个选项卡有多个由 CFLoop 创建的独特表单元素。我使用它从数据库中删除特定记录。但是当我提交表单时，我的操作页面上的查询会引发错误。我可以在 Firebug 中看到错误，但在屏幕上看不到（如果有人知道更详细地查看 ColdFusion 错误代码的方法，那将很有帮助）：

500（执行数据库查询时出错。）

我将记录 ID 以隐藏表单字段的形式传递给操作页上的查询。我需要用 jQuery 来做这件事吗？感谢您的帮助。

表格代码：

<cfloop query="get_trips">
  <tr class="vehicle-log-table">
    <td class="vehicle-log-table">#DateFormat(get_trips._date, "mm-dd-yyyy")#</td>
    <td class="vehicle-log-table"><div align="center">#get_trips.total_mileage#</div></td>
    <td class="vehicle-log-table"><div align="center">#get_trips.expenses#</div></td>
    <td class="vehicle-log-table">
      <div align="right"> 
        <form class="deleteMileageForm" id="deletemileage#get_trips.currentRow#" method="post">
          <input class="vehicle-log-form" type="submit" id="submit2" name="submi2" value="Delete">
          <input type="hidden" id="hidden" name="hidden" value="#get_trips.id#">
        </form>           
      </div><br />

      <span class="errorTab2" style="display:none"> <font color="##FF0000"> <strong>Trip Not Deleted</strong></font></span>
      <span class="successTab2" style="display:none">
        <font color="##00FF00"> 
          <strong>Trip Deleted Successfully</strong>
        </font>
      </span>  
    </td>
  </tr>
</cfloop>

jQuery 代码：

<script>
  $(document).ready(function () {
    //Submit form to add record.
    $('#addmileage').submit(function (e) {          
      e.preventDefault();
      $.ajax({
        data: $('#addmileage').serialize(),
        type:'POST',
        url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
        success: function(){
          $('.success').fadeIn(200).show();
          $('.error').fadeOut(200).hide();
        }
      });
    });


    $('.deleteMileageForm').submit(function (e) {          
      e.preventDefault();
      $.ajax({
        data: $('.deleteMileageForm').serialize(),
        type:'POST',
        url:'actionpages/delete_trip.cfm',
        success: function(){
          $('.successTab2').fadeIn(200).show();
          $('.errorTab2').fadeOut(200).hide();
        }
      });
    });     
  });    
</script>

ColdFusion 查询

<!---Delete Trip --->                          
<cfoutput>
  <cfquery name="deleteTrips" datasource="#datasource#">
    delete from vehicle_log
    where ID = #form.hidden#
  </cfquery>
</cfoutput>

有人可以帮忙吗？非常感激。

Answer 1

正如马特所评论的那样，问题在于第二个选项卡上的所有表单都具有相同的 ID（删除里程）。因此，当您尝试使用

绑定到提交事件处理程序时

$('#deletemileage').submit(function (e) { ... } );

您实际上只是绑定了 jQuery 找到的与您的选择器匹配的第一个 DOM 元素。 ID 为 deletemileage 的第一个 DOM 元素是您在 tab2 上的第一个表单，因此它被正确绑定，其余的则根本不被绑定。

来自 jQuery 文档：

"每个 id 值在一个文档中只能使用一次。如果超过 一个元素被分配了相同的 ID，使用该 ID 的查询 只会选择 DOM 中第一个匹配的元素。这种行为 然而，不应依赖；包含多个文件的文档 使用相同 ID 的元素无效。”

所以，有两件事。首先，正如马特建议的那样，定义您的 ID，例如 id="deletemileage#get_trips.current_row#" 以使 HTML 有效。其次，如果您想将提交事件绑定到所有表单，请给它们一个类似 class="deleteMileageForm" 的类。然后使用

$(".deleteMileageForm").submit(function(e) { ... } );

绑定您的提交处理程序。希望对您有所帮助。