Question

Desired Functionality

  • Two input fields that both have drag and drop functionality.
  • With the generated 'value' div beneath each input field.

Current Functionality

Four generated 'value' divs are being created instead of two.

Plugin Demo (select the Plugins tab and scroll to "drag_drop")

http://brianreavis.github.io/selectize.js

What I've Tried:

http://jsfiddle.net/rwone/E72q5/5/

HTML Form

<!-- simple html form - a container with left and right divs -->

<div class="my_form_page_content">
<form id="my_form_name" name="my_form_name">
<div class="my_form_container">
<div class="my_form_left">
<p>field one</p>
<p>field two</p>
</div>
<div class="my_form_right">
<div class="input_wrapper">
<input type="text" id="input-sortable-1" class="input-sortable demo-default" value="input 1 value, lala1, lala1a">
</div>
<div class="input_wrapper">
<input type="text" id="input-sortable-2" class="input-sortable demo-default" value="input 2 value, lala2, lala2a">
</div>
</div>
<div class="my_form_button">
<button type="submit">submit</button>
</div>
</div>
</form>
</div>

jQuery

// aim:  to have a unique 'value' div beneath each input field. 

// selectize drag and drop functionality

$('.input-sortable').selectize({
plugins: ['drag_drop'],
delimiter: ',',
persist: false,
create: function(input) {
return {
value: input,
text: input
}
}
});

// the js that should add a 'value' div after each input box

$(function() {
var $wrapper = $('.input_wrapper');
// show current input values
$('select.selectized,input.selectized', $wrapper).each(function() {
var $container = $('<div>').addClass('value').html('Current Value: ');
var $value = $('<span>').appendTo($container);
var $input = $(this);
var update = function(e) { $value.text(JSON.stringify($input.val())); }

$(this).on('change', update);
update();

$container.insertAfter($wrapper);
});
});
Was it helpful?

Solution

i have done a fiddle as per your input.

http://jsfiddle.net/Shinov/csNgy/

 $input.parents(".field-row:first").append($container)
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top