-2
新しい入力フィールドを追加すると、その位置と埋め込みが矛盾するか不一致になります。 すべての新しい入力フィールドを最初のものと同じにしたいと思います。あなたがすべてでなければならない動的入力フィールドの追加/削除
<!DOCTYPE html>
<html lang="en">
<head>
<title>INVOICE</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script>
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/main3.js"></script>
</head>
<script>
$(document).ready(function(){
$(document).on('click','#submit',function(e) {
var data = $("#invoice_form").serialize();
$.ajax({
data: data,
method: "POST",
url: "insert.php",
success: function(data){
alert("Data: " + data);
}
});
});
});
</script>
<body>
<br>
<br>
<div id="wrapper" class="container">
<form method="POST" action="" id="invoice_form">
<div class="row">
<label class="col-md-12">
<div class="form-group" id=invoice>Enter Invoice No
<input type="text" class="form-control" placeholder="" name="invoiceNum">
</div>
</label>
</div>
<div class="row">
<label class="col-md-6">
<div class="form-group">Bill To
<input type="text" class="form-control" placeholder="" name="name">
</div>
</label>
<label class="col-md-6">
<div class="form-group">Address
<input type="text" class="form-control" placeholder="" name="address">
</div>
</label>
</div>
<div class="row">
<div class="after_add_button">
<label class="col-md-6">
<div class="form-group" id="particular">Description
<textarea class="form-control" placeholder="" name="describe[]"></textarea>
</div>
</label>
<label class="col-md-2">
<div class="form-group">Quantity
<input type="text" class="form-control" id="Major" placeholder="" name="quantity[]">
</div>
</label>
<label class="col-md-2">
<div class="form-group">Rate
<input type="text" class="form-control" id="Major" placeholder="" name="rate[]">
</div>
</label>
<div class="col-md-2" id="b">
<button type="button" class="btn btn-primary add_button"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="form-group">
<div class="col-md-2">
<button type="submit" class="btn btn-warning" id="submit">Submit</button>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function(){
var max_fields = 10;
var add_button = $('.add_button');
var field_wrapper = $('.after_add_button');
var new_field_html = '<div class="row copy"><hr><label class="col-md-6"><div class="form-group">Description<textarea class="form-control" placeholder="" name="describe[]"></textarea></div> </label><label class="col-md-2"><div class="form-group">Quantity<input type="text" class="form-control" id="Major" placeholder="" name="quantity[]"></div></label><label class="col-md-2"><div class="form-group">Rate<input type="text" class="form-control" id="Major" placeholder="" name="rate[]"></div></label><div class="col-md-2" id="b"><button type="button" class="btn btn-primary remove_button"><i class="fa fa-minus"></i></button></div></div>';
//Add fields dynamically
var input_count = 1;
$(add_button).click(function(){
if(input_count < max_fields){
++input_count;
$(field_wrapper).append(new_field_html);
}
});
//Remove fields dynamically
$(field_wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).closest('div.copy').remove();
--input_count;
});
});
</script>
<br>
<br>
</div>
</body>
</html>
は動作しますが、あなたが仲間感謝しませんでした。 – Armour
私は自分のコードをテストしており、動作しています。 – Virb