当表中有多个记录时，在JS中获取隐藏值的问题（Coldfusion）

Posted 2021-04-24

这是我的表，我有这个列，让用户选择预测的时间。

<cfoutput query="getReservations">
       <tbody>
        <td><input class="form-control predicted" name="predicted" id="ReservaTempoPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#">
          <input type="hidden" name="id" class="id" value="#ReservaID#"></td>

然后我有JS代码（尝试获取用户选择的时间和该记录的ID）：

//Update the predicted time
        $(document).ready(function() {
           $(".predicted").on("change",function(event){
                var hora = this.value;
                console.log("Updating time = "+ hora);
                var id = jQuery('input[type=hidden][name=id]').val();
                console.log(id);
                $.ajax({
                        url: "horaPrevista-update-database.cfc"
                        , type: "POST"
                        , dataType: "json"
                        , data: {"method" : "updatePredicted", "returnFormat": "json", "hora": hora, "id": id}
                    }).done(function(response) {
                        console.log("response", response);
                    }).fail(function(jqXHR, textStatus, errorMessage) {
                       console.log("errorMessage",errorMessage);
                    });
          });
        });

和horaPrevista-update-database.cfc组件：

<cfcomponent>   
<cfset variables.dsn = "listareservas">

<cffunction name="updatePredicted" returntype="struct" access="remote">
   <cfargument name="hora" type="string" required="true">
   <cfargument name="id" type="numeric" required="true">

   <cfset local.response = {success=true}>

   <cftry>
       <cfquery datasource="#variables.dsn#">
           UPDATE Reservas
           SET    ReservaTempoPrevisto = <cfqueryparam cfsqltype="cf_sql_timestamp" value="#arguments.hora#"> 
           WHERE  ReservaID = <cfqueryparam cfsqltype="cf_sql_integer" value="#arguments.id#">
       </cfquery>
       <cfcatch>    
           <!--- add handling here... --->
           <cfset local.response = {success=false}>
       </cfcatch>
   </cftry>

   <cfreturn local.response>
</cffunction>

问题是当我在表上有多个记录时，它总是更新第一条记录，因为JS获取的隐藏字段ID始终是第一条记录的id。我在这做错了什么？谢谢。

答案

你没有在隐藏元素上使用唯一的ID，所以当你选择它时，JS不会知道你指的是哪一个，它只会使用它看到的第一个元素。

在这种情况下，使用数据属性提供信息比使用隐藏字段更容易。

<input class="form-control predicted" name="predicted" id="ReservaTempoPrevisto" placeholder="HH:MM" value="#timeFormat(ReservaTempoPrevisto,'HH:mm')#" data-id="#ReservaID#">

然后你可以这样做：

var hora = this.value;
console.log("Updating time = "+ hora);
var id = $(this).data('id');
console.log(id);