0

我正在尝试将信息从表单插入到数据库中。这是 html 中的表单 - 尝试发布和获取。

<form id="register" action="script/register.js" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" placeholder="Username" />
<br>
<label for="passd">Password:</label>
<input type="password" name="passd" id="passd" placeholder="Password" />
<br>
<label for="conpassd">Password:</label>
<input type ="password" name="conpassd" id="conpassd" placeholder="re-type Password"/>
<br>
<label for="email">E-Mail:</label>
<input type="text" name="email" id="email" placeholder="Email address"/>
<br>
<br>
<button type="submit" name="submitMe" id="submitMe">Submit</button>
<button type="reset">Clear</button>
</form>

这是脚本

$(document).ready(function() {
    var usernameCorrect = false;
    var passwordCorrect = false;

    function checkPassword() {
        var p1 = $("#passd").val();
        var p2 = $("#conpassd").val();
        if(p1 == p2) {
            passwordCorrect = true;
        } else {
            passwordCorrect = false;
            alert("Passwords does not match");
        }
    }

    function checkUsername() {
        var user = $("#username").val();
        var dataPass = {
            "username": user
        }
        $.ajax({
            url: "server/userExists.cgi",
            type: "GET",
            dataType: "text",
            data: dataPass,
            success: function(data) {
                var user = $.trim(data);
                if(user == "No") {
                    usernameCorrect = true;
                } else if(user == "Yes") {
                    usernameCorrect = false;
                    alert("Username already in use");
                }
            },
            error: function() {
                alert('Script Execution Error');
            },
        });
    }

    function submitForm() {
        if(usernameCorrect == true && passwordCorrect == true) {
            e.preventDefault();
            var dataPass = {
                'username': (username),
                'passd': ($("#passd").val()),
                'email': ($("#conpassd").val())
            };
            $.ajax({
                url: "server/init.cgi",
                type: "GET",
                data: dataPass,
                success: function() {
                    alert("Register successful");
                    //nextPage(username);
                },
                error: function() {
                    alert("Error!");
                },
            });
        }
    }

    $("#submitMe").click(function(e) {
        submitForm();
    });

});

无论如何将表单链接到javascript？我不知道任何其他语言，例如 php 所以...谢谢

4

4 回答 4

0

表单上没有任何action内容 - 只需.js使用<script>元素正常添加文件。

<form id="register" method="post">
<script type="text/javascript" src="script/register.js"></script>

您已经附加到脚本中的提交按钮单击事件，它会调用您的 ajax 例程，因此不需要更多。

您还需要通过附加到表单的提交事件并false;从函数返回来覆盖表单的默认行为，以便实际不发布表单。

于 2012-06-02T09:32:51.487 回答
0

这action="script/register.js"意味着您将表单数据提交到这样的 URI： http ://example.com/script/register.js

您可能希望提交操作触发 javascript 函数。像这样：

<form onsubmit="someJsFunction(); return false;" action="some/uri.cgi" >...</form>
于 2012-06-02T09:35:53.913 回答
0

几个错误

  • 您的表单指向一个 JavaScript 文件，它应该指向服务器 cgi 脚本。
  • 你从来没有打电话checkUsername()，checkPassword()所以usernameCorrect仍然passwordCorrect是假的。
  • 您正在连接按钮的单击事件，更好的事件是表单的提交，因为当他们在表单中按 Enter 时它也会触发，您可以取消提交并发送 AJAX 请求，这样，您的表单也适用于 JavaScript已关闭。

这是您需要更改的内容，表单的 HTML 应该是

<form id="register" action="server/init.cgi" method="post">

由于 AJAX 调用的异步性质，您的脚本必须稍作调整，您必须使用回调。

$(document).ready(function() {
    $('#register').on('submit', function(e){
        // so the form doesn't get sent since we are going to send it with AJAX
        e.preventDefault();

        var user = $("#username").val(), 
            pwd = $("#passd").val(), 
            pwd2 = $("#conpassd").val(),
            form = this;

        if (pwd != pwd2) {
            alert("Passwords does not match");
            return false;
        }
        var dataPass = {"username": user};
        $.ajax({
            url: "server/userExists.cgi",
            type: "GET",
            dataType: "text",
            data: dataPass,
            success: function(data) {
                var user = $.trim(data);
                    if(user == "Yes") {
                       alert("Username already in use");
                       return;
                    }
                    else {
                        submitForm();
                    }
            },
            error: function() {
                alert('Script Execution Error');
            },
        });

        function submitForm() {
            var dataPass = {'username': user,'passd': pwd,'email': ($('#email').val())};
            $.ajax({
                // no need to duplicate the URL here, the form already knows it
                url: form.action,
                type: "GET",
                data: dataPass,
                success: function() {
                    alert("Register successful");
                    //nextPage(username);
                },
                error: function() {
                    alert("Error!");
                },
            });
        }
    });
});
于 2012-06-02T09:39:56.517 回答
0

更改以下内容。

<script type="text/javascript" src="script/register.js"></script>

<form id="register" method="post" action="sample.cgi">

这里 sample.cgi 是您需要的操作页面。

您需要在表单上添加操作

于 2012-06-02T09:40:09.870 回答