Question

我试图阻止在提交表单时关闭弹出窗口，我试图这样做：

        <form class="popup-form" id="login-popup-form" method="post" onsubmit='return false;'>
            <label id="login-popup-user-label">Your username/email:</label> <input class="popup-input" id="login-popup-username-field" name="login-username" placeholder="Username"/><br />
            <label id="login-popup-pw-label">Your password:</label> <input class="popup-input" id="login-popup-password-field" name="login-password" placeholder="Password" type="password"/>
            <input id="login-popup-submit" type="submit" name="login-submit" value="Login"/>
        </form>

但这也会阻止发送值。那么有没有办法确保弹出窗口不会关闭但也会发送值？

Answer 1

使用常见的Javascript框架（例如Jquery）与$ .post和$ .serialize

检查出来：

http://blog.codeinside.eu/2010/02/09/howto-form-valuesinputs-ber-ajax-mit-jquery-serialize-bertragen/

Answer 2

当您从服务器发送表单浏览器加载结果（新页面）时，表单不仅仅关闭，并且没有打开弹出窗口。您可以使用ajax请求从表单发送数据并阻止当前页面重新加载。

$("#login-popup-form").submit(function(e){ //when form submited
    e.preventDefault(); //do not submit form in default way
    form_data = $(this).serialize(); //get data out of form
    $.post('/url-to-send-data', form_data, function(data){ //send ajax request, when get result call function
        if(data.status==1)
           alert('all cool');
        else
            alert(data.message);
    });
});

您需要jquery才能使用此示例，并在表单发布时需要来自服务器的json响应

成功案例：

{status:1}

错误示例：

{status:0,message:"wrong password"}

您可以使用任何其他格式进行服务器响应，但json最容易使用javascript。

Answer 3

我建议下载并使用jQuery，因为它已经为您安装了AJAX处理程序。有关示例和实现的列表，请参阅附件链接。请记住，您需要手动从表单中提取值，并考虑在执行操作时加载微调器，这样您就不会从用户那里获得双重提交。

http://api.jquery.com/jquery.ajax/

防止在表单提交HTML上关闭弹出窗口

3 个答案: