0
我有一個下拉表單。如果所需的選項不可用，用戶應該有可能通過其他表單添加它們（表單外部;而不是表單內部的表單）。如何保持網站更新的AJAX
進入一個新的下拉菜單條目（槽的另一種形式），它應該出現在各自的下拉列表中，但已經進入了所有其他數據應保留在那裏，使用戶不必再重新插入之後。
我因子評分，這可能與AJAX來完成，所以我試過了，但它確實刷新我的網頁（不知何故，至少是其它形式的條目都消失了）。
提交「插入講師」和「插入模塊」到數據庫可以作爲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>
更改按鈕類型=「提交」到按鈕類型=「按鈕」 –