In my codeigniter view, I've a div containing a select box and a textbox. Also there is an 'Add more' button. My task is to duplicate this whole div when the add more button is clicked and when I submit the form I need to get the field values from the original div and duplicated div's. How Can I acplish this? I tried duplicating div using jquery clone method. But couldn't find the solution.
Here is the code what I tried so far:
<?php echo form_open("vehicle/addparts");?>
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="parts">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="partsquantity" id="partsquantity">
</div>
</div>
</div>
<div class="row">
<input type="button" name="addmore" value="Add More" onClick="duplicate">
</div>
<?php echo form_close();?>
Javascript:
<script>
function duplicate() {
var original = document.getElementById('addparts');
var clone = original.cloneNode(true);
clone.id = "duplic";
document.bodey.append(clone);
}
</script>
In my codeigniter view, I've a div containing a select box and a textbox. Also there is an 'Add more' button. My task is to duplicate this whole div when the add more button is clicked and when I submit the form I need to get the field values from the original div and duplicated div's. How Can I acplish this? I tried duplicating div using jquery clone method. But couldn't find the solution.
Here is the code what I tried so far:
<?php echo form_open("vehicle/addparts");?>
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="parts">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="partsquantity" id="partsquantity">
</div>
</div>
</div>
<div class="row">
<input type="button" name="addmore" value="Add More" onClick="duplicate">
</div>
<?php echo form_close();?>
Javascript:
<script>
function duplicate() {
var original = document.getElementById('addparts');
var clone = original.cloneNode(true);
clone.id = "duplic";
document.bodey.append(clone);
}
</script>
-
one thing i noticed is typo in your code.
document.bodey.append(clone);this should bedocument.body.append(clone);if you are appending code in body. But your code should not work as you expect. – MutantMahesh Commented Feb 17, 2015 at 5:31 - Hi , how to add a button remove ? Thanks – hous Commented May 29, 2015 at 18:12
4 Answers
Reset to default 7<?php echo form_open("vehicle/addparts");?>
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="parts[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="partsquantity[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<?php echo form_close();?>
rename the of the inputs to be array so that if you submit the form it will submit all the input elements
you will receive a array of values with particular naming groupings
javascript
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
// insert duplicate before button div
before.before(clone);
});
});
</script>
enter code here
I think the main problem is that you are cloning the div and appending the div inside the body. This means your form doesn't contain your cloned divs. If you can use jquery try following code
var clonedDiv = $('#addparts').clone();
function duplicate() {
$("#addparts").after(clonedDiv );
}
And now try to submit the form.
I am not familiar with codeigniter. But i am providing the simple jquery code to add the clone of existing form div.
I modified the two lines:
<div class="row button-div">
<input type="button" name="addmore" class="addmore" value="Add More">
then use the following jquery code.
$(document).ready(function(){
$('.addmore').click(function(e){
$clone = $('#addparts').clone();
$clone.attr('id', 'row-' + ($('.row').length + 1) );
$clone.insertBefore($('.button-div'));
});
});
Note: Not forget to include jquery on page.
check jsfiddle here http://jsfiddle/msankhala/ybqzwx9n/
<div id='addparts' class='clone'>
<div class="row" id="copy">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="parts[]">
<option value="">select disabled>SelectParts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="partsquantity[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div></div>
JavaScript:$("#addMore").click(function (e) {
e.preventDefault();
var cloned = $("#copy:first").clone(true)
.appendTo('#addparts');
});