Question

我有一个脚本在页面加载和打开时打开一个带有表单的弹出窗口（用于比较输入字段值和一个固定代码）单击提交按钮后需要关闭弹出窗口而不重新加载页面。这是我的代码。 “Html表单代码”

double

“脚本代码” “弹出脚本”

<form method="post" onsubmit="return checkCode(this);">
    <div class="form-group">
        <input type="text" required class="form-control" placeholder="Name" name="name">
    </div>
    <input type="submit" name="save" class="btn btn-primary">
</form>

“比较功能代码”

<script type='text/javascript'>
    $(function () {
        var overlay = $('<div id="overlay"></div>');
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        $('.close').click(function () {
            $('.popup').hide();
            overlay.appendTo(document.body).remove();
            return false;
        });
    });
</script>

请检查此＆amp;帮助我让它正常工作。一切正常我只想点击提交页面不重新加载只需关闭弹出窗口＆amp;保持在同一页面上。谢谢＆amp;问候线索

Answer 1

我假设您拥有的HTML位于弹出窗口或叠加层内部。这有点难以辨别。

如果您想在不重新加载或更改页面的情况下提交表单，则必须使用某种形式的AJAX。由于看起来您使用的是jQuery，因此您可以使用他们的ajax()功能。

要获取表单本身的数据，可以使用他们的serialize()函数将数据存储到POJO（普通的旧JavaScript对象）中。

你可以在任何有意义的情况下调用提交。您可以在return true函数中执行此操作而不是checkCode()（并始终return false）。

它是这样的：

<script type="text/javascript" language="JavaScript">
    function checkCode(theForm) {
        if (theForm.name.value != 'SS-2018') {
            alert('Code not matched!');
        } else {
            $.ajax('http://example.com/post/location', { method: 'post', data: $(theForm).serialize() })
              .then(response => { /* do something with response */ })
              .catch(err => { /* handle error */ });
        }

        return false;
    }
</script>

如何在没有页面重新加载的情况下点击提交按钮后关闭弹出窗口？

1 个答案: