如何从模态窗口获取数据?

时间:2017-04-15 14:24:57

标签: javascript php jquery modal-dialog

我有一个模态对话框。

<div id="myLoginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Войти в учетную запись</h4>
        </div>

        <div class="modal-body">
            <form class="form-horizontal" method="post" action="">
                <div class="form-group">
                    <label class="col-md-4 control-label" for="login">Логин</label>
                    <div class="col-md-4">
                        <input id="login" name="login" type="text" placeholder="" class="form-control input-md" required="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-4 control-label" for="password">Пароль</label>
                    <div class="col-md-4">
                        <input id="password" name="password" type="password" class="form-control input-md" required="">
                    </div>
                </div>
            </form>
        </div>

        <div class="modal-footer">
            <button type="button" id="loginBttn" class="btn btn-success" data-dismiss="modal">Войти</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Отмена</button>
        </div>
    </div>
</div>

...并且有menu.php文件。

<?php
$login = $_POST['login'];
$password = $_POST['password'];
echo $login.$password;

如何在按下提交按钮时从模态对话框中获取并加载div元素用户的登录名和密码?

我试图写出来,但它不起作用 - 例外&#34;未定义的索引$ login和$ password&#34;。

$(document).ready(function() {
    $("#loginBttn").click(function() {
        $("#content").load('menu.php');
    });
});

enter image description here enter image description here

2 个答案:

答案 0 :(得分:0)

您可以提交表单并使用成功回调:

$(document).ready(function() {
   $("#loginBttn").click(function() {
        $.post('menu.php', $("#myLoginModal form").serialize(), function(html){
     $('#content').html(html);
}, 'html')
   });
});

编辑:您也可以查看https://api.jquery.com/jquery.post/

答案 1 :(得分:0)

我刚刚使用PHP Tools for VS而且我做到了! 问题是php解释器v7.1的默认设置!