Question

我有一个带下拉菜单的表单。如果没有所需的选项，则用户应该有可能通过其他表单（表单外部;而不是表单内的表单）添加它们。

输入新的下拉条目（通过另一个表单）后，它应显示在相应的下拉列表中，但已输入的所有其他数据应保留在那里，以便用户无需再次插入。

我认为这可以用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>

Answer 1

您需要使用preventDefault()

停止提交表单

在您的函数中，传递事件并调用preventDefault ()

function myFunction (event){
  event.preventDefault ();
  $.ajax(
    // your custom
    )
  }

在表单上，您需要使用onsubmit="myFunction (event)"

Answer 2

看起来你只是警告（）在ajax调用中返回的html。如何将返回的html附加到选择表单？

这样的事情不应该刷新页面：

var modSelect = document.getElementsByName("part_of_module");

var opt = document.createElement('option');
opt.value = 'value';
opt.innerHTML = 'option value';

modSelect[0].appendChild(opt);

Answer 3

将函数绑定到按钮的click事件。按Enter键提交表单时不会触发。相反，请执行<form onsubmit="MyFunction()">，以便在有人尝试提交表单时触发。

请务必删除提交按钮中的onclick，这样它就不会被调用两次。

如何保持AJAX不刷新网站

3 个答案: