javascript - 如何自动检测具有相同类名的当前表单元素
问题描述
我正在从桌面视图附加表单并将其添加到移动视图(包括脚本),使用 append()
. 由于我为表单元素附加了相同的类名和 ID。在提交表单时,它正在识别移动布局表单并在尝试使用document.getElementsByClassName('txtbox').value
.
根据我的要求,我需要在附加时提供索引来识别每个表单。喜欢document.getElementsByClassName('txtbox')[0].value
。我已经做了同样的方法。但没有得到如何在附加时增加索引值。我已经为它创建了plunker。请让我知道我错过了什么。
这是示例代码
$(document).ready(function(){
var data = $(".div1").html();
$(".div2").append(data);
$("form").submit(function(){
console.log(document.getElementsByClassName('txtbox').value);
/*console.log(document.getElementsByClassName('txtbox')[0].value);
console.log(document.getElementsByClassName('txtbox')[1].value) ; */
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="div1">
// data to be copied
<form class="search-container" onsubmit="event.preventDefault();window.open(abc/cde/+'?q='+document.getElementsByClassName('txtbox').value),'_self');">
<input type="text" class="txtbox" id="txtbox" placeholder="enter here...">
<input type="submit" name="submit" /></form>
</div>
<div class="div2">
//data to be appended
</div>
</body>
</html>
解决方案
您可以使用在表单内$(this).find()
进行选择。.txtbox
$("form").submit(function() {
console.log($(this).find('.txtbox').val());
return false; // for debugging
});
另外,请注意在文档中id
应该是唯一的。
推荐阅读
- c# - 实现双工时 WCF 中的 TimeOut 异常
- sorting - 在 DrRacket 中使用 R5RS 方案排序
- python - PyQT5:如何在 QLabel Widget 中以交互方式绘制图像?
- android - 在 ConstraintLayout 中使用 FrameLayout
- python - 需要帮助使用 pyplot 在同一图中为空白格式数据绘制多个折线图
- c# - 机器人框架 V4 - 机器人在通道中的行为不同
- php - 用 php 执行 cmd 并终止进程
- java - '..' 在
- firebase - 向 Cloud Firestore 添加完全免费的全文搜索功能
- gdb - 关闭 gdb“正常退出”消息