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>
-
02:40
-
01:50
-
01:00
How to add Admob banner to all the activities in native code using Android Studio?
-
11:20
How To Prevent \ Showing Up Next To Quotation Marks? [duplicate]
-
10:50
RFID 8500 TC52 Connection Failed RFID Batch mode in Progress
-
2:40
NodeJs Lan application on RPi to google cloud platform to custom domain
-
11:30
MySQL: How to copy column of same table to another column with unix time convert
-
04:30
-
8:50
- search for elements in a list 109747 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 102438 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 97336 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 94734 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 91182 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 60087 visits
- Adding methods to es6 child class 20805 visits
