0

我有一个注册表单，目前在一个用 jQuery 编码的弹出模式窗口中。我在底部有一个 PHP 提交按钮，并且我添加了 jQuery 代码来阻止按钮提交。这是因为它会在我提交页面时阻止我的模式窗口关闭。我现在的问题是提交表格是不可能的。有没有办法在所有这些拥挤的弹出窗口和 jQuery 上提交我的表单？说是否可以使用 AJAX 或 jQuery 提交表单并允许我的 PHP 处理它。

因为我是用 PHP 编写的，所以有相当多的服务器端验证正在进行，所以这样做的目的是让我的查看者在模式窗口关闭之前修复他们的验证错误。

这是我的 jQuery，我不再打扰它，因为它可以满足我的需要。

$(document).ready(function() {
    $('a.modal-window').click(function() {          
                //Getting the variable's value from a link 
        var loginBox = $(this).attr('href');   
        $(loginBox).fadeIn(300);        
        var popMargTop = ($(loginBox).height() + 24) / 2; 
        var popMargLeft = ($(loginBox).width() + 24) / 2;           
        $(loginBox).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });         
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);         
        return false;
    });     
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() { 
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    }); 
    return false;
    });
});

这是我用来阻止表单提交的代码：

$(function () {
    $(':submit').click(function (event) {
        event.preventDefault();
        // submit the form dynamically
    });
});

下面是我的表格，尽管它在那里供观看，但可能并不重要。

<form method="post" id="loginform"  action="<?php echo $_SERVER['PHP_SELF']?>">
                <table style="color: white;">
                    <tr><th style="float:left;">Register a new account with us.</th></tr>
                    <tr><td>Username</td><td><input type="text" name="txtUser"/></td></tr>
                    <tr><td>Password</td><td><input type="text" name="txtPass"/></td></tr>
                    <tr><td>Email</td><td><input type="text" name="txtEmail"/></td></tr>
                    <tr><td>Confirm Email</td><td><input type="text" name="txtEmail2"/></td></tr>
                    <tr><td>First Name</td><td><input type="text" name="txtFname"/></td></tr>
                    <tr><td>Last Name</td><td><input type="text" name="txtLname"/></td></tr>
                    <tr><td>Address</td><td><input type="text" name="txtAddress"/></td></tr>
                    <tr><td>City</td><td><input type="text" name="txtCity"/></td></tr>
                    <tr><td>Postal Code</td><td><input type="text" name="txtPostal"/></td></tr>
                    <tr><td>Birth Year</td><td><input type="text" name="txtBirth"/></td></tr>
                    <tr><td>Gender</td><td><input type="radio" id="radio-1-1" name="radicalSex" class="regular-radio" value="m" selected="true" /><label for="radio-1-1"></label> Male</td></tr>
                    <tr><td></td><td><input type="radio" id="radio-1-2" name="radicalSex" class="regular-radio" value="f"/><label for="radio-1-2"></label> Female</td></tr>
                    <tr><td colspan='2' style="color: #FF6600;float:left;font-size:70%;"><?php echo $Error;?></td></tr>
                    <tr><td colspan="2"><input type="submit" name="btnRegister" ID="btnBlueTemp" value="Submit Registration" /></td></tr>
                    <tr><td colspan='2' style="float:left; font-size:70%;">Address information is optional</td></tr>
                </table>      
          </form>
4

5 回答 5

1

然后，通过 ajax 提交表单

jQuery AJAX

在发送请求的 AJAX URL 上，您可以编写必要的验证代码并相应地返回。例如。如果某个表单元素不符合验证，您可以相应地将标志作为 json 值抛出。

有可能，为什么不呢。

于 2013-02-01T06:39:31.357 回答
1

您需要在将表单数据发布到 PHP 之前对其进行序列化。

<script type="text/javascript">
    var frm = $('#loginform');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('submitted');
            }
        });

        return false;//stop actual form submit
    });
</script>
于 2013-02-01T06:42:52.713 回答
1

让我举个例子说明如何做到这一点。

<html>
    <head>
    <title></title>

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){ 
            function validate(name, addr){
                if(name=="") {
                    alert('Name is Blank');
                    return false;
                } else if(addr=="") {
                    alert('Address is Blank');
                    return false;
                } else {
                    return true;
                }
            }
            $("#save").click(function(event){ 
                event.preventDefault();
                var name = $("#name").val();
                var addr = $("#addr").val();
                if(validate(name,addr)){
                    $.ajax({
                        type:'POST',
                        data:'name='+name+'&addr='+addr,
                        url:'test2.php',
                        success:function(data) {
                            alert(data);
                        }
                    })  
                }               
            });
        });
    </script>
    </head>
    <body>
    <form name="frm" method="POST" action="">
        <input  type="text" name="name" id="name" value=""/><br>
        <input type="text" name="addr" id="addr" value="" /><br>
        <input type="submit" name="save" id="save" value="Save"/>
    </form>
    </body>
</html>

现在在 test2.php 你可以做你的 php 代码

<?php
    if(isset($_POST['name'])) {
        echo $_POST['name'];
    }
?>

希望这能给你一个想法。

于 2013-02-01T06:55:38.947 回答
0

在客户端完成所有输入验证后，只需提交表单...

$("#loginform").submit();

然后您将让您的服务器完成其余的验证。

如果您想留在页面中并显示来自服务器的验证输出，则。您应该使用 Ajax 提交。

它将您的表单数据发送到服务器，然后您可以进行服务器验证，并输出任何错误。您将在您的 Ajaxcomplete处理程序中获得此信息，您可以使用它向用户显示错误消息。

于 2013-02-01T06:42:05.280 回答
0

要阻止表单重新加载页面，您不需要调用任何阻止方法，因为简单的脚本请求就可以解决问题。

例如，

$('#loginForm').submit(function() {
  // Do the relevant tasks needed here, form is already prevented from being submitted
});

查看此演示以获取有关我所指内容的更多信息

于 2013-02-01T06:51:11.460 回答