javascript - 通过输入类型提交按钮从一个选项卡传递到另一个选项卡

Question

我想通过输入(类型提交)从一个选项卡传递到另一个选项卡，该输入后面有一些 JS 代码，但控制台显示了这一点

Uncaught TypeError: Cannot read property 'addEventListener' of null

HTML 代码:

<div class="container">
<div class="row">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Registrarse</h3>
        </div>
        <div class="panel-body">
            <ul class="nav nav-tabs" id="myTabs">
                <li role="presentation" class="active" id="pone">
                    <a data-toggle="tab" href="#datospersonales">Datos personales</a>
                </li>
                <li role="presentation" id="ptwo" class="disabled">
                    <a data-toggle="tab" href="#registrousuario">Registro de usuario</a>
                </li>
                <li role="presentation">
                    <a href="#"></a>
                </li>
            </ul>
            <div class="tab-content mt-25">
                <div role="tabpanel" id="datospersonales" class="tab-pane active fade in">
                    <form class="form-horizontal" id="form1" name="form1">
                        <label class="col-md-1 control-label">Nombres</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control s" placeholder="Nombres" id="name">
                        </div>

                        <label class="col-md-offset-1 col-md-1 control-label">Correo</label>
                        <div class="col-md-4">
                            <input type="text" class="form-control s" placeholder="Correo" id="email">
                        </div>
                    </form>
                    <div class="col-md-offset-11 col-md-1 mt-25">
                        <input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
                    </div>
                </div>

JavaScript 代码:

var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);

function handleClick(){
    $('#myTabs a[href="#ptwo"]').tab('show');
}

我不知道在这种情况下我是否没有正确使用 JQuery，我对此是新手。

Answer 1

我在你的代码中发现了一些东西，请考虑这只是观察。

In the future please specify that you are using boostrap and jQuery (not all pages uses these frameworks), it will help to understand the issue that you are having , also please specify the version of the libraries that you are using!.

in the Submit button you are repeating the attribute "class", so the second one will be ignored when you are trying to get by className; Other important point it since you are adding event handler through JS is not necessary to use "onclick".

<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">

更改

<input type="submit" class="btn btn-success guardar" value="Siguiente">

The HTML submit button will handle a submit , it means that always will send the information in the page to other (could be the same), but that perform of sumit means another requests is done, so, it is necessary to be a submit button ?. Assuming the submit is needed you will need to prevent the event of sending the information (until you want that perform of information necessary), for preventing events you can use "event.preventDefault()", you also will need to add a logic to stop preventing when you consider the information is ready to be sent.

the selector for the tab is not necessary to be to much specific, since is supossed that the id af an HTML element should not be the same in the entire page.

var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);

function handleClick(e){
    e.preventDefault();
    $('#ptwo').tab('show');
}

这是示例工作:

Your sample working