-1
私はウェブを初めて開発しており、現在学校のウェブサイト用のモジュールで作業しています。 1つの動的入力フィールド作成モジュールを作成しましたが、現在はバックエンドで作業しています。問題は、コードを通常使うとフロントエンドは正常ですが、ページをリロードしないでフォームを作成するための基本的なAJAXコードを追加すると、フロントエンドが苦しんでいます。追加ボタンをクリックして新しい入力フィールドを作成すると、単純に機能しません。ここでAjaxコードでコードが正しく実行されないのはなぜですか？
は、私のコードのサンプルです：
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>Dynamic Add Input Fields</header>
<form name="form1" id="form1">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" id="name" class="form-control name_list"/></td>
<td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Submit"/>
<input type="reset" name="reset" id="reset" value="Reset"/>
</form>
<script type="text/javascript" >
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$(document).on('click','.btn_remove',function() {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
});
</script>
</body>
</html>
とAjaxコード私が追加しようとしているここにある：PHP用
$(document).ready(function() {
var i = 1;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="'+i+'" class="btn_remove" Value="X" /></td></tr>');
});
$(document).on('click','.btn_remove',function() {
var button_id = $(this).attr("id");
$("#row"+button_id+"").remove();
});
$('#submit').click(function() {
$.ajax({
type:"POST",
url:"check.php",
data:$('#form1').serialize(),
success:function (data) {
alert(data);
$('form1')[0].reset();
}
});
});
});
アクションページはこちらです：
<?php
$conn = mysqli_connect('localhost','root','root','Test2');
if(!$conn) {
echo 'Couldn\'t connect to database'.mysqli_error();
}
$count = $length = '';
$length = count($name[]);
for($count=0 ; $count<$length ; $count++) {
$sql = "INSERT INTO `check1` (name) VALUES ('$name[$count]')";
$result = mysqli_query($conn,$sql);
if(!$result) {
echo 'Couldn\'t add data '.$count.mysqli_error();
break;
}
}
?>
単純に達成したいのは、実行時に無限の数の入力フィールドを作成できるフォームを作成することです。データが実際のページをリロードすることなくデータベースに格納されます。 ご迷惑をおかけして申し訳ありませんが、ご協力いただきありがとうございます。
「動作しません」と定義します。それは何をするためのものか？ブラウザの開発コンソールにエラーがありますか？ JavaScriptコードはまったく実行されますか？ AJAXリクエストは作成されていますか？サーバーの応答は何ですか？特に何が起こるのですか？ – David
私はコードを修正しました。 –
を確認してください。コードを修正しましたが、問題を明確にしていません。これをデバッグすると、どのように失敗するのですか？ここに誰もあなたのコンピュータで何が起こっているかを見ることはできません。あなたは私達に言わなければなりません。 – David