<head>
<title>jQuery Add & Remove Dynamically Input Fields in PHP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>jQuery Add & Remove Dynamically Input Fields in PHP</h1>
<form method="post" action="">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="phno[]" class="form-control" placeholder="Enter No" />
<input type="checkbox" name="cdr[]" class="checkbox-inline cdr" />
<input type="checkbox" name="caf[]" class="checkbox-inline caf" />
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function() {
if ($('body').find('.fieldGroup').length < maxGroup) {
var fieldHTML = '<div class="form-group fieldGroup">' + $(".fieldGroupCopy").html() + '</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
});
});
</script>
</body>
in the above code i get the check box values but not corresponding to the text field value
kindly help
i need out put as the data for eg if i entered abcd then check one check box associated with it the the out i need is abcd-value of checkbox clicked this will repetet up to the number of input group
Aucun commentaire:
Enregistrer un commentaire