Question

我尝试用谷歌搜索一个简单注册模式用于引导程序的示例，但在PHP中找不到任何直接示例。如果有人能指出我正确的方向，我真的很感激。非常感谢。哦，我的意思是整个过程，而不仅仅是输入。就像AJAX代码一样。

Answer 1

网上有很多教程。你可以搜索它们，但这里有一个嵌入bootstrap模式的小技巧。请看下面的

    <!DOCTYPE html>   
    <html lang="en">   
    <head>   
    <meta charset="utf-8">   
    <title>Twitter Bootstrap Modals Example</title>   
    <meta name="description" content="Creating Modal Window with Twitter Bootstrap">  
    <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">   
    </head>  
    <body>  
    <div class="container">  
    <h2>Example of creating Modals with Twitter Bootstrap</h2>  
    <div id="example" class="modal hide fade in" style="display: none; ">  
    <div class="modal-header">  
    <a class="close" data-dismiss="modal">×</a>  
    <h3>This is a Modal Heading</h3>  
    </div>  
    <div class="modal-body">  
    <h4>Your Form</h4>  
    <form action="./action.php" class="form_submit" method="post">
<input >
<input >
<input >
<input >
<input type="submit">
</form>                
    </div>  
    <div class="modal-footer">  
    <a href="#" class="btn btn-success">Call to action</a>  
    <a href="#" class="btn" data-dismiss="modal">Close</a>  
    </div>  
    </div>  
    <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>  
    </div>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
    <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>  
    </body>  

    <script>
    $(function(){
      $(".form_submit").on("submit", function(){
        jQuery.ajax({
                        type: 'POST',
                        data: jQuery('.form_submit').serialize(),
                        url: jQuery('.form_submit').attr('action'),
                        dataType: 'json',
                        success: function (response) {
                            if (response.status == true) {
                                alert(response.message);
                            }
                            else {
                              alert(response.message);
                            }

                        },
                    });
      })
    })

    </script>
    </html>

在PHP文件中，您可以使用sql数据库查询来保存表单字段。在action.php文件中写下以下代码

//Data base connection code.
//Save your form fields. You will get array under $_POST variable.

if($_POST){
  //save values in database
  $response["status"] = true;
$response["message"] = "Data Savaed";
}else{
  $response["status"] = false;
$response["message"] = "Data not Savaed";

}

echo json_encode($response);
exit();

Answer 2

只需在模态正文中添加注册表单，有点像：

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style=" max-height: 600px;overflow-y: auto;overflow-x: hidden;">...your sign-up form here..</div>
    </div>
</div>

创建一个按钮/链接来调用注册表单，如下所示：

<a href="#" class="alert-link" data-toggle="modal" data-target=".bs-example-modal-lg" id="add_user">Sign Up</a>

这是AJAX的示例：

$("#signup_form").on("submit", function (e) {
    e.preventDefault();
    $.ajax({
        url: "save_person.php", //PHP FILE HERE
        type: "post",
        data: $(this).serialize(),
        beforeSend: function () {
            $("#success_person").show();
            $("#success_person").html("Adding data to database...")
        },
        complete: function () {
            $("#success_person").delay(3e3).fadeOut()
        },
        success: function (e) {
            $("#success_person").show();
            $("#success_person").html(e);
            $("#success_person").delay(3e3).fadeOut();
            $("#signup_form")[0].reset()
        },
        error: function (e, t, n) {
            alert(e.status);
            alert(n)
        }
    })
});

您认为PHP文件应如下所示：

require_once('../connection/connection.php');

    if (isset($_POST["first_name"]) && !empty($_POST["first_name"])) {
        $form_data = array();
        //first column is your table field
        //second is the name from your sign-up form
        $form_data['title'] = mysql_real_escape_string($_POST['title']);                        
        $form_data['first_name'] = mysql_real_escape_string($_POST['first_name']);
        $form_data['middle_name'] = mysql_real_escape_string($_POST['middle_name']);
        $form_data['last_name'] = mysql_real_escape_string($_POST['last_name']);
        ...

        $tbl = "tblperson";

         // retrieve the keys of the array (column titles)
        $fields = array_keys($form_data);


        // build the query
        $sql = "INSERT INTO ".$tbl."
        (`".implode('`,`', $fields)."`)
        VALUES('".implode("','", $form_data)."')";


        // run the query result resource
        $result = mysql_query($sql);

        if (!$result){
            die('Invalid query: ' . mysql_error());
        }
        else{
            echo "Successfully Added!";
        }
    }

Bootstrap注册模式

2 个答案: