Ajouter multiple input dynamique
<!DOCTYPE html>
<html>
<head>
<title>Ajouter multiple input dynamique | par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Ajouter multiple input dynamique">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
</head>
<body class="container">
<div class="row">
<div class="col-lg-8">
<div id="field">
<div id="field0">
<div class="form-group mb-4">
<label class="col-md-4 control-label" for="Nom">Nom</label>
<div class="col-md-5">
<input id="Nom" name="Nom" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<br><br>
<div class="form-group mb-4">
<label class="col-md-4 control-label" for="Age">Age</label>
<div class="col-md-5">
<input id="Age" name="Age" type="number" placeholder="" class="form-control input-md">
</div>
</div>
<br><br>
<div class="form-group mb-4">
<label class="col-md-4 control-label" for="Image">Image</label>
<div class="col-md-4">
<input type="file" id="Image" name="Image" class="input-file">
<div id="action_jsondisplay"></div>
</div>
</div>
</div>
</div>
<br><br>
<div class="form-group">
<div class="col-md-4">
<button id="add-more" name="add-more" class="btn btn-primary btn-md">Ajouter des inputs</button>
</div>
</div>
<br><br>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
$(document).ready(function () {
var next = 0;
$("#add-more").click(function(e){
e.preventDefault();
var addto = "#field" + next;
var addRemove = "#field" + (next);
next = next + 1;
var newIn = '<div id="field'+ next +'" name="field'+ next +'"><!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="Nom">Nom</label>'
+'<div class="col-md-5"> <input id="Nom" name="Nom" type="text" placeholder="" class="form-control input-md"> </div></div>'
+'<br><br> <!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="Age">Age</label>'
+'<div class="col-md-5"> <input id="Age" name="Age" type="number" placeholder="" class="form-control input-md"> </div>'
+'</div><br><br><!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="Image">Image</label> '
+'<div class="col-md-4"> <input id="Image" name="Image" class="input-file" type="file"> </div></div></div>';
var newInput = $(newIn);
var removeBtn = '<br><button id="remove' + (next - 1) + '" class="btn btn-danger remove-me btn-xs pull-right" >Supprimer</button></div></div>'
+'<div id="field"><br>';
var removeButton = $(removeBtn);
$(addto).after(newInput);
$(addRemove).after(removeButton);
$("#field" + next).attr('data-source',$(addto).attr('data-source'));
$("#count").val(next);
$('.remove-me').click(function(e){
e.preventDefault();
var fieldNum = this.id.charAt(this.id.length-1);
var fieldID = "#field" + fieldNum;
$(this).remove();
$(fieldID).remove();
});
});
});
