我有一个简单的 html 表单。当“select”元素发生变化时，我想模拟用户点击 javascript 中的提交按钮。 因此，我尝试使用选择的 onchange 函数来做到这一点。我不知道如何编写发送表单的函数。我已经搜索过这个网站，但没有找到任何适合我的东西。它根本没有做任何事情。它没有发送表格。也许我只需要包括一些东西，但我没有，所以也许如果我这样做了，它就会起作用。我真的不知道。我是 JavaScript 的新手。我会非常感谢一段 java 脚本代码（函数），如果需要的话，也许还有我需要的 CDN 或文件。
<!DOCTYPE html>
<html>
<head>
//probably I need to include something here (if so, could you please send me the CDN?)
</head>
<body>
<form method="post" id="theForm" enctype="multipart/form-data">
<select id="year_start" name="year_start" onchange="myFunction()">
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select id="month_start" name="month_start" onchange="myFunction()">
<option>January</option>
<option>February</option>
.
.
<option>December</option>
</select>
<select id="day_start" name="day_start" onchange="myFunction()" >
<option>1</option>
<option>2</option>
.
.
.
<option>30</option>
<option>31</option>
</select>
<input type="submit" id="submit" value="submit">
</form>
<script>
function myFunction(){
//what should I do there? - I want to simulate user's click on the "submit" button
}
</script>
<?php
//I want to do some stuff there after some of the selects was changed
echo $POST['year_start'];
echo $POST['month_start'];
echo $POST['day_start'];
?>
</body>
您可以使用
.click()function myFunction(){
document.getElementById('submit').click();
}并避免在 html 中使用内联函数。
为什么不在提交按钮上手动触发
clicksubmit()function myFunction(){
document.getElementById('theForm').submit();
}
因为你使用的只是 vanilla JS，你不需要包含任何库：这就是编写 vanilla JS 的美妙之处。
专业提示：您可能需要考虑避免内联 JS 绑定，并使用
addEventListenerchange<select><select>var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');
[].prototype.slice.call(selectEls).forEach(function(selectElement) {
// Bind event listener to each select element
selectElement.addEventListener('change', function() {
formEl.submit();
});
});
否则，您也可以在
querySelectorAll()var selectEls = formEl.querySelectorAll('#year_start, #month_start, #day_start');
根据您的评论，我感觉您希望 JS 在 PHP 代码中执行某种操作。请记住，PHP 是一种服务器端语言，因此如果您想使用 JS 通过 PHP 触发某种服务器状态突变，则需要使用 AJAX。
这是一个概念验证示例：
var formEl = document.getElementById('theForm');
var selectEls = formEl.querySelectorAll('select');
Array.prototype.slice.call(selectEls).forEach(function(selectElement) {
// Bind event listener to each select element
selectElement.addEventListener('change', function() {
// Here is just dummy code to show you how binding works
console.log('Will submit form');
// Uncommt this line to perform actual form submission
//formEl.submit();
});
});<form method="post" id="theForm" enctype="multipart/form-data">
<select id="year_start" name="year_start">
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select id="month_start" name="month_start">
<option>January</option>
<option>February</option>
<option>December</option>
</select>
<select id="day_start" name="day_start">
<option>1</option>
<option>2</option>
<option>30</option>
<option>31</option>
</select>
<input type="submit" id="submit_button">Submit</button>
</form>有时别无选择，只能创建自己的临时按钮并模拟点击作为最后的手段。
const simulateSubmit = () => {
const button = document.createElement('button')
button.type = 'submit'
document.body.appendChild(button)
button.click()
document.body.removeChild(button)
}
而不是
document.body