javascript - 从输入类型提交按钮从一个选项卡传递到另一个选项卡
问题描述
我想通过输入(类型提交)从一个选项卡传递到另一个选项卡,该输入后面有一些 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,我是新手。
解决方案
我在您的代码中发现了一些东西,请考虑这只是观察。
以后请指定您使用的是 boostrap 和 jQuery(并非所有页面都使用这些框架),这将有助于理解您遇到的问题,还请指定您正在使用的库的版本!。
在提交按钮中,您正在重复属性“class”,因此当您尝试通过 className 获取时,第二个将被忽略;另一个重要的一点是,因为您通过 JS 添加事件处理程序,所以不需要使用“onclick”。
<input type="submit" class="btn btn-success" class="guardar" value="Siguiente" onclick="handleClick()">
改变
<input type="submit" class="btn btn-success guardar" value="Siguiente">
HTML的提交按钮会处理一个提交,这意味着总是会将页面中的信息发送给其他(可能相同),但是执行sumit意味着另一个请求已经完成,所以,必须是一个提交按钮?. 假设需要提交,您将需要阻止发送信息的事件(直到您想要执行必要的信息),为了防止事件您可以使用“event.preventDefault()”,您还需要添加一个逻辑当您认为信息已准备好发送时停止阻止。
选项卡的选择器不必非常具体,因为假设 HTML 元素的 id 在整个页面中不应该相同。
var boton = document.querySelector(".guardar")
boton.addEventListener('click',handleClick);
function handleClick(e){
e.preventDefault();
$('#ptwo').tab('show');
}
这是工作示例:
推荐阅读
- swiftui - 如何在 SwiftUI 中使用(不同的)尺寸约束视图屏蔽视图?
- python - 如何摆脱弃用警告?
- gnu-screen - 屏幕在 NetBSD 上失败,报告“poll: Invalid argument”
- javascript - 如何将子数组的内容转换为父数组
- javascript - 在 redux-saga-firebase 中获取集合参考
- javascript - 使用反应添加到购物车功能
- c# - ASP.NET SPA 中的 Azure AD 实现
- html - 如何通过jquery附加嵌套的div?
- vue.js - Quasar QTable 从子组件返回后丢失状态
- python - pytest.mark.parametrize 不能按预期使用 pytest.lazy_fixture