Jquery: Pass value to next field in array format fields
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>
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 111368 visits
- search for elements in a list 111047 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98808 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 96306 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92498 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 62020 visits
- Adding methods to es6 child class 22362 visits
