As a newcomer to web development, I'm looking for some guidance! I've set up a page where Rails fetches room data from the database and displays it in a table. Everything is going smoothly, but I want to enable users to click a button next to each row to book a room.
Currently, it's working about 80% of the way. However, I've encountered an issue where I have a form nested within another form, causing the booking action to apply to the last row in the table. I've read about potential solutions involving JavaScript, but as a beginner, I'm not well-versed in JavaScript.
One workaround could involve placing the Reservation.new form inside the all_rooms form, which might resolve the issue. However, I also need to obtain the datetimepicker value from the user. That's why I initially placed it outside the form.
<%= form_for(Reservation.new, remote: true, format: :js, url: {controller: "booker", action: "create"}) do |new_res| %>
<div class="calender">
<%= new_res.date_field :date, :value => (Time.now + 6.days).strftime('%Y-%m-%d') , min: 6.days.from_now, max: 90.days.from_now %>
</div>
<div class="time">
<%= new_res.time_select :start_time , {:default => {:hour => 10 , :minute => 00}, minute_step: 15 , :start_hour => 8, :end_hour => 18, :hour => 11} %>
<%= new_res.time_select :end_time , {:default => {:hour => 14 , :minute => 00}, minute_step: 15 , :start_hour => 8, :end_hour => 18, :hour => 11} %>
</div>
</div>
<div class="t_Data">
<table class="rooms_to_book">
<tr>
<th>Name</th>
<th>Size</th>
<th>Building</th>
<th>Equipment</th>
<th>Book</th>
</tr>
<% @all_rooms.each do |r| %>
<tr>
<td><%= r.room %></td>
<td><%= r.room_size %></td>
<td><%= r.building %></td>
<td><%= r.room_description %></td>
<td>
<%= new_res.hidden_field :room, value: r.room %>
<%= new_res.hidden_field :building, value: r.building %>
<%= new_res.hidden_field :room_size, value: r.room_size %>
<%= new_res.hidden_field :room_description, value: r.room_description %>
<%= new_res.submit "Book" %>
</td>
</tr>
<% end %>
</table>
</div>
<% end %>
My question is this: how can I resolve the issue so that when a user clicks 'Book', a new reservation is created with all the relevant data, including the user-selected date, specific to each row?