Jquery: Pass value to next field in array format fields

301
November 22, 2016, at 09:55 AM

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>
Answer 1

.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>

READ ALSO
jQuery gridstack.js plugin: get &ldquo;cell&rdquo; width and height but keep it resizable

jQuery gridstack.js plugin: get “cell” width and height but keep it resizable

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.

355
Object from javascript need to get data out of array

Object from javascript need to get data out of array

It seems that the ajax call is pulling data back in which.

322
JQuery only changing first instance

JQuery only changing first instance

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.

321
Backbone Edit View, destroy and re-display problems

Backbone Edit View, destroy and re-display problems

I have the following Backbone. js view, and it works fine.

344