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

Question

I have a jQuery tab element with 2 tabs. There is a form on each tab that has its own action page respectively.

I also have JavaScript code that prevents the default of page refresh and posts the data to my action-page.

The second tab on my form has multiple unique form elements that are created by a CFLoop. I use this to delete specific records from the database. But when I submit the form, the query on my action page throws an error. I can see the error in Firebug but not on screen (If anyone knows of a way to see the ColdFusion error code in more detail, that would be helpful):

500 (Error Executing Database Query.)

I pass the record ID along to the query on the actionpage in the form of a hidden form field. Is there a different way that I need to do this with jQuery? Thanks for the help.

Form Code:

<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 Code:

<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 Query

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

Can anyone help? much appreciated.

Answer 1

The problem, as Matt commented, is that all the forms on your second tab have the same ID (deletemileage). So when you try to bind to the submit event handler with

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

you're actually only binding the first DOM element that jQuery finds that matches your selector. The first DOM element with an ID of deletemileage is your first form on tab2, so it gets bound correctly, and the rest don't get bound at all.

From the jQuery documentation:

"Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid."

So, two things. First, as Matt suggested define your ids like id="deletemileage#get_trips.current_row#" to make the HTML valid. Second if you want to bind the submit event to all of the forms, give them a class like class="deleteMileageForm". Then use

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

To bind your submit handler. Hope that helps.