jquery - JavaScript - Dynamic field with color adding too much fields -
i created dynamic adding fields form have problem color input:
standard inputs added input color on first click not adding , on next click 'add field' adding next fields color inputs/.
here code:
html:
<div class="form-group" id="propositionsfields"> <label class="col-md-4 control-label">options</label> <div class="row"> <div class="col-8"> <input class="form-control propositionfield" name="proposition[]" type="text" /> </div> <div class="col-2"> <input type="text" class="form-control jscolor {onfinechange:'updatecolor(this)'}" /> <input type="hidden" class="color-picker" value="" /> </div> <div class="col-2"> <button class="add-proposition-field propositionmanage">add field</button> </div> </div> </div> js:
$(document).ready(function() { var addfield = $(".add-proposition-field"); var removefield = $('.remove-proposition-field'); addfield.click(function(e) { var rodzic = $('.colorinput'); e.preventdefault(); var = $('.propositionfield').size(); var color = 'ff0000'; var input = document.createelement("input"); input.classname = "form-control"; input.setattribute("value", color); input.setattribute("type", 'text'); var picker = new jscolor(input); var newfield = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="field no."/></div><div class="col-2 colorinput"></div><div class="col-2"><button class="remove-proposition-field propositionmanage">usuń pole</button></div></div>'; i++; rodzic.append(input); $(" #propositionsfields ").append(newfield); }); $('body').on('click', '.remove-proposition-field', function() { $(this).parent('div').parent('div').remove(); }); });
the issue if because add element before exist. , colorinput content added colorinput class. have remove first element , add last parameter add in last element
$(document).ready(function() { var addfield = $(".add-proposition-field"); var removefield = $('.remove-proposition-field'); addfield.click(function(e) { e.preventdefault(); var = $('.propositionfield').size(); var color = getrandomcolor(); var input = document.createelement("input"); input.classname = "form-control"; input.setattribute("value", color); input.setattribute("type", 'text'); var picker = new jscolor(input); var newfield = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="field no."/></div><div class="col-2 colorinput"></div><div class="col-2"><button class="remove-proposition-field propositionmanage">usuń pole</button></div></div>'; i++; $(" #propositionsfields ").append(newfield); $('.colorinput:last').append(input); }); $('body').on('click', '.remove-proposition-field', function() { $(this).parent('div').parent('div').remove(); }); }); function updatecolor(jscolor) { $('.color-picker').val(jscolor); $(this).val(jscolor); } function getrandomcolor() { var letters = '0123456789abcdef'; var color = ''; (var = 0; < 6; i++) { color += letters[math.floor(math.random() * 16)]; } return color; }div{ width:100% !important }<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="http://beta.leonardo.pl/afrisoexpert/public/css/fluidable.css" rel="stylesheet"/> <div class="form-group" id="propositionsfields" > <label class="col-md-4 control-label">options</label> <div class="row"> <div class="col-8"> <input class="form-control propositionfield" name="proposition[]" type="text" /> </div> <div class="col-2"> <input type="text" class="form-control jscolor {onfinechange:'updatecolor(this)'}" /> <input type="hidden" class="color-picker" value="" /> </div> <!-- /.col-2 --> <div class="col-2"> <button class="add-proposition-field propositionmanage">add field</button> </div> <!-- /.col-2 --> </div> <!-- /.row --> </div> <!-- /.form-group -->
Comments
Post a Comment