Question

我最近开始学习jquery来改进我的网站。我想创建一个登录模式对话框供用户输入他们的凭据......我开始使用这段代码：

BootstrapDialog.show({
        size: BootstrapDialog.size_normal,
        title: 'Login',
        message: '\
        <form name="LoginUser" method="POST" action="php/process.php">\
            \
            <div class="input-group">\
                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-user"></i></span>\
                <input name="Username" type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">\
            </div><br>\
            \
            <div class="input-group">\
                <span class="input-group-addon" id="sizing-addon1"><i class="fa fa-lock"></i></span>\
                <input name="Password" type="password" class="form-control" placeholder="Password" aria-describedby="basic-addon1">\
            </div><br>\
            \
        </form> \
        \
        Forgot your password? Click here!\
        ',

        buttons: 
        [
            {id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: true, action: function() { 
                $('LoginUser').submit(function() {
                    if(window.console) console.log('foo');

                    /*var UserData = {
                        'UserName'      : $('input[name=name]').val(),
                        'PassWord'      : $('input[name=name]').val(),
                    };

                    $.ajax({
                        type        : 'POST', 
                        url         : 'php/process.php', 
                        data        : formData, 
                        dataType    : 'json', 
                        encode      : true
                    })*/
                });
            }},

            {id: 'btn-cancel', icon: 'glyphicon glyphicon-remove', label: 'Cancel', cssClass: 'btn-primary',  autospin: false, action: function(dialogRef){ 
                dialogRef.close(); 

            }}
        ]
    });

该按钮似乎没有调用我放在下面的$('LoginUser').submit(function()函数..我尝试了控制台测试，但似乎没有任何工作，甚至是console.log日志......

编辑：模态对话框为nakupanda's Bootstrap Dialog on GitHub

EDIT2：有人可以尝试为我重写吗？因为我不认为我到处都是

EDIT3：我重新编写了代码，我唯一的问题是php如何知道它来自jquery并且是它应该运行的特定形式？

{id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: false, action: function() { 

                    var formData = { 
                        'UserName' : $('input[name="Username"]').val(), 
                        'PassWord' : $('input[name="Password"]').val() 
                    };

                    $.post('php/process.php', function(formData) {
                        console.log("foo3")
                        $('#LoginUser').submit(function(formData) {
                            console.log("foo")
                        });
                    })

                    /*.done(function(data) {
                        console.log(data)

                        if (!data.success) {
                            alert("Failed!")
                        }
                        else {
                            alert("Success!")
                        }
                    });*/
                    event.preventDefault();
            }},

PHP：

<?php
if(isset($_POST['LoginUser']))
{
    $errors =   Array();
    $data =     Array();

    echo $_POST['Username']; 
    echo $_POST['Password'];

    if(empty($_POST['Username'])) $errors['Username'] = 'Username is required.';
    if(empty($_POST['Password'])) $errors['Password'] = 'Password is required.';

    if(!empty($errors['Username']) && !!empty($errors['Password'])) 
    {   
        $data['success'] = true;
        $data['message'] = 'Success!';
    } 
    else
    {
        $data['success'] = true;
        $data['errors']  = $errors;
    }

    echo json_encode($data);
}

Answer 1

如果您尝试使用名称选择器提交表单，则需要遵循以下语法

$("form[name='LoginUser']").submit()

如果您只有一个表格，那么下面的表格将起作用

$("form").submit()

Answer 2

希望现在还为时不晚。

尝试更换按钮定义，如下所示：

{id: 'btn-login', icon: 'glyphicon glyphicon-ok', label: 'Login', cssClass: 'btn-primary',  autospin: true, action: function(dialog) { 
                dialog.getModalBody().find('form').submit(function() {
                  ....

你实际上并不需要像这样写你的表格，这会更好：

message: function(dialog) {
  var $form = $('<form />');
  ...
  
  return $form;
}

您甚至可以将表单引用绑定到对话框实例并稍后使用它：

message: function(dialog) {
  var $form = $('<form />');
  ...
  
  // Bind $form to dialog instance
  dialog.setData('myform', $form);
  
  return $form;
},
buttons: [{
  label: 'A button',
  action: function(dialog) {
    var $form = dialog.getData('myform');
    
    $form.submit();
  }
}]

更好的时尚。

jQuery没有调用我的函数？

2 个答案: