Question

我正在尝试将表单中的信息插入数据库。这是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 ... 感谢

Answer 1

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

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

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

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

Answer 2

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

你可能希望submit-action触发一个javascript函数。像这样：

<form onsubmit="someJsFunction(); return false;" action="some/uri.cgi" >...</form>

Answer 3

一些错误

您的表单指向JavaScript文件，它应指向服务器cgi脚本。
您永远不会致电checkUsername()和checkPassword()，因此usernameCorrect和passwordCorrect仍然是假的。
你正在按下按钮的点击事件，更好的事件是表单的提交，因为当它们在表单中输入时它也会触发，你可以取消提交并发送一个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!");
                },
            });
        }
    });
});

Answer 4

改变以下事项。

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

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

此处sample.cgi是您所需的操作页面。

您需要在表单上添加操作

如何用javascript形成动作

4 个答案: