I have a div
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
Then I have the user clicking on a more button and the div above being cloned, and appended below it.
My question is:
How can I have the value of booking[depart][n]
being equal to booking[return][n-1]
everytime the elements are duplicated. (where n
is just the number representing the index of the input in the field array).
EDIT
The expected html(if I change the id of the cloned div, but an answer concentrating on the name attributes would be prefarable)
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
<div class="input-daterange input-group" id="datepicker0">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
<div class="input-daterange input-group" id="datepicker1">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
.clone() will copy the values, so we will have to update them manually.
My approach is suitable for this single use-case, but I would recommend to use some data-binding MVC library to separate your data from the DOM. It's getting really hard with jQuery, if you want to validate user input.
Please consider the following snippet:
// Wait for DOMReady.
$(function() {
var lastId = null,
count = 0,
// Put everything in to variables for optimal usage.
$target = $('body'),
$btn = $('#btn');
$btn.on('click', function() {
// Clone the object.
var $cloneEl = (lastId !== null) ? $('#' + lastId).clone() : $('#datepicker').clone();
$returnEl = $cloneEl.find('input[name="booking[return][]"]'),
$departEl = $cloneEl.find('input[name="booking[depart][]"]');
if ($returnEl.val() !== '') {
$departEl.val($returnEl.val());
$returnEl.val('');
} else {
$departEl.val('');
}
lastId = $cloneEl.attr('id') + count;
// Update the "id" attribute and insert in to <body>
$cloneEl.attr('id', lastId).appendTo($target);
count++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Add new input group</button>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="booking[depart][]" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="booking[return][]" />
</div>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I'm using gridstack. js to display a "layout" to users so they can build an ad page, and while I'm able to get the width and height of the cell after it's resized, as soon as the resize is done, the ability to resize the cell again is lost.
It seems that the ajax call is pulling data back in which.
I have some code that will find the height of a div with the class name. tab-content-header and then change the line-height of the h1 inside of that div.
I have the following Backbone. js view, and it works fine.