-1
以下JSFiddleリンクは、動的な行から送信されたフォームの値がページリフレッシュなしでajaxを使用してmysqlテーブルに保存される作業フォームのものです。フォームの送信結果（成功またはエラー）は、javascriptを使用してID「結果」を持つdivに表示されます。チェックボックスのみ選択した行の値をMySQLテーブルに挿入
フォームマークアップ
<form name="names" id="names" method="post" action="">
<div class="container">
<div class="table-responsive">
<button type="button" class="btn btn-success addmore">Add</button>
<button type="button" class="btn btn-danger delete">Remove</button>
<br />
<table id="demo" class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th>
<input class="check_all" type="checkbox" onclick="select_all()" />
</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="case" />
</td>
<td>
<input class="form-control" type="text" name="fname[]" id="fname_1" required>
</td>
<td>
<input class="form-control" type="text" name="lname[]" id="lname_1" required>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="results"></div>
<div id="results2"></div>
</div>
<!-- ./table-responsive -->
</div>
Javascriptを追加/表の行を削除するために、チェックボックスの行（複数可）の選択
// form submission through ajax
$(document).ready(function() {
$(function() {
$("#names").on("submit", function(e) {
e.preventDefault();
$.ajax({
type: "post",
url: "savename.php",
data: $(this).serialize(),
success: function(response) {
if (response == "Name creation successfull.") {
$("#results").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');
} else {
$("#results2").html('<div class="alert alert-success"><button type="button" class="close">×</button>' + response + '</div><br>');
}
//timing the alert box to close after 5 seconds
window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function() {
$(this).remove();
});
}, 2000);
//Adding a click event to the 'x' button to close immediately
$('.alert .close').on("click", function(e) {
$(this).parent().fadeTo(500, 0).slideUp(500);
});
$('#names')[0].reset();
},
error: function(response) {
alert(response);
}
});
});
});
});
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
check();
});
var i = $('table tr').length;
$(".addmore").on('click', function() {
count = $('table tr').length;
var data = "<tr><td><input type='checkbox' class='case'/></td>";
data += "<td><input class='form-control' id='fname_" + i + "' name='fname[]' required/></td>";
data += "<td><input class='form-control' id='lname_" + i + "' name='lname[]' required/></td></tr>";
//alert(data);
$('table').append(data);
row = i;
i++;
});
function select_all() {
$('input[class=case]:checkbox').each(function() {
if ($('input[class=check_all]:checkbox:checked').length == 0) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
}
function check() {
obj = $('table tr').find('span');
$.each(obj, function(key, value) {
id = value.id;
var selected = $('#' + id).html(key + 1);
});
}
Javascriptのフォーム提出のためにこれは何私が実現したい
は、
ユーザー最初の彼/彼女は、各行の先頭にあるチェックボックスを選択することで、MySQLのテーブルに挿入したい行を選択します。
送信ボタンをクリックすると、選択した行の値のみがmysqlテーブルに挿入されます。
このサイトでこのようなさまざまな投稿からソリューションを試してみることでこれを実装しようとしましたが、成功しませんでした。