我有一个表单，可以在页面上创建新的“预订”。有时每个预留（模型）有多个时隙（模型）。我编写了一些克隆表单的Jquery，并根据从我的控制器提供的javascript数组中的对象数添加一个新表单。除了表单上的“提交”按钮外，一切似乎都在工作。代码克隆表单，创建所有唯一的类/ ID，但不会让我提交表单。我想知道它是否与真实性令牌有关？我没有使用Ajax，因为我已经将所有数据作为来自我的控制器的数组加载。关于为什么不允许我提交的任何想法？
FORM MODAL
<!-- Calendar Click Modal -->
<div class="modal" tabindex="-1" role="dialog" id="calendarClick">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header py-0 mt-0">
<button type="button" class="close mt-1" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4> <%= @experience.name%></h4><hr class="my-1" style="width:60%"/>
<small><h5 class="modal-title mb-3" id="calClickTitle">Modal title</h5></small>
</div>
<div class="modal-body forClone" id="singleModalContent">
<div class="row toClone">
<div class="col-md-1">
<div class="timeline-badge btn-primary">
<span class="timeline-day" id="badgeDay"></span>
<span class="timeline-month" id="badgeMonth"></span>
</div>
</div>
<div class="col-md-5">
<h5 class="pull-left"><%= @experience.name %></h5>
<p class = "text-babu pull-left"><%= @experience.location %></p>
<p class = "pull-left">Total Price: $<%= @experience.price %></p>
</div>
<div class="col-md-6 pull-right form-group">
<span class="pull-right" id="clickInventory"></span><br/>
<span class="pull-right" id="clickStart" style ="text-align: right;"></span><br/>
<span class="pull-right" id="clickEnd" style ="text-align: right;"></span><br/><br/>
<%= form_for ([@experience,@experience.reservations.new]) do |f| %>
<%= f.hidden_field :timeslot_id, class:'res_id'%>
<div id="quantitySpinner">
<label for="example-number-input" class="col-form-label">Select Quantity</label>
<input class="form-control" name="reservation[quantity]" value="0" min="0" max="5" type="number" id="single_reservation_quantity" required="true">
</div>
</div>
<hr/>
<div class="col-md-12 text-center">
<h3 class="pt-1" id="singleTotal">Total: $0</h3>
</div>
<div class="modal-footer px-2 py-4 container">
<%= f.submit "Book Now", class: "btn btn-primary btn-block", id: "calBook"%>
<% end %>
</div>
</div>
</div>
</div>
</div>
</div>
的Javascript
var cal = $("#calendar"); //put the ID of your calendar element here
var evts = cal.fullCalendar('clientEvents'); //get all in-memory events
var selectedEvent = null;
var selectedEvents = [];
for (i in evts) {
if (evts[i].rendering == "background" && start.isBefore(evts[i].end) && end.isAfter(evts[i].start)) {
selectedEvent = evts[i];
selectedEvents.push(evts[i]);
}
}
var eventID = selectedEvent.timeslot;
console.log(selectedEvents);
var dec = moment("2014-12-01T12:00:00Z");
var timezone2 = dec.tz('<%= j @experience.timezone %>').format('z');
console.log(timezone2);
$.each(selectedEvents , function(index) {
if (index == 0) {
/* This is where we need to run the javascript over the initial
form. This will load the first timeslot in the array for the
chosen day. */
$(".timezone2").html(timezone2);
$('#clickStart').html("Start Time: <span class='text-babu'>" + moment(this.start_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + "<span class='timezone2'> " + timezone2 + "</span></span> </span>");
$('#badgeDay').html(moment(this.start_time).tz('UTC').format('Do'));
$('#badgeMonth').html(moment(this.start_time).tz('UTC').format('MMMM'));
$('#clickEnd').html("End Time: <span class='text-babu'>" + moment(this.end_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + "<span class='timezone2'> " + timezone2 + "</span></span> </span>");
$('#clickInventory').html("Spaces Available: <span class='text-babu'>" + this.inventory + "</span>");
$("#single_reservation_quantity").attr("max", this.inventory);
$('#calClickTitle').html(moment(this.start_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + " - " + moment(this.end_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a'));
if(this.inventory == 0){
$('#calBook').attr("disabled", true)
$('#calBook').attr("class", "btn btn-normal btn-block")
$('#calBook').val("SOLD OUT")
$('#quantitySpinner').hide()
}
else{
$('#calBook').attr("disabled", false)
$('#calBook').attr("class", "btn btn-primary btn-block")
$('#calBook').val("BOOK NOW")
$('#quantitySpinner').show()
}
$('.res_id').val(this.timeslot);
var price = this.price
var qty = "0 quantity selected"
$("#single_reservation_quantity").bind('keyup mouseup', function () {
var qty = $('#single_reservation_quantity').val();
$('#singleTotal').html("Total: $" + qty * price)
console.log(qty + " quantity selected");
console.log('Total: $' + qty * price)
});
}
else {
console.log(index + " " + this.timeslot)
/* This is where we need to clone the form and iterate through
each of the index values and attach them to the res_id. Need to figure
out of this can be done through a partial, or if better done through raw html.
STEP 1
Create procedural variables and clone form and append to first
form in list.*/
var timeslotClass = 'timeslot_' + this.timeslot;
var resIDClass = 'res_id_' + this.timeslot;
var clickStartClass = 'clickStart_' + this.timeslot;
var clickEndClass = 'clickEnd_' + this.timeslot;
var badgeDayClass = 'badgeDay_' + this.timeslot;
var badgeMonthClass = 'badgeMonth_' + this.timeslot;
var clickInventoryClass = 'clickInventory_' + this.timeslot;
var singleReservationQuantityClass = 'single_reservation_quantity_' + this.timeslot;
var calClickTitleClass = 'calClickTitle_' + this.timeslot;
var calBookClass = 'calBook_' + this.timeslot;
var quantitySpinnerClass = 'quantitySpinner_' + this.timeslot;
var singleTotalClass = 'singleTotal_' + this.timeslot;
$('.toClone').clone().addClass(timeslotClass).appendTo('.forClone');
/*STEP 2
Add unique index values to all ID's and Classes being used.*/
$('.' + timeslotClass + ' .res_id').removeClass('res_id').addClass(resIDClass);
$('.' + timeslotClass + ' #clickStart').attr('id', clickStartClass);
$('.' + timeslotClass + ' #clickEnd').attr('id', clickEndClass);
$('.' + timeslotClass + ' #badgeDay').attr('id', badgeDayClass);
$('.' + timeslotClass + ' #badgeMonth').attr('id', badgeMonthClass);
$('.' + timeslotClass + ' #clickInventory').attr('id', clickInventoryClass);
$('.' + timeslotClass + ' #single_reservation_quantity').attr('id', singleReservationQuantityClass);
$('.' + timeslotClass + ' #calClickTitle').attr('id', calClickTitleClass);
$('.' + timeslotClass + ' #calBook').attr('id', calBookClass);
$('.' + timeslotClass + ' #quantitySpinner').attr('id', quantitySpinnerClass);
$('.' + timeslotClass + ' #singleTotal').attr('id', singleTotalClass);
/* STEP 3
Run javascript commands on procedural classes */
$(".timezone2").html(timezone2);
$('#' + clickStartClass).html("Start Time: <span class='text-babu'>" + moment(this.start_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + "<span class='timezone2'> " + timezone2 + "</span></span> </span>");
$('#' + badgeDayClass).html(moment(this.start_time).tz('UTC').format('Do'));
$('#' + badgeMonthClass).html(moment(this.start_time).tz('UTC').format('MMMM'));
$('#' + clickEndClass).html("End Time: <span class='text-babu'>" + moment(this.end_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + "<span class='timezone2'> " + timezone2 + "</span></span> </span>");
$('#' + clickInventoryClass).html("Spaces Available: <span class='text-babu'>" + this.inventory + "</span>");
$("#" + singleReservationQuantityClass).attr("max", this.inventory);
$('#' + calClickTitleClass).html(moment(this.start_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a') + " - " + moment(this.end_time).tz('UTC').format('MMMM Do YYYY, h:mm:ss a'));
if(this.inventory == 0){
$('#' + calBookClass).attr("disabled", true)
$('#' + calBookClass).attr("class", "btn btn-normal btn-block")
$('#' + calBookClass).val("SOLD OUT")
$('#' + quantitySpinnerClass).hide()
}
else{
$('#' + calBookClass).attr("disabled", false)
$('#' + calBookClass).attr("class", "btn btn-primary btn-block")
$('#' + calBookClass).val("BOOK NOW")
$('#' + quantitySpinnerClass).show()
}
$('.' + resIDClass).val(this.timeslot);
var price = this.price
var qty = "0 quantity selected"
$("#" + singleReservationQuantityClass).bind('keyup mouseup', function () {
var qty = $("#" + singleReservationQuantityClass).val();
$('#' + singleTotalClass).html("Total: $" + qty * price)
console.log(qty + " quantity selected");
console.log('Total: $' + qty * price)
});
}
});