找出您正在使用的 onclick 事件并将其发送到处理程序答案

【问题标题】：figuring out which onclick event youre using and sending that to a handler找出您正在使用的 onclick 事件并将其发送到处理程序
【发布时间】：2018-04-03 02:48:28
【问题描述】：

老实说，我从网上获得了登录/注册表格。我已经处理了一些 javascript，但是它使用的那个有点超出我的想象。所以我想做的是找出我正在使用哪个 onclick 事件，并能够将其发送到我的处理程序中的另一个函数以登录它们而不是注册它们。那可能吗？如果是这样，我在哪里可以找到有关如何操作的信息？

<div class="cont_principal">

    <div class="cont_centrar">
        <div class="cont_login">
            <form action="handlercreate.php" method="POST" enctype="multipart/form-data" >
                <div class="cont_tabs_login">
                    <ul class='ul_tabs'>
                        <li class="active"><a href="#" onclick="sign_in()">SIGN IN</a><span class="linea_bajo_nom"></span></li>
                        <li><a href="#up" onclick="sign_up()">SIGN UP</a><span class="linea_bajo_nom"></span></li>
                    </ul>
                </div>
                <div class="cont_text_inputs">
                    <input value = "<?php echo isset($presets['display_name']) ? $presets['display_name'] : ''; ?>" type="text" class="input_form_sign " placeholder="DISPLAY NAME" id = "display_name" name="display_name" />
                    <input value = "<?php echo isset($presets['email']) ? $presets['email'] : ''; ?>"type="text" class="input_form_sign d_block active_inp" placeholder="EMAIL" id = "email" name="email"/>
                    <input type="password" class="input_form_sign d_block  active_inp" placeholder="PASSWORD" id = "password" name="password" />  
                    <input type="password" class="input_form_sign" placeholder="CONFIRM PASSWORD" id = "confirmpassword" name="confirmpassword" /><a href="#" class="link_forgot_pass d_block" >Forgot Password ?</a>    
                </div>
                <div class="cont_btn">
                    <button class="btn_sign" type="submit" value="Submit">SIGN IN</button>
                </div>
            </form>
        </div>
    </div>
</div>

我还希望能够将该值传递给我的处理程序，以便我可以让我们使用该值来忽略某些调用。

JavaScript

    function sign_up(){
    var inputs = document.querySelectorAll('.input_form_sign');
    document.querySelectorAll('.ul_tabs > li')[0].className=""; 
    document.querySelectorAll('.ul_tabs > li')[1].className="active"; 
    for(var i = 0; i < inputs.length ; i++  ) {
    if(i == 2  ){

        }else{  
        document.querySelectorAll('.input_form_sign')[i].className = "input_form_sign d_block";
        }
    } 

    setTimeout( function(){
    for(var d = 0; d < inputs.length ; d++  ) {
        document.querySelectorAll('.input_form_sign')[d].className = "input_form_sign d_block active_inp";  
    }
    },100 );
    document.querySelector('.link_forgot_pass').style.opacity = "0";
    document.querySelector('.link_forgot_pass').style.top = "-5px";
    document.querySelector('.btn_sign').innerHTML = "SIGN UP";    

    setTimeout(function(){
        document.querySelector('.terms_and_cons').style.opacity = "1";
        document.querySelector('.terms_and_cons').style.top = "5px";
    },500);

    setTimeout(function(){
    document.querySelector('.link_forgot_pass').className = "link_forgot_pass d_none";
    document.querySelector('.terms_and_cons').className = "terms_and_cons d_block";
    },450);

}


