Question

我试图将第二个表单添加到我编写的javascript / jquery脚本中，但是，当我实现并开始测试时，当我尝试通过jquery post请求发送公司表单时，它会改为发送获取请求。我知道这与第二种形式有关，因为为第二种形式注释脚本会使网站再次运行。希望一双新眼睛可以提供帮助！（加载页功能也可以）

寄存器功能似乎是问题所在：

  //when the user first goes to the page
  $(document).ready(function(){ 
        var user = $("#username");
        var pass = $("#password");
        var submit = $("#submit");

            //both of these methods work, I'm not sure if one is better than the other
    //$("#submitbutton").click(function(event){
    $("#loginform").on('submit', function(event){
    event.preventDefault();
    $('.loginerror').remove();
    $.post("login.php", {username:user.val(), password:pass.val()}, function(data){

        if(!data)
        {
            $("#login").append("<h3 class='loginerror'>Incorrect Username or Password</h3>");

        }

        else
        {
        loadpage();
        }

    }, "json");

});

//if the user clicks the username prompt him with the login div
$("#registerbutton").click(function(event){
    register();
});

});

function register()
{
$("#login").hide("slow");
$("#registerdiv").css("display", "block");

//initiate some variables
var regusername = $("#regusername");
var reg1password = $("#reg1password");
var reg2password = $("#reg2password");
var regemail = $("#regemail");
var regfirstname = $("#regfirstname");
var reglastname = $("#reglastname");

//TODO: check to make sure form is filled out properly
$("#registerform").on('submit', function(event){

    event.preventDefault();
    //send post request
    $.post("register.php", {regusername:regusername.val(), password1:reg1password.val(), password2:reg2password.val(), email:regemail.val(), firstname:regfirstname.val(), lastname:reglastname.val()}, function(data){
        if(!data)
            $("#registerdiv").append("<h3> class='loginerror'>Server error, retry</h3>");
        else
            $("#registerdiv").hide("slow");
            $("#loginiv").slidedown("slow");
    }, "json");

}

这是带有两种形式的HTML：

<body>

<Div id="welcome"> Welcome </div>
<Div id="login">
    <br><br><h2>Welcome to QuotesLib</h2>
    <br><br><br><form id="loginform"> Username:
    <input type = "text" name = "username" id ="username"> <br> Password:
    <input type = "password" name = "password" id = "password"> <br>
    <input type = "submit" name="submitbutton" id="submitbutton" class = "bluebutton"> 
    </form>
    <form><br><br><br>Don't have an account yet?<br><button id="registerbutton" name="registerbutton" href="register.html">Register Now</button>    

</Div>
<Div id="registerdiv">
    <br><br><h2>Sign Up For QuotesLib</h2>
    <br><form id="registerform"> Username:
    <input type ="text" id="regusername"> <br> Password:
    <input type ="password" id="reg1password"> <br> Repeat Password:
    <input type ="password" id="reg2password"> <br> First Name:
    <input type ="text" id="regfirstname"> <br> Last Name:
    <input type ="text" id="reglastname"> <br> email:
    <input type ="text" id="regEmail"> <br>
    <input type ="submit" id ="registersubmitbutton">
    <br> </form>
</Div>

如果有人能给我这个问题的答案，那将会非常有帮助！

Answer 1

$("#registerdiv").append("<h3> class='loginerror'>Server error, retry</h3>");

应该是

$("#registerdiv").append("<h3 class='loginerror'>Server error, retry</h3>");

看到区别： <h3>...和<h3 ...

Answer 2

代码有一些错误，

首先，

<form><br><br><br>Don't have an account yet?<br><button id="registerbutton" name="registerbutton" href="register.html">Register Now</button>

你有一个form开放标签，但没有关闭标签，这个按钮甚至不需要表格标签，这就是问题的主要原因

第二， JS代码的结尾，

}, "json");

}

应该是

}, "json");
    });
}

我不确定你是否错过了复制，

<强>第三，

追加方法中的<h3>标记，但不是您遇到的问题。

最好使用一些文本编辑器，这些编辑器可以打开代码打开，结束标记，大括号。

Here the working code

Jquery post函数不能处理两个表单和两个post请求

2 个答案: