Проблема с получением скрытого значения в JS, когда в таблице несколько записей (Coldfusion)

Question

Это моя таблица, где у меня есть этот столбец, который позволяет пользователю выбрать прогнозируемое время.

<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 (который пытается получить время, выбранное пользователем, и идентификатор этой записи):

//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, всегда является идентификатором первой записи. Что я здесь не так делаю? Благодарю.

Answer 1

Вы не используете уникальный идентификатор для скрытого элемента, поэтому 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);