I want to dynmaically add rows in an html form. However, I have small issue: My form is:
<html lang="en">
<head>
<!-- CSS -->
<link rel="stylesheet" href="http://ift.tt/1jAc5cP"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ift.tt/1mWWrGH"></script>
<script type="text/javascript" src="http://ift.tt/25pxzjl"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id = "mydiv" class="controls multi-field-wrapper row">
<div class="multi-fields">
<div class="multi-field col-md-11 col-lg-11">
<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
</div>
<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left;'>
<span class="add-field glyphicon glyphicon-plus-sign"></span>
</a>
</div>
</body>
</html>
and my jquery script is
jQuery(document).ready(function() {
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';
$(".add-field", $(this)).on('click', function(e) {
e.preventDefault();
$('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
e.preventDefault();
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
});
However the problem is that the plus glyphicon is far from textbox while minus glyphicon is nearer which is what is required, as in the image. How can I also move the plus glyphicon in similar distance to the minus glyphicon from the textbox.
This should be extremely but I am a newbee in the area, could you identify the problem and suggest the solution. Thanks!
Aucun commentaire:
Enregistrer un commentaire