我在下面的代码中有三种形式。第一种形式可以通过日期，但是其他两种形式都不能通过日期。只要其他形式是第一个调用的形式，其他形式就可以正常工作。所以问题是为什么我只能在页面上以一种形式使用onclick函数。在调用第一个onclick之后，所有其他onclick都将被忽略。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Profile</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
var buttons = document.querySelectorAll('form');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('submit', ShowLocalDate);
}
function ShowLocalDate() {
event.preventDefault();
var dNow = new Date();
var localdate = '[' + (dNow.getMonth() + 1) + ']<' + dNow.getDate() + '>!' +
dNow.getFullYear() + '!-' + dNow.getHours() + '-:' +
dNow.getMinutes() + ':';
event.target.querySelector(".createdAtInput").value = localdate;
event.target.submit();
}
</script>
</head>
<body>
<!-- form below works -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="modify_refund_script.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
</body>
</html>
最佳答案
id属性在同一文档中必须是唯一的，请使用常见的类（例如：）替换一次重复项：
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
最好避免使用内联事件
onClick，并尝试使用addEventListener()将事件附加到您的JS代码中，例如：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active Profile</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', ShowLocalDate);
}
});
function ShowLocalDate() {
event.preventDefault();
var dNow = new Date();
var localdate = '[' + (dNow.getMonth() + 1) + ']<' + dNow.getDate() + '>!' +
dNow.getFullYear() + '!-' + dNow.getHours() + '-:' +
dNow.getMinutes() + ':';
event.target.querySelector(".createdAtInput").value = localdate;
event.target.submit();
}
</script>
</head>
<body>
<!-- form below works -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="history_report.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
<!-- does not work -->
<form action="modify_refund_script.php" method="post">
<input type="text" class="createdAtInput" name="php_client_date" />
<button type="submit">X-fer Date</button>
</form>
</body>
</html>