function sign_in(){
    var inputs = document.querySelectorAll('.input_form_sign');
    document.querySelectorAll('.ul_tabs > li')[0].className = "active"; 
    document.querySelectorAll('.ul_tabs > li')[1].className = ""; 
    for(var i = 0; i < inputs.length ; i++  ) {
    switch(i) {
        case 1:
            console.log(inputs[i].name);
        break;
        case 2:
            console.log(inputs[i].name);
        default: 
            document.querySelectorAll('.input_form_sign')[i].className = "input_form_sign d_block";
    }
}

【问题讨论】：

我对你想要发生的事情感到很困惑。你想要的最终结果是什么？另外，请附上相关的 JavaScript 代码！
对不起，我不确定它是否真的对我有帮助。我将参数传递给我的处理程序，但是当我使用登录而不是注册时，它仍然需要您通常添加的所有值，例如显示名称和确认密码。我希望能够根据他们是否使用注册或登录表单来支持另一个论点，以便我可以以不同的方式处理他们的提交
最终结果是我希望能够说明在您使用登录时没有其他 2 个不可见表单中的信息，以便我可以处理该提交并将它们发送到正确的页面，因为它们已有帐号

标签： javascript php database forms pdo

【解决方案1】：

我不知道您是否有过使用 Javascript 的经验，所以我将分解如何处理这个问题。希望它对你有用。

首先，我们需要从 DOM 中获取您的按钮。

var buttonEventhandler = document.getElementsByClassName('btn_sign');

getElementsByClassName 将获取该类的每个实例你传递它，并将它存储在一个数组中。所以从这里我们将为该类的所有按钮设置一个处理程序。如果您只想在单个按钮上使用它，请给它一个特殊的类或数据属性，以便您可以找到它。

for (var i = 0; i < buttonEventhandler.length; i++) {
    buttonEventhandler[i].addEventListener('click', function(e) {
    // you can stop the form from firing, unless your
    // certain conditions are met. For now I will just use the event
    if (e) {
        e.preventDefault();

        // Now that the default form event is canceled, do your thing...
        e.target.innerHTML = 'TRY AGAIN';
    }
  });
}

这是一个小提琴演示：https://jsfiddle.net/tjz11mqg/9/

如果要正常查看表单功能，只需将条件改为!e即可。

// like this:
if (!e) {

如果您想了解更多有关其工作原理的有用链接：

添加注释：我是在看到你的 JS 之前写的，所以可能会期待更新。

【讨论】：

谢谢，这有助于我了解我想在一定程度上做什么。但是，类名会根据哪个按钮处于活动状态而变化。有没有办法可以将地址用作触发器。因为一个地址以#结尾，另一个以#up结尾？
还是使用onclick的函数调用？一个是登录，另一个是注册
阅读您过去的解释后，我想确保我更好地理解这个场景：您在一个页面上有多个表单。一个重定向到 /# 另一个重定向到 /#up 在提交登录时，它正在检查另一个注册表单中的问题？
因此设置了 html，因此只有 4 个表单条目。取决于您是单击“登录”还是“注册”，只有 2 个可见或全部 4 个。我试图做的可能是将另一个值传递给我的处理程序，如果表单是使用注册发送的，那么它只需要两个输入，否则需要 4 个
我的处理程序设置为检查表单中的四个输入，如果我能够根据我使用的 onclick(event) 发送另一个值，那么我可以解决问题

【解决方案2】：

Henkers 的代码可以运行，但没有针对性能进行很好的优化。与this code 的主要区别在于：

signInButton.addEventListener('click', signInEventHandler);

https://jsfiddle.net/aaronr/tjz11mqg/34/

...其中signInEventHandler 是一个带有事件对象的单个参数的函数。将函数传递给事件侦听器允许侦听器具有特殊签名，从而可以删除并希望被 JavaScript 引擎优化：

signInButton.removeEventListener('click', signInEventHandler);

如果您已经在使用 jQuery，另一种选择是使用 1 个事件处理程序来检查元素类：

$('form').on('click', '.js-sign-in', signInEventHandler);

https://jsfiddle.net/aaronr/tjz11mqg/39/

注意：这不是很重要，但是当您在 JavaScript 中使用 HTML 类时，最好在其前面加上 js- 前缀（例如 js-sign-in）。这样，当您应用 CSS 时，就不会意外更改 JavaScript 需要的类名，从而破坏功能。

注意：IE10 和更早版本不支持addEventListener（如果这对您很重要）。在这个简洁的网站上检查其浏览器兼容性：https://caniuse.com/#feat=addeventlistener

【讨论】：