У меня есть форма с выпадающими списками. Если желаемые опции недоступны, пользователь должен иметь возможность добавлять их через другие формы (вне формы, а не в форме внутри формы).
После ввода новой выпадающей записи (через другую форму) она должна появиться в соответствующем раскрывающемся списке, но все остальные данные, которые уже были введены, должны оставаться там, чтобы пользователь не мог вставлять его снова.
Я мог бы это сделать с AJAX, поэтому я попробовал, но он обновляет мою страницу (так или иначе, по крайней мере, записи другой формы исчезли).
Представление «Вставить преподавателя» и «Вставить модуль» в базу данных работает как интенсивно.
Возможно ли сохранить данные в форме?
Заранее спасибо!
Вот мой (упрощенный) код:
<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>