我有三个地方供用户登录，在同一页面上，我如何在一个功能中让所有三个按钮工作和三个表单处理

i have three places for users to log in, on the same page, how can i get all three buttons to work and three forms to process within one function

本文关键字：三个 功能 处理 表单 一个 工作 按钮 一页 登录 用户 方供      更新时间：2023-09-26

所以我有三个单独的登录表单，位于同一页面上的三个不同位置，我想知道如何在不写出三种不同的表单和功能的情况下完成此登录过程，这三个都做同样的事情，但它们都在不同的区域，这是示例。 这段代码有效， 但我也有 $div 2 和 $div 3，它们也是同一页面上的登录表单。

$div1 = "
      <a href='"#'" onclick='"return false;'" onmousedown='"dropMenu('dropmenu1')'" title='"log in'">
        log in
      </a>
    <div id='"dropmenu1'" class='"dropmenus'">
        log in!<br><br>
    <form id='"loginform1'" onsubmit='"return false;'">
        <input type='"text'" id='"emaill'" placeholder='"  enter email address'" onfocus='"emptyElement('statusl')'" maxlength='"88'">
        <input type='"password'" id='"passwordl'" placeholder='"  enter password'" onfocus='"emptyElement('statusl')'" maxlength='"100'">
        <button id='"loginbtn'" onclick='"login()'">log in</button>
        <p id='"statusl'"><br><br></p>
        <a href='"/forgot_pass.php'">forgot your password?</a>
    </form>
    </div>";

function login(){
    var el = _("emaill").value;
    var pl = _("passwordl").value;
    if(el == "" || pl == ""){
        _("statusl").innerHTML = "<br>please complete the form";
    } else {
        _("loginbtn").style.display = "none";
        _("statusl").innerHTML = 'please wait...';
        var ajax = ajaxObj("POST", "login.php");
        ajax.onreadystatechange = function() {
            if(ajaxReturn(ajax) == true) {
                if(ajax.responseText == "login_failed"){
                    _("statusl").innerHTML = "login was unsuccessful, please try again.";
                    _("loginbtn").style.display = "block";
                } else {
                    location.reload();
                }
            }
        }
        ajax.send("el="+el+"&pl="+pl);
    }
}

在登录按钮的 onclick="login()" 属性中，您可以输入如下函数参数：

onclick="login(1)"其中1可以是每个表单的唯一编号，即。 $div1有onclick="login(1)"，$div2有onclick="login(2)"等等...

然后，您可以将参数添加到登录函数中：

function login(formNum) {...}

然后获取该表单的相应电子邮件和密码，如下所示：

var el = _("emaill" + formNum).value;
var pl = _("passwordl" + formNum).value;
...

当然，您需要更改电子邮件和密码输入的 ID 以包含其相应的表单编号，如下所示：

<input type="text" id="emaill1" ...> $div1，<input type="text" id="emaill2" ...> $div2...

以及表单、登录按钮和状态段落的 ID 以相同的方式。

最后它看起来像这样：

在 Div1 中：

<form id="loginform1" onsubmit="return false;">
    <input type="text" id="email1" placeholder="  enter email address" onfocus="emptyElement('statusl1')" maxlength="88">
    <input type="password" id="passwordl1" placeholder="  enter password" onfocus="emptyElement('statusl1')" maxlength="100">
    <button id="loginbtn1" onclick="login(1)">log in</button>
    <p id="statusl1"><br><br></p>
    <a href="/forgot_pass.php">forgot your password?</a>
</form>

在 Div2 中：

<form id="loginform2" onsubmit="return false;">
    <input type="text" id="email2" placeholder="  enter email address" onfocus="emptyElement('statusl2')" maxlength="88">
    <input type="password" id="passwordl2" placeholder="  enter password" onfocus="emptyElement('statusl2')" maxlength="100">
    <button id="loginbtn2" onclick="login(2)">log in</button>
    <p id="statusl2"><br><br></p>
    <a href="/forgot_pass.php">forgot your password?</a>
</form>

在 Div3 中：

<form id="loginform3" onsubmit="return false;">
    <input type="text" id="email3" placeholder="  enter email address" onfocus="emptyElement('statusl3')" maxlength="88">
    <input type="password" id="passwordl3" placeholder="  enter password" onfocus="emptyElement('statusl3')" maxlength="100">
    <button id="loginbtn3" onclick="login(3)">log in</button>
    <p id="statusl3"><br><br></p>
    <a href="/forgot_pass.php">forgot your password?</a>
</form>

和Javascript：

function login(formNum){
    var el = _("emaill" + fornNum).value;
    var pl = _("passwordl" + fornNum).value;
    if(el == "" || pl == ""){
        _("statusl" + fornNum).innerHTML = "<br>please complete the form";
    } else {
        _("loginbtn" + fornNum).style.display = "none";
        _("statusl" + fornNum).innerHTML = 'please wait...';
        var ajax = ajaxObj("POST", "login.php");
        ajax.onreadystatechange = function() {
            if(ajaxReturn(ajax) == true) {
                if(ajax.responseText == "login_failed"){
                    _("statusl" + fornNum).innerHTML = "login was unsuccessful, please try again.";
                    _("loginbtn" + fornNum).style.display = "block";
                } else {
                    location.reload();
                }
            }
        }
        ajax.send("el="+el+"&pl="+pl);
    }
}
相关文章：