0
私はドロップダウンを持つフォームを持っています。必要なオプションが利用できない場合、ユーザーは他のフォーム（フォームの外にあるフォームではなくフォーム）を使用して追加する必要があります。AJAXがサイトをリフレッシュするのを防ぐ方法
新しいドロップダウンエントリ（別のフォーム）を入力した後は、それぞれのドロップダウンに表示されますが、すでに入力されている他のすべてのデータはそこに残り、再度挿入する必要はありません。
私はこれをAJAXで行うことができたので、試しましたが、私のページを更新しています（少なくとも、他のフォームのエントリはなくなっています）。
"Insert lecturer"と "Insert module"をデータベースに提出すると、intenedとして動作します。
フォームにデータを保存することはできますか？
ありがとうございます！ここで
は、これまでのところ、私の（簡体字）のコードです：
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-8">
<h2>Insert event</h2>
<br>
<form id="createSubjectForm" action="admin_createSubject_submit.php" method="POST">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="subject_name" required />
</div>
<hr>
<div class="form-group">
<label>Code</label>
<input id="subjectCode" type="text" class="form-control" name="code" required />
</div>
<hr>
<?php
$lec_selection = "";
$lec = mysqli_query($con,"SELECT * FROM lecturers ORDER BY last_name");
while($lec_row = mysqli_fetch_assoc($lec)){
$lec_selection .= "<option value=".$lec_row['lecturers_ID'].">".$lec_row['last_name'].", ".$lec_row['first_name']."</option>";
}
?>
<div class="form-group">
<label>Lecturer</label>
<select multiple class="form-control" name="modul_type" required>
<?php echo $lec_selection ?>
</select>
</div>
<hr>
<?php
$mod_selection = "";
$mod = mysqli_query($con,"SELECT * FROM modules ORDER BY name");
while($mod_row = mysqli_fetch_assoc($mod)){
$mod_selection .= "<option value=".$mod_row['name'].">".$mod_row['name']." [".$mod_row['code']."]</option>";
}
?>
<div class="form-group">
<label>Module</label>
<select multiple class="form-control" name="part_of_modules" required>
<?php echo $mod_selection ?>
</select>
</div>
<hr>
<button type="submit" class="btn btn-primary">Insert</button>
</form>
</div>
<div class="col-md-4">
<h3>Insert Lecturer</h3>
<form id="form" name="form">
<div class="form-group">
<label>First name</label>
<input id="lec_first_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Last name</label>
<input id="lec_last_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Institute</label>
<input id="lec_institute" type="text" class="form-control" required />
</div>
<div>
<button id="lec_submit" onclick="myFunction()" type="submit" class="btn btn-primary">Insert</button>
</div>
</form>
<script>
function myFunction() {
var first_name = document.getElementById("lec_first_name").value;
var last_name = document.getElementById("lec_last_name").value;
var institute = document.getElementById("lec_institute").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'first_name1=' + first_name + '&last_name1=' + last_name + '&institute1=' + institute;
if (first_name == '' || last_name == '' || institute == '') {
alert("Bitte alle Felder ausfüllen!");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "admin_createLecturer_submit.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
</script>
<h3>Insert Module</h3>
<form id="form" name="form">
<div class="form-group">
<label>Code</label>
<input id="mod_code" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Name</label>
<input id="mod_name" type="text" class="form-control" required />
</div>
<div class="form-group">
<label>Type</label>
<select class="form-control" name="modul_type" required>
<option id="mod_type" value="1">1</option>
<option id="mod_type" value="2">2</option>
<option id="mod_type" value="3">3</option>
</select>
</div>
<div class="form-group">
<label>Year</label>
<input id="mod_year" type="text" class="form-control" required />
</div>
<div>
<button id="mod_submit" onclick="myFunction2()" type="submit" class="btn btn-primary">Modul eintragen</button>
</div>
</form>
<script>
function myFunction2() {
var mod_code = document.getElementById("mod_code").value;
var mod_name = document.getElementById("mod_name").value;
var mod_type = document.getElementById("mod_type").value;
var mod_year = document.getElementById("mod_year").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'mod_code=' + mod_code + '&mod_name=' + mod_name + '&mod_type=' + mod_type + '&mod_year=' + mod_year;
if (mod_code == '' || mod_name == '' || mod_type == '' || mod_year == '') {
alert("Bitte alle Felder ausfüllen!");
} else {
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "admin_createModule_submit.php",
data: dataString,
cache: false,
success: function(html) {
alert(html);
}
});
}
return false;
}
</script>
</div>
</div>
</div>
</body>
</html>
ボタンタイプを変更する=ボタンタイプ=「ボタン」に「送信」 